6f:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 84:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#f0f4f9" 54:["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#dce4ef"}]]}] 55:["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#c5d1e1"}]]}] 56:["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}]]}] 57:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 58:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 59:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 5b:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 5c:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 5d:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 5e:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5f:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 60:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 61:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 62:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 63:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 64:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 65:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 66:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 67:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 68:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 69:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 6a:["$","$L6f",null,{"orientation":"horizontal"}] 6b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L70"}]]}],"$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82"]}],"$L83"]}]}]]}] 6c:null 6d:null 85:Tdfe6,"use client"; /* -------------------------------------------------------------------------- * TaskDependencyMap — a presentation-only *dependency visualization* for an * app-owned set of tasks. It is NOT a project-management app and NOT a generic * pan/zoom node-graph editor: the host application owns the tasks, their * statuses, scheduling, cycle validation, and persistence. This component * renders that data as a readable dependency map and owns only the *reading and * light-editing UX* — selecting a task, inspecting what blocks it and what it * unblocks, highlighting a dependency path, surfacing bottlenecks, adding and * removing prerequisites, moving a task between groups, collapsing groups, and * presenting an app-supplied cycle error. * * Layout is computed CLEAN-ROOM in plain JS (no layout measurement, no external * graph/drag library): tasks are laid out in dependency-depth columns (longest * path from a root) within horizontal group lanes, and dependency lines are * drawn as static SVG paths from those computed coordinates. Because positions * are derived, not measured, the map renders identically on the server and in * tests. Dependency lines are NOT continuously animated. * * Accessibility (never pointer-only): * - Every task node is a keyboard target with a roving tabindex; arrow keys * move between dependency levels and within a lane, Enter/Space selects a * task and opens its details. * - Relationships are navigable from the detail panel: each prerequisite and * dependent is a button that selects and focuses that task, and every * selection is announced in a polite live region ("Blocked by …, blocks …"). * - A COMPACT LIST view (also the mobile dependency-detail mode) presents the * same information and every action without any spatial interaction. * - Status is conveyed with an icon + text label, never colour alone; the SVG * lines are decorative (aria-hidden) — the authoritative relationship * information is the textual detail panel and list. * - Focus is preserved across moves/edits and restored after an optimistic * rollback. * * Clean-room original. * ----------------------------------------------------------------------- */ import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useControllableState, useOptimisticAction, useAnchoredPortal, statusVars, type StatusTone, } from "@/lib/motiq"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export type TaskStatus = | "planned" | "ready" | "active" | "blocked" | "completed" | "cancelled"; export type TaskPriority = "low" | "normal" | "high" | "urgent"; export interface Task { /** Stable id — referenced by `dependencyIds`, selection, and every callback. */ id: string; /** Task title (the accessible name of the node). */ title: string; /** Lifecycle status (app-owned). Rendered with an icon + text, never colour alone. */ status: TaskStatus; /** Optional priority — `urgent`/`high` surface a small badge. */ priority?: TaskPriority; assignee?: string; startDate?: Date | number | string; dueDate?: Date | number | string; /** Completion ratio 0..1. */ progress?: number; /** Ids of the tasks that must be done first (this task's prerequisites). */ dependencyIds: string[]; /** App-supplied reason a `blocked` task is blocked (shown verbatim). */ blockedReason?: string; /** Group / workstream id — drives the horizontal lanes (see `groups`). */ group?: string; /** Marks a milestone task (diamond marker). */ milestone?: boolean; /** Arbitrary passthrough for `renderTask` / `renderDetails`. */ metadata?: Record; } export interface TaskGroup { /** Stable id — matched against `task.group`. */ id: string; /** Human lane label. */ name: string; } /** App-supplied cycle error presented as an alert (the app owns detection). */ export interface TaskCycleError { message: string; /** Optional ids involved in the cycle, echoed for context. */ taskIds?: string[]; } export type TaskLayoutMode = "map" | "list"; /** Context handed to `renderTask` / `renderDetails`. */ export interface TaskRenderContext { selected: boolean; /** Direct prerequisites of the task (tasks it depends on). */ prerequisites: Task[]; /** Direct dependents (tasks that depend on this one). */ dependents: Task[]; /** Incomplete prerequisites currently blocking the task. */ blockedBy: Task[]; onPath: boolean; isBottleneck: boolean; } export interface TaskDependencyMapProps { /** All tasks (app-owned). */ tasks: Task[]; /** Controlled selection. */ selectedTaskId?: string | null; /** Uncontrolled initial selection. */ defaultSelectedTaskId?: string | null; /** Notified when the selected task changes (null when cleared). */ onSelectedTaskChange?: (taskId: string | null) => void; /** `taskId` gains `dependencyId` as a prerequisite. The app validates + persists. */ onAddDependency?: (taskId: string, dependencyId: string) => void; /** `taskId` loses `dependencyId` as a prerequisite. */ onRemoveDependency?: (taskId: string, dependencyId: string) => void; /** * Move a task into another group. May return a Promise for optimistic * movement: the node re-lanes immediately and rolls back if it rejects. */ onMoveTask?: (taskId: string, toGroup: string) => void | Promise; /** `map` (default) or `list`. `list` is the compact / mobile fallback. */ layout?: TaskLayoutMode; /** Ordered lanes. Absent → derived from the tasks' `group` values. */ groups?: TaskGroup[]; /** Highlight a path (ordered ids); its nodes + connecting edges are emphasised. */ activePath?: string[]; /** App-supplied cycle error to present (e.g. after a rejected add-dependency). */ cycleError?: TaskCycleError | null; /** Force the compact list view regardless of `layout` (mobile / tests). */ compact?: boolean; /** Transitive-dependents count at/above which an incomplete task is a bottleneck. */ bottleneckThreshold?: number; /** Override a task node's body. */ renderTask?: (task: Task, ctx: TaskRenderContext) => React.ReactNode; /** Override the detail-panel body. */ renderDetails?: (task: Task, ctx: TaskRenderContext) => React.ReactNode; /** Accessible label for the region. */ label?: string; /** Force reduced motion (demos/tests). */ reducedMotion?: boolean; className?: string; } /* -------------------------------------------------------------------------- */ /* Status metadata (icon + text — never colour alone) */ /* -------------------------------------------------------------------------- */ const P = (d: string) => ( ); const STATUS_META: Record< TaskStatus, { label: string; tone: StatusTone; icon: React.ReactNode } > = { planned: { label: "Planned", tone: "neutral", icon: P("M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z") }, ready: { label: "Ready", tone: "info", icon: P("M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM10 9l5 3-5 3V9Z") }, active: { label: "Active", tone: "active", icon: P("M12 3a9 9 0 1 0 9 9M12 7v5l3 2") }, blocked: { label: "Blocked", tone: "warning", icon: P("M7 11V8a5 5 0 0 1 10 0v3M6 11h12a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z"), }, completed: { label: "Completed", tone: "success", icon: P("M4 12.5 9 17.5 20 6.5") }, cancelled: { label: "Cancelled", tone: "neutral", icon: P("M6 6l12 12M18 6 6 18") }, }; function StatusIcon({ status, size = 13 }: { status: TaskStatus; size?: number }) { return ( ); } function StatusPill({ status, size = "md" }: { status: TaskStatus; size?: "sm" | "md" }) { const meta = STATUS_META[status]; const v = statusVars(meta.tone); return ( {meta.label} ); } /* -------------------------------------------------------------------------- */ /* Pure graph + layout helpers (deterministic, no measurement) */ /* -------------------------------------------------------------------------- */ const UNGROUPED = "__ungrouped__"; /** Longest-path depth from a dependency root; cycle-guarded so bad data can't hang. */ function computeLevels(tasks: Task[], byId: Map): Map { const memo = new Map(); const visiting = new Set(); const depth = (id: string): number => { const cached = memo.get(id); if (cached !== undefined) return cached; if (visiting.has(id)) return 0; // cycle guard — app validates, we just stay finite visiting.add(id); const t = byId.get(id); let d = 0; if (t) { for (const dep of t.dependencyIds) { if (byId.has(dep)) d = Math.max(d, depth(dep) + 1); } } visiting.delete(id); memo.set(id, d); return d; }; for (const t of tasks) depth(t.id); return memo; } /** Direct dependents (reverse edges). */ function computeDependents(tasks: Task[], byId: Map): Map { const out = new Map(); for (const t of tasks) out.set(t.id, []); for (const t of tasks) { for (const dep of t.dependencyIds) { if (byId.has(dep)) out.get(dep)!.push(t.id); } } return out; } /** Count of tasks that (transitively) depend on `id`. Cycle-guarded. */ function transitiveDependents(id: string, dependents: Map): number { const seen = new Set(); const stack = [...(dependents.get(id) ?? [])]; while (stack.length) { const cur = stack.pop()!; if (seen.has(cur)) continue; seen.add(cur); for (const next of dependents.get(cur) ?? []) if (!seen.has(next)) stack.push(next); } return seen.size; } const COL_W = 196; const COL_GAP = 66; const NODE_H = 64; const ROW_GAP = 18; const LANE_HEADER_H = 30; const LANE_GAP = 14; const PAD_X = 8; const PAD_Y = 6; interface LaidOutNode { id: string; x: number; y: number; level: number; group: string; } interface LaidOutLane { group: string; name: string; headerY: number; rows: number; hidden: number; } interface Layout { nodes: LaidOutNode[]; nodeById: Map; lanes: LaidOutLane[]; width: number; height: number; } function buildLayout( tasks: Task[], laneOrder: { id: string; name: string }[], groupOf: (id: string) => string, levels: Map, collapsed: Set, ): Layout { const nodes: LaidOutNode[] = []; const nodeById = new Map(); const lanes: LaidOutLane[] = []; // Original index for stable within-lane ordering. const orderIndex = new Map(); tasks.forEach((t, i) => orderIndex.set(t.id, i)); const byLane = new Map(); for (const t of tasks) { const g = groupOf(t.id); const arr = byLane.get(g) ?? []; arr.push(t); byLane.set(g, arr); } let cursorY = PAD_Y; let maxLevel = 0; for (const lane of laneOrder) { const laneTasks = (byLane.get(lane.id) ?? []).slice().sort((a, b) => { const la = levels.get(a.id) ?? 0; const lb = levels.get(b.id) ?? 0; if (la !== lb) return la - lb; return (orderIndex.get(a.id) ?? 0) - (orderIndex.get(b.id) ?? 0); }); if (laneTasks.length === 0) continue; const headerY = cursorY; cursorY += LANE_HEADER_H; const isCollapsed = collapsed.has(lane.id); let rows = 0; if (!isCollapsed) { const perLevel = new Map(); for (const t of laneTasks) { const level = levels.get(t.id) ?? 0; maxLevel = Math.max(maxLevel, level); const sub = perLevel.get(level) ?? 0; perLevel.set(level, sub + 1); const node: LaidOutNode = { id: t.id, x: PAD_X + level * (COL_W + COL_GAP), y: cursorY + sub * (NODE_H + ROW_GAP), level, group: lane.id, }; nodes.push(node); nodeById.set(t.id, node); rows = Math.max(rows, sub + 1); } cursorY += rows * (NODE_H + ROW_GAP); } lanes.push({ group: lane.id, name: lane.name, headerY, rows, hidden: isCollapsed ? laneTasks.length : 0, }); cursorY += LANE_GAP; } const width = Math.max(COL_W + PAD_X * 2, PAD_X * 2 + (maxLevel + 1) * COL_W + maxLevel * COL_GAP); const height = Math.max(NODE_H + PAD_Y * 2, cursorY); return { nodes, nodeById, lanes, width, height }; } function edgePath(from: LaidOutNode, to: LaidOutNode): string { const x1 = from.x + COL_W; const y1 = from.y + NODE_H / 2; const x2 = to.x; const y2 = to.y + NODE_H / 2; const mx = x1 + Math.max(24, (x2 - x1) / 2); return `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`; } function toMs(value: Date | number | string): number { const d = value instanceof Date ? value : new Date(value); return d.getTime(); } function formatDate(value: Date | number | string): string { const d = new Date(toMs(value)); if (Number.isNaN(d.getTime())) return ""; return new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" }).format(d); } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export function TaskDependencyMap({ tasks, selectedTaskId, defaultSelectedTaskId = null, onSelectedTaskChange, onAddDependency, onRemoveDependency, onMoveTask, layout = "map", groups, activePath, cycleError, compact = false, bottleneckThreshold = 3, renderTask, renderDetails, label = "Task dependency map", reducedMotion, className, }: TaskDependencyMapProps) { const mediaReduced = useReducedMotion(); const reduced = reducedMotion ?? mediaReduced; const [selected, setSelected] = useControllableState({ value: selectedTaskId, defaultValue: defaultSelectedTaskId, onChange: onSelectedTaskChange, }); const [collapsed, setCollapsed] = React.useState>(() => new Set()); const [statusFilter, setStatusFilter] = React.useState>(() => new Set()); const [announcement, setAnnouncement] = React.useState(""); const [focusedId, setFocusedId] = React.useState(null); const [focusToken, setFocusToken] = React.useState(0); const announce = React.useCallback((msg: string) => setAnnouncement(msg), []); /* -- derived graph -------------------------------------------------- */ const byId = React.useMemo(() => new Map(tasks.map((t) => [t.id, t])), [tasks]); const levels = React.useMemo(() => computeLevels(tasks, byId), [tasks, byId]); const dependents = React.useMemo(() => computeDependents(tasks, byId), [tasks, byId]); /* -- optimistic move (group reassignment with rollback) ------------- */ const committedGroups = React.useMemo(() => { const m: Record = {}; for (const t of tasks) m[t.id] = t.group ?? UNGROUPED; return m; }, [tasks]); const move = useOptimisticAction>(committedGroups); const groupOf = React.useCallback( (id: string) => move.value[id] ?? byId.get(id)?.group ?? UNGROUPED, [move.value, byId], ); /* -- lane order ----------------------------------------------------- */ const laneOrder = React.useMemo(() => { const seen = new Set(); const order: { id: string; name: string }[] = []; if (groups) { for (const g of groups) { order.push({ id: g.id, name: g.name }); seen.add(g.id); } } for (const t of tasks) { const g = groupOf(t.id); if (!seen.has(g)) { seen.add(g); order.push({ id: g, name: g === UNGROUPED ? "Ungrouped" : g }); } } return order; }, [groups, tasks, groupOf]); const groupName = React.useCallback( (id: string) => laneOrder.find((l) => l.id === id)?.name ?? (id === UNGROUPED ? "Ungrouped" : id), [laneOrder], ); const layoutData = React.useMemo( () => buildLayout(tasks, laneOrder, groupOf, levels, collapsed), [tasks, laneOrder, groupOf, levels, collapsed], ); const pathSet = React.useMemo(() => new Set(activePath ?? []), [activePath]); /* -- relationship lookups ------------------------------------------ */ const prerequisitesOf = React.useCallback( (id: string): Task[] => (byId.get(id)?.dependencyIds ?? []).map((d) => byId.get(d)).filter(Boolean) as Task[], [byId], ); const dependentsOf = React.useCallback( (id: string): Task[] => (dependents.get(id) ?? []).map((d) => byId.get(d)).filter(Boolean) as Task[], [dependents, byId], ); const blockedByOf = React.useCallback( (id: string): Task[] => prerequisitesOf(id).filter((p) => p.status !== "completed" && p.status !== "cancelled"), [prerequisitesOf], ); const isBottleneck = React.useCallback( (id: string): boolean => { const t = byId.get(id); if (!t || t.status === "completed" || t.status === "cancelled") return false; return transitiveDependents(id, dependents) >= bottleneckThreshold; }, [byId, dependents, bottleneckThreshold], ); const renderCtx = React.useCallback( (id: string): TaskRenderContext => ({ selected: selected === id, prerequisites: prerequisitesOf(id), dependents: dependentsOf(id), blockedBy: blockedByOf(id), onPath: pathSet.has(id), isBottleneck: isBottleneck(id), }), [selected, prerequisitesOf, dependentsOf, blockedByOf, pathSet, isBottleneck], ); /* -- focus management ------------------------------------------------ */ const nodeRefs = React.useRef>(new Map()); const rowRefs = React.useRef>(new Map()); const pendingFocus = React.useRef(null); const focusTask = React.useCallback((id: string) => { pendingFocus.current = id; setFocusToken((t) => t + 1); }, []); React.useEffect(() => { const id = pendingFocus.current; if (id == null) return; pendingFocus.current = null; (nodeRefs.current.get(id) ?? rowRefs.current.get(id))?.focus(); }, [focusToken, layoutData]); const selectTask = React.useCallback( (id: string | null, opts: { focus?: boolean; announce?: boolean } = {}) => { setSelected(id); setFocusedId(id); if (id) { if (opts.announce !== false) { const t = byId.get(id); const blocked = blockedByOf(id); const unblocks = dependentsOf(id); announce( `${t?.title ?? "Task"} selected. ${STATUS_META[t?.status ?? "planned"].label}. ` + (blocked.length ? `Blocked by ${blocked.length} task${blocked.length === 1 ? "" : "s"}: ${blocked.map((b) => b.title).join(", ")}. ` : "No blocking prerequisites. ") + (unblocks.length ? `Unblocks ${unblocks.length} task${unblocks.length === 1 ? "" : "s"}.` : "No dependents."), ); } if (opts.focus) focusTask(id); } }, [setSelected, byId, blockedByOf, dependentsOf, announce, focusTask], ); /* Rollback restores focus + announces (move handler holds the DOM refs). */ const prevMovePhase = React.useRef(move.phase); React.useEffect(() => { if (prevMovePhase.current === "pending" && move.phase === "error") { if (selected) focusTask(selected); announce(`Move failed. ${move.error ?? "The task returned to its group."}`); } prevMovePhase.current = move.phase; }, [move.phase, move.error, selected, focusTask, announce]); const moveTaskToGroup = React.useCallback( (taskId: string, toGroup: string) => { const from = groupOf(taskId); if (from === toGroup) return; const next = { ...committedGroups, [taskId]: toGroup }; announce(`${byId.get(taskId)?.title ?? "Task"} moved to ${groupName(toGroup)}.`); focusTask(taskId); void move.commit(next, async () => { await onMoveTask?.(taskId, toGroup); }); }, [groupOf, committedGroups, announce, byId, groupName, focusTask, move, onMoveTask], ); /* -- roving keyboard nav in the map --------------------------------- */ const visibleNodes = layoutData.nodes; const onNodeKeyDown = React.useCallback( (e: React.KeyboardEvent, id: string) => { const key = e.key; if (key === "Enter" || key === " " || key === "Spacebar") { e.preventDefault(); selectTask(id, { focus: false }); return; } if (!key.startsWith("Arrow")) return; const cur = layoutData.nodeById.get(id); if (!cur) return; e.preventDefault(); let target: LaidOutNode | null = null; if (key === "ArrowUp" || key === "ArrowDown") { // Move within the same dependency level by vertical position. const sameLevel = visibleNodes .filter((n) => n.level === cur.level && n.id !== id) .sort((a, b) => a.y - b.y); const dir = key === "ArrowDown" ? 1 : -1; target = sameLevel .filter((n) => (dir > 0 ? n.y > cur.y : n.y < cur.y)) .sort((a, b) => (dir > 0 ? a.y - b.y : b.y - a.y))[0] ?? null; } else { // Move between dependency levels (Left = prerequisites side, Right = dependents). const dir = key === "ArrowRight" ? 1 : -1; const candidates = visibleNodes.filter((n) => (dir > 0 ? n.level > cur.level : n.level < cur.level)); if (candidates.length) { const nextLevel = candidates.reduce( (best, n) => (dir > 0 ? Math.min(best, n.level) : Math.max(best, n.level)), dir > 0 ? Infinity : -Infinity, ); target = candidates .filter((n) => n.level === nextLevel) .sort((a, b) => Math.abs(a.y - cur.y) - Math.abs(b.y - cur.y))[0] ?? null; } } if (target) { setFocusedId(target.id); focusTask(target.id); } }, [layoutData, visibleNodes, selectTask, focusTask], ); const toggleGroup = React.useCallback( (id: string) => { setCollapsed((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); announce(`${groupName(id)} group ${next.has(id) ? "collapsed" : "expanded"}.`); return next; }); }, [groupName, announce], ); const toggleStatusFilter = React.useCallback((status: TaskStatus) => { setStatusFilter((prev) => { const next = new Set(prev); if (next.has(status)) next.delete(status); else next.add(status); return next; }); }, []); const matchesFilter = React.useCallback( (status: TaskStatus) => statusFilter.size === 0 || statusFilter.has(status), [statusFilter], ); // Roving focus target: focused → selected → first visible. const rovingId = focusedId ?? selected ?? layoutData.nodes[0]?.id ?? null; const selectedTask = selected ? byId.get(selected) ?? null : null; const showList = compact || layout === "list"; const presentStatuses = React.useMemo(() => { const set = new Set(); for (const t of tasks) set.add(t.status); return (Object.keys(STATUS_META) as TaskStatus[]).filter((s) => set.has(s)); }, [tasks]); /* -------------------------------------------------------------------- */ return (

{/* header: filter chips */} {presentStatuses.length > 1 ? (

Filter {presentStatuses.map((s) => { const on = statusFilter.has(s); const v = statusVars(STATUS_META[s].tone); return ( ); })} {statusFilter.size > 0 ? ( ) : null}

) : null} {/* app-supplied cycle error */} {cycleError ? (

Dependency cycle. {cycleError.message} {cycleError.taskIds && cycleError.taskIds.length > 0 ? ( {" "} ({cycleError.taskIds.map((id) => byId.get(id)?.title ?? id).join(" → ")}) ) : null}

) : null}

{/* primary view */}

{showList ? ( selectTask(id)} registerRow={(id, el) => { if (el) rowRefs.current.set(id, el); else rowRefs.current.delete(id); }} /> ) : ( selectTask(id, { focus: false })} onNodeFocus={(id) => setFocusedId(id)} onToggleGroup={toggleGroup} collapsed={collapsed} groupName={groupName} registerNode={(id, el) => { if (el) nodeRefs.current.set(id, el); else nodeRefs.current.delete(id); }} /> )}

{/* detail panel — the mobile mode reuses the same content inline in the list */} {!showList ? (

{selectedTask ? ( selectTask(id, { focus: true })} onAddDependency={onAddDependency} onRemoveDependency={onRemoveDependency} onMove={onMoveTask ? moveTaskToGroup : undefined} moving={move.optimistic} /> ) : (

Select a task to inspect what blocks it and what it unblocks.

)}

) : null}

{/* polite live region */} {announcement}

); } /* -------------------------------------------------------------------------- */ /* Map view */ /* -------------------------------------------------------------------------- */ interface MapViewProps { layoutData: Layout; byId: Map; selected: string | null; rovingId: string | null; pathSet: Set; matchesFilter: (status: TaskStatus) => boolean; reduced: boolean; renderTask?: (task: Task, ctx: TaskRenderContext) => React.ReactNode; renderCtx: (id: string) => TaskRenderContext; onNodeKeyDown: (e: React.KeyboardEvent, id: string) => void; onNodeClick: (id: string) => void; onNodeFocus: (id: string) => void; onToggleGroup: (id: string) => void; collapsed: Set; groupName: (id: string) => string; registerNode: (id: string, el: HTMLButtonElement | null) => void; } function MapView({ layoutData, byId, selected, rovingId, pathSet, matchesFilter, reduced, renderTask, renderCtx, onNodeKeyDown, onNodeClick, onNodeFocus, onToggleGroup, collapsed, registerNode, }: MapViewProps) { const { nodes, nodeById, lanes, width, height } = layoutData; // Edges: from prerequisite → dependent. Skip any touching a collapsed node. const edges = React.useMemo(() => { const list: { key: string; d: string; incoming: boolean; outgoing: boolean; onPath: boolean; unresolved: boolean; }[] = []; const selPrereq = selected ? new Set(byId.get(selected)?.dependencyIds ?? []) : null; for (const t of byId.values()) { const toNode = nodeById.get(t.id); if (!toNode) continue; for (const depId of t.dependencyIds) { const fromNode = nodeById.get(depId); if (!fromNode) continue; const incoming = selected === t.id && selPrereq?.has(depId) === true; const outgoing = selected === depId; const onPath = pathSet.has(depId) && pathSet.has(t.id); const src = byId.get(depId); const unresolved = !!src && src.status !== "completed" && src.status !== "cancelled"; list.push({ key: `${depId}->${t.id}`, d: edgePath(fromNode, toNode), incoming, outgoing, onPath, unresolved }); } } // Emphasised edges last (drawn on top). return list.sort((a, b) => Number(a.incoming || a.outgoing || a.onPath) - Number(b.incoming || b.outgoing || b.onPath)); }, [byId, nodeById, selected, pathSet]); return (

{/* lane bands + headers */} {lanes.map((lane) => (

))} {/* dependency lines — static SVG, decorative (relationships are textual) */} {/* task nodes — real focusable buttons over the SVG */} {nodes.map((n) => { const task = byId.get(n.id); if (!task) return null; const ctx = renderCtx(n.id); const dimmed = !matchesFilter(task.status); return ( ); })} {nodes.length === 0 ? (

All groups collapsed.

) : null}

); } interface TaskNodeProps { task: Task; node: LaidOutNode; ctx: TaskRenderContext; selected: boolean; roving: boolean; onPath: boolean; dimmed: boolean; reduced: boolean; renderTask?: (task: Task, ctx: TaskRenderContext) => React.ReactNode; onKeyDown: (e: React.KeyboardEvent, id: string) => void; onClick: (id: string) => void; onFocus: (id: string) => void; registerNode: (id: string, el: HTMLButtonElement | null) => void; } const TaskNode = React.memo(function TaskNode({ task, node, ctx, selected, roving, onPath, dimmed, reduced, renderTask, onKeyDown, onClick, onFocus, registerNode, }: TaskNodeProps) { const meta = STATUS_META[task.status]; const v = statusVars(meta.tone); const relationSummary = `${ctx.blockedBy.length ? `blocked by ${ctx.blockedBy.length}` : "not blocked"}, unblocks ${ctx.dependents.length}`; return ( registerNode(task.id, el)} data-task-node={task.id} tabIndex={roving ? 0 : -1} aria-pressed={selected} aria-label={`${task.title}. ${meta.label}. ${relationSummary}.${task.blockedReason ? ` ${task.blockedReason}.` : ""}${ctx.isBottleneck ? " Bottleneck." : ""}`} onKeyDown={(e) => onKeyDown(e, task.id)} onClick={() => onClick(task.id)} onFocus={() => onFocus(task.id)} initial={false} animate={reduced ? undefined : { scale: selected ? 1.015 : 1 }} transition={{ type: "spring", stiffness: 520, damping: 40 }} className={cn( "absolute flex flex-col justify-center gap-1 rounded-xl bg-[var(--color-surface)] px-3 py-2 text-left outline-none [border:1px_solid_var(--color-border)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]", selected && "ring-2 ring-[var(--color-accent)]", onPath && !selected && "[box-shadow:0_0_0_2px_color-mix(in_oklab,var(--color-accent)_45%,transparent)]", )} style={{ left: node.x, top: node.y, width: COL_W, height: NODE_H, opacity: dimmed ? 0.42 : 1, borderColor: selected ? "var(--color-accent)" : undefined, }} > {renderTask ? ( renderTask(task, ctx) ) : ( <> {task.title} {task.milestone ? ( ) : null} {ctx.blockedBy.length > 0 ? ( Blocked · {ctx.blockedBy.length} ) : ctx.dependents.length > 0 ? ( Unblocks {ctx.dependents.length} ) : ( No dependents )} {ctx.isBottleneck ? ( Bottleneck ) : null} {task.priority === "urgent" || task.priority === "high" ? ( {task.priority} ) : null} )} ); }); /* -------------------------------------------------------------------------- */ /* List view (compact fallback + mobile dependency-detail mode) */ /* -------------------------------------------------------------------------- */ interface ListViewProps { tasks: Task[]; laneOrder: { id: string; name: string }[]; groupOf: (id: string) => string; selected: string | null; matchesFilter: (status: TaskStatus) => boolean; renderCtx: (id: string) => TaskRenderContext; onSelect: (id: string) => void; registerRow: (id: string, el: HTMLButtonElement | null) => void; } function ListView({ tasks, laneOrder, groupOf, selected, matchesFilter, renderCtx, onSelect, registerRow }: ListViewProps) { const byLane = new Map(); for (const t of tasks) { if (!matchesFilter(t.status)) continue; const g = groupOf(t.id); const arr = byLane.get(g) ?? []; arr.push(t); byLane.set(g, arr); } const anyVisible = [...byLane.values()].some((arr) => arr.length > 0); return (

{!anyVisible ? (

No tasks match the current filter.

) : null} {laneOrder.map((lane) => { const laneTasks = byLane.get(lane.id); if (!laneTasks || laneTasks.length === 0) return null; return (

{lane.name}

))}

); })}

); } function ListRow({ task, ctx, selected, onSelect, registerRow, }: { task: Task; ctx: TaskRenderContext; selected: boolean; onSelect: (id: string) => void; registerRow: (id: string, el: HTMLButtonElement | null) => void; }) { return (

); } /* -------------------------------------------------------------------------- */ /* Detail panel — what blocks this / what it unblocks / edit */ /* -------------------------------------------------------------------------- */ interface TaskDetailProps { task: Task; ctx: TaskRenderContext; allTasks: Task[]; laneOrder: { id: string; name: string }[]; groupOf: (id: string) => string; groupName: (id: string) => string; reduced: boolean; renderDetails?: (task: Task, ctx: TaskRenderContext) => React.ReactNode; onNavigate: (id: string) => void; onAddDependency?: (taskId: string, dependencyId: string) => void; onRemoveDependency?: (taskId: string, dependencyId: string) => void; onMove?: (taskId: string, toGroup: string) => void; moving: boolean; } function TaskDetail({ task, ctx, allTasks, laneOrder, groupOf, groupName, reduced, renderDetails, onNavigate, onAddDependency, onRemoveDependency, onMove, moving, }: TaskDetailProps) { const [addOpen, setAddOpen] = React.useState(false); const [moveOpen, setMoveOpen] = React.useState(false); // Eligible new prerequisites: not itself, not already a prerequisite. Cycle // safety is the app's job (it may reject and surface a cycle error). const existing = new Set(task.dependencyIds); const eligible = allTasks.filter((t) => t.id !== task.id && !existing.has(t.id)); const otherGroups = laneOrder.filter((l) => l.id !== groupOf(task.id)); return ( {/* header */}

{task.title}

{task.milestone ? ( Milestone ) : null}

{groupName(groupOf(task.id))} {ctx.isBottleneck ? ( Bottleneck ) : null}

{task.blockedReason && ctx.blockedBy.length ? (

{task.blockedReason}

) : null} {task.dueDate != null || task.assignee || task.progress != null ? (

{task.assignee ? {task.assignee} : null} {task.dueDate != null ? Due {formatDate(task.dueDate)} : null} {task.progress != null ? {Math.round(task.progress * 100)}% done : null}

) : null}

{renderDetails ? ( renderDetails(task, ctx) ) : ( <> {/* what blocks this */} t.status !== "completed" && t.status !== "cancelled"} onNavigate={onNavigate} onRemove={onRemoveDependency ? (depId) => onRemoveDependency(task.id, depId) : undefined} /> {/* what this unblocks */} )} {/* edit controls */}

{onAddDependency && eligible.length > 0 ? ( ({ id: t.id, label: t.title, sublabel: STATUS_META[t.status].label }))} onPick={(depId) => onAddDependency(task.id, depId)} /> ) : null} {onMove && otherGroups.length > 0 ? ( ({ id: g.id, label: g.name }))} onPick={(groupId) => onMove(task.id, groupId)} /> ) : null}

); } function RelationList({ title, emptyLabel, tasks, highlight, onNavigate, onRemove, }: { title: string; emptyLabel: string; tasks: Task[]; highlight?: (t: Task) => boolean; onNavigate: (id: string) => void; onRemove?: (id: string) => void; }) { return (

{title} ({tasks.length})

{tasks.length === 0 ? (

{emptyLabel}

) : (

{onRemove ? ( ) : null}

)}

); } function MenuControl({ open, setOpen, triggerLabel, menuLabel, items, onPick, }: { open: boolean; setOpen: (o: boolean) => void; triggerLabel: string; menuLabel: string; items: { id: string; label: string; sublabel?: string }[]; onPick: (id: string) => void; }) { const btnRef = React.useRef(null); // The menu opens upward, left-aligned; portal it to with position:fixed // so an ancestor's overflow-hidden (preview cards, scroll containers) can't clip it. const anchor = useAnchoredPortal(open, { side: "top", align: "start", gap: 4 }); // Merge the local focus-restore ref with the anchor's trigger ref. const setTriggerRef = React.useCallback( (node: HTMLButtonElement | null) => { btnRef.current = node; (anchor.triggerRef as React.MutableRefObject).current = node; }, [anchor.triggerRef], ); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") { setOpen(false); btnRef.current?.focus(); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [open, setOpen]); return (

{anchor.renderInPortal( open && anchor.anchored ? ( ) : null, )}

); } export default TaskDependencyMap; 6e:["$","$L84",null,{"files":[{"path":"registry/productivity/task-dependency-map.tsx","content":"$85","type":"registry:component","target":"components/motiq/task-dependency-map.tsx"}],"className":"h-[70svh] min-h-80"}]