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:Tbbf1,"use client"; import * as React from "react"; import { motion, AnimatePresence, type Transition } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, getStatusMeta, statusVars, formatTimestamp, useDisclosure, streamItemVariants, type StatusTone, } from "@/lib/motiq"; /* -------------------------------------------------------------------------- * ApprovalWorkflow — presentation + control for an app-owned approval/sign-off * process. The APPLICATION owns authorization: this component never decides * whether an action is permitted — it renders the state it is given and asks * the host (via `canAct`) whether each action is allowed, surfacing the host's * disabled reason in the UI. Supports sequential (all-must-approve) and * parallel (any-one / quorum) stages, minimum approvals, required vs optional * approvers, a current-user action state, a decision history, and destructive * reject confirmation. Clean-room original. * ----------------------------------------------------------------------- */ export type ApprovalStatus = | "draft" | "pending" | "in_review" | "approved" | "rejected" | "changes_requested" | "cancelled" | "expired"; export type ApprovalAction = | "approve" | "reject" | "request_changes" | "add_comment" | "cancel" | "resubmit"; /** How a stage aggregates its reviewers' decisions. */ export type StageMode = "all" | "any" | "quorum"; /** A reviewer's current decision on their stage. */ export type ReviewerDecision = | "pending" | "approved" | "rejected" | "changes_requested"; export interface Person { /** Stable identity — drives keys, current-user matching, and avatar hue. */ id: string; name: string; /** Optional role/title, e.g. "Security lead". */ role?: string; /** Optional avatar image; when absent an initials + hue avatar is generated. */ avatarUrl?: string; /** Optional explicit avatar color (any CSS color). */ color?: string; } export interface Reviewer extends Person { /** Optional approvers do not count toward `requiredApprovals`. */ optional?: boolean; /** The reviewer's current decision on this stage. Defaults to "pending". */ decision?: ReviewerDecision; /** When the decision was recorded. */ decidedAt?: Date | number | string; /** A short note attached to the decision. */ note?: string; } export interface WorkflowStage { /** Stable id — drives keys and the `currentStageId` pointer. */ id: string; name: string; description?: string; /** Stage-level status (same vocabulary as the workflow status). */ status: ApprovalStatus; reviewers: Reviewer[]; /** * How the stage aggregates decisions. "all" = every required reviewer must * approve (sequential AND); "any" = one approval clears it (parallel OR); * "quorum" = `requiredApprovals` of the reviewers. Defaults to "all". */ mode?: StageMode; /** Minimum approvals to clear the stage. Defaults per `mode`. */ requiredApprovals?: number; completedAt?: Date | number | string; } export interface Decision { id: string; action: ApprovalAction; actorId: string; actorName: string; stageId?: string; stageName?: string; comment?: string; timestamp: Date | number | string; } export interface Attachment { id: string; name: string; /** Human-readable size, e.g. "2.4 MB". */ meta?: string; href?: string; } export type RiskLevel = "low" | "medium" | "high" | "critical"; export interface ApprovalWorkflowData { id: string; title: string; description?: string; requester: Person; status: ApprovalStatus; stages: WorkflowStage[]; /** Which stage is awaiting action. Defaults to the first non-terminal stage. */ currentStageId?: string; risk?: RiskLevel; priority?: "low" | "normal" | "high" | "urgent"; deadline?: Date | number | string; createdAt?: Date | number | string; attachments?: Attachment[]; history?: Decision[]; } /** Payload passed to `canAct` and to every action callback. */ export interface ActionContext { action: ApprovalAction; stage?: WorkflowStage; /** The note typed into the composer at the time of the action, if any. */ comment?: string; workflow: ApprovalWorkflowData; } /** `canAct` may return a bare boolean or an object carrying a disabled reason. */ export type ActPermission = boolean | { allowed: boolean; reason?: string }; export interface ApprovalWorkflowProps { /** Controlled workflow data. The app owns and updates this. */ workflow: ApprovalWorkflowData; /** The viewer, used to surface the current-user action state. */ currentUserId?: string; /** * App-provided authorization gate. Returns whether the current user may take * `action` and, optionally, a reason shown when disabled. The component never * decides permissions itself — absent this, actions default to allowed. */ canAct?: (action: ApprovalAction, context: ActionContext) => ActPermission; onApprove?: (context: ActionContext) => void; onReject?: (context: ActionContext) => void; onRequestChanges?: (context: ActionContext) => void; onComment?: (context: ActionContext) => void; onCancel?: (context: ActionContext) => void; onResubmit?: (context: ActionContext) => void; /** Collapse resolved stages to a slim line (expandable). Default true. */ compactCompleted?: boolean; /** Require an inline confirmation before a reject fires. Default false. */ confirmReject?: boolean; /** Enables relative timestamps ("2h ago"); pass a stable value to avoid drift. */ now?: number; renderAttachment?: (attachment: Attachment) => React.ReactNode; renderReviewer?: (reviewer: Reviewer) => React.ReactNode; /** Accessible label for the workflow region. */ label?: string; className?: string; } /* -- status + tone metadata --------------------------------------------- */ const STATUS_OVERRIDES: Record = { draft: { label: "Draft", tone: "neutral" }, pending: { label: "Pending", tone: "warning" }, in_review: { label: "In review", tone: "active" }, approved: { label: "Approved", tone: "success" }, rejected: { label: "Rejected", tone: "error" }, changes_requested: { label: "Changes requested", tone: "warning" }, cancelled: { label: "Cancelled", tone: "neutral" }, expired: { label: "Expired", tone: "error" }, }; const DECISION_META: Record = { pending: { label: "Awaiting", tone: "neutral" }, approved: { label: "Approved", tone: "success" }, rejected: { label: "Rejected", tone: "error" }, changes_requested: { label: "Changes", tone: "warning" }, }; const RISK_META: Record = { low: { label: "Low risk", tone: "success" }, medium: { label: "Medium risk", tone: "warning" }, high: { label: "High risk", tone: "warning" }, critical: { label: "Critical risk", tone: "error" }, }; const EASE: Transition["ease"] = [0.2, 0, 0, 1]; const P = (d: string) => ( ); /** Icon per semantic tone — so status is never conveyed by color alone. */ function ToneIcon({ tone, size = 13 }: { tone: StatusTone; size?: number }) { const paths: Record = { success: P("M4 12.5 9 17.5 20 6.5"), error: P("M6 6l12 12M18 6 6 18"), warning: P("M12 8v5M12 17h.01M10.3 4.3 2.8 18a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z"), info: P("M12 8h.01M11 12h1v5h1M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"), active: P("M12 3a9 9 0 1 0 9 9M12 7v5l3 2"), neutral: P("M5 12h14"), }; return ( ); } /* -- helpers ------------------------------------------------------------- */ function toMs(value: Date | number | string): number { const d = value instanceof Date ? value : new Date(value); return d.getTime(); } function hueFromString(s: string): number { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0; return h % 360; } function initials(name: string): string { const parts = name.trim().split(/\s+/).filter(Boolean); if (parts.length === 0) return "?"; const first = parts[0][0] ?? ""; const second = parts.length > 1 ? parts[parts.length - 1][0] ?? "" : ""; return (first + second).toUpperCase(); } const TERMINAL: ReadonlySet = new Set([ "approved", "rejected", "cancelled", "expired", ]); function isResolved(status: ApprovalStatus): boolean { return status === "approved" || status === "rejected" || status === "cancelled"; } interface StageProgress { given: number; needed: number; modeLabel: string; } function stageProgress(stage: WorkflowStage): StageProgress { const mode: StageMode = stage.mode ?? "all"; const required = stage.reviewers.filter((r) => !r.optional); const given = stage.reviewers.filter((r) => r.decision === "approved").length; let needed: number; let modeLabel: string; if (mode === "any") { needed = stage.requiredApprovals ?? 1; modeLabel = "Any one reviewer"; } else if (mode === "quorum") { needed = stage.requiredApprovals ?? Math.max(1, Math.ceil(required.length / 2)); modeLabel = `${needed} of ${stage.reviewers.length} must approve`; } else { needed = stage.requiredApprovals ?? required.length; modeLabel = "All reviewers must approve"; } return { given: Math.min(given, needed), needed: Math.max(1, needed), modeLabel }; } function resolveCurrentStageId(workflow: ApprovalWorkflowData): string | undefined { if (workflow.currentStageId) return workflow.currentStageId; const active = workflow.stages.find((s) => !isResolved(s.status)); return active?.id ?? workflow.stages[workflow.stages.length - 1]?.id; } /* -- avatar -------------------------------------------------------------- */ function Avatar({ person, size = 30 }: { person: Person; size?: number }) { const h = hueFromString(person.color ?? person.id + person.name); const bg = person.color ?? `linear-gradient(140deg, hsl(${h} 62% 52%), hsl(${(h + 42) % 360} 66% 42%))`; if (person.avatarUrl) { return ( {person.name}

); } return ( {initials(person.name)} ); } /* -- pills --------------------------------------------------------------- */ function StatusPill({ tone, label, size = "md", }: { tone: StatusTone; label: string; size?: "sm" | "md"; }) { const v = statusVars(tone); return ( {label} ); } /* -- component ----------------------------------------------------------- */ export function ApprovalWorkflow({ workflow, currentUserId, canAct, onApprove, onReject, onRequestChanges, onComment, onCancel, onResubmit, compactCompleted = true, confirmReject = false, now, renderAttachment, renderReviewer, label, className, }: ApprovalWorkflowProps) { const reduce = useReducedMotion(); const composer = useDisclosure({ idPrefix: "mk-approval-note" }); const history = useDisclosure({ idPrefix: "mk-approval-history" }); const [comment, setComment] = React.useState(""); const [confirmingReject, setConfirmingReject] = React.useState(false); const [announce, setAnnounce] = React.useState(""); const [expandedStages, setExpandedStages] = React.useState>(() => new Set()); const statusRef = React.useRef(null); const rejectBtnRef = React.useRef(null); const confirmRejectRef = React.useRef(null); const commentRef = React.useRef(null); const currentStageId = resolveCurrentStageId(workflow); const currentStage = workflow.stages.find((s) => s.id === currentStageId); const currentIndex = workflow.stages.findIndex((s) => s.id === currentStageId); const meta = getStatusMeta(workflow.status, STATUS_OVERRIDES); const actionable = !TERMINAL.has(workflow.status); const canResubmit = workflow.status === "rejected" || workflow.status === "changes_requested" || workflow.status === "expired"; const clearedCount = workflow.stages.filter((s) => s.status === "approved").length; // The viewer's own decision on the current stage (surfaced as a note). const viewerReviewer = currentStage?.reviewers.find((r) => r.id === currentUserId); const fmt = React.useCallback( (value: Date | number | string) => now != null ? formatTimestamp(value, { relative: true, now }) : formatTimestamp(value, { format: (d) => new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false, }).format(d), }), [now], ); const permission = React.useCallback( (action: ApprovalAction): { allowed: boolean; reason?: string } => { if (!canAct) return { allowed: true }; const raw = canAct(action, { action, stage: currentStage, workflow }); if (typeof raw === "boolean") return { allowed: raw }; return raw; }, [canAct, currentStage, workflow], ); const toStatus = React.useCallback((message: string) => { setAnnounce(message); // Move focus to the status region so keyboard/SR users land on the outcome. requestAnimationFrame(() => statusRef.current?.focus()); }, []); const runAction = React.useCallback( (action: ApprovalAction, handler?: (ctx: ActionContext) => void, message?: string) => { const note = comment.trim(); handler?.({ action, stage: currentStage, comment: note || undefined, workflow }); if (note) setComment(""); if (composer.open) composer.setOpen(false); if (message) toStatus(message); }, [comment, currentStage, workflow, composer, toStatus], ); const handleApprove = () => { if (!permission("approve").allowed) return; runAction("approve", onApprove, `You approved the ${currentStage?.name ?? "current"} stage.`); }; const handleRequestChanges = () => { if (!permission("request_changes").allowed) return; runAction("request_changes", onRequestChanges, `Changes requested on the ${currentStage?.name ?? "current"} stage.`); }; const handleRejectClick = () => { if (!permission("reject").allowed) return; if (confirmReject && !confirmingReject) { setConfirmingReject(true); requestAnimationFrame(() => confirmRejectRef.current?.focus()); return; } setConfirmingReject(false); runAction("reject", onReject, `You rejected the ${currentStage?.name ?? "current"} stage.`); }; const cancelRejectConfirm = () => { setConfirmingReject(false); requestAnimationFrame(() => rejectBtnRef.current?.focus()); }; const handleComment = () => { const note = comment.trim(); if (!note) { commentRef.current?.focus(); return; } onComment?.({ action: "add_comment", stage: currentStage, comment: note, workflow }); setComment(""); composer.setOpen(false); toStatus("Comment added."); }; const handleCancel = () => { if (!permission("cancel").allowed) return; runAction("cancel", onCancel, "Request cancelled."); }; const handleResubmit = () => { if (!permission("resubmit").allowed) return; runAction("resubmit", onResubmit, "Request resubmitted for review."); }; const openComposer = () => { if (!permission("add_comment").allowed) return; composer.setOpen(true); requestAnimationFrame(() => commentRef.current?.focus()); }; const toggleStage = (id: string) => setExpandedStages((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; }); const regionLabel = label ?? `Approval workflow: ${workflow.title}`; return (

{/* header */}

{/* Title + status. Below `@[400px]/workflow` the status pill drops to its own line so the title keeps the full measure instead of being squeezed to 2-3 words. */}

{workflow.title}

{/* Plain inline flow, not a flex row: the requester and the time can never each become a one-word column, and the "·" only exists on the width where both facts share a line — below `@[400px]/workflow` the time simply takes its own line with no orphaned separator. */}

Requested by {workflow.requester.name} {workflow.createdAt != null ? ( <> {" · "} {fmt(workflow.createdAt)} ) : null}

{workflow.description ? (

{workflow.description}

) : null} {/* risk / priority / deadline chips */} {workflow.risk || workflow.priority || workflow.deadline != null ? (

{workflow.risk ? ( ) : null} {workflow.priority && workflow.priority !== "normal" ? ( {workflow.priority} priority ) : null} {workflow.deadline != null ? ( Due {fmt(workflow.deadline)} ) : null}

) : null} {/* overall progress */}

Stage {Math.min(currentIndex + 1, workflow.stages.length)} of {workflow.stages.length}

{clearedCount}/{workflow.stages.length} approved

{/* stages */}

toggleStage(stage.id)} reduce={reduce} fmt={fmt} renderReviewer={renderReviewer} /> ); })}

{/* current-stage action bar */} {actionable && currentStage ? (

{viewerReviewer && viewerReviewer.decision && viewerReviewer.decision !== "pending" ? (

You already {DECISION_META[viewerReviewer.decision].label.toLowerCase()} this stage.

) : (

Awaiting your decision on {currentStage.name}.

)} {/* comment composer (useDisclosure) */} {composer.open ? ( Add a note

setComment(e.target.value)}
                  rows={2}
                  placeholder="Optional context for your decision…"
                  className="mb-2.5 w-full resize-y rounded-lg border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2 text-[13px] text-[var(--color-fg)] outline-none placeholder:text-[var(--color-muted)] focus-visible:border-[var(--color-accent)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]"
                />
              </motion.div>
            ) : null}
          </AnimatePresence>

{/* reject confirmation */}
          {confirmingReject ? (
            <div
              role="alertdialog"
              aria-label="Confirm rejection"
              className="mb-2.5 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2.5 text-[13px]"
              style={{ background: statusVars("error").bg, border: `1px solid ${statusVars("error").border}` }}
            >
              <span className="flex items-center gap-1.5 font-medium" style={{ color: statusVars("error").color }}>
                <ToneIcon tone="error" /> Reject {currentStage.name}? This returns the request to the requester.
              </span>
              <span className="flex w-full gap-2 @[400px]/workflow:ml-auto @[400px]/workflow:w-auto">
                <button
                  type="button"
                  ref={confirmRejectRef}
                  onClick={handleRejectClick}
                  className="inline-flex min-h-[44px] flex-1 items-center justify-center rounded-md px-2.5 py-1 text-[12.5px] font-semibold text-[var(--color-error-foreground,white)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] @[400px]/workflow:min-h-0 @[400px]/workflow:flex-none"
                  style={{ background: statusVars("error").color }}
                >
                  Confirm reject
                </button>
                <button
                  type="button"
                  onClick={cancelRejectConfirm}
                  className="inline-flex min-h-[44px] flex-1 items-center justify-center rounded-md px-2.5 py-1 text-[12.5px] font-medium text-[var(--color-fg)] outline-none [border:1px_solid_var(--color-border)] hover:border-[var(--color-accent)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] @[400px]/workflow:min-h-0 @[400px]/workflow:flex-none"
                >
                  Keep reviewing
                </button>
              </span>
            </div>
          ) : null}

{/* Action buttons. Below `@[400px]/workflow` they tile into an even two-up grid with
              44px targets instead of squeezing three ragged buttons across a
              narrow card; from `@[400px]/workflow` up the original inline row is restored. */}
          <div
            className="grid grid-cols-2 gap-2 @[400px]/workflow:flex @[400px]/workflow:flex-wrap @[400px]/workflow:items-center"
            role="group"
            aria-label="Stage actions"
          >
            <ActionButton tone="success" primary permission={permission("approve")} onClick={handleApprove}>
              <ToneIcon tone="success" /> Approve
            </ActionButton>
            <ActionButton tone="warning" permission={permission("request_changes")} onClick={handleRequestChanges}>
              <ToneIcon tone="warning" /> Request changes
            </ActionButton>
            <ActionButton
              tone="error"
              ref={rejectBtnRef}
              permission={permission("reject")}
              onClick={handleRejectClick}
              aria-expanded={confirmReject ? confirmingReject : undefined}
            >
              <ToneIcon tone="error" /> Reject
            </ActionButton>
            <ActionButton
              tone="neutral"
              permission={permission("add_comment")}
              onClick={openComposer}
              aria-expanded={composer.open}
            >
              {composer.open ? "Notes open" : "Add comment"}
            </ActionButton>
            {onCancel ? (
              <ActionButton tone="neutral" className="@[400px]/workflow:ml-auto" permission={permission("cancel")} onClick={handleCancel}>
                Cancel request
              </ActionButton>
            ) : null}
            {composer.open ? (
              <ActionButton tone="active" permission={{ allowed: true }} onClick={handleComment}>
                Post note
              </ActionButton>
            ) : null}
          </div>
        </div>
      ) : canResubmit && onResubmit ? (
        <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-4 py-3 @[400px]/workflow:px-5">
          <p className="text-[12.5px] text-[var(--color-muted)]">
            This request was {meta.label.toLowerCase()}. Address the feedback and resubmit for review.
          </p>
          <span className="w-full @[400px]/workflow:ml-auto @[400px]/workflow:w-auto">
            <ActionButton tone="active" primary permission={permission("resubmit")} onClick={handleResubmit}>
              Resubmit for review
            </ActionButton>
          </span>
        </div>
      ) : null}

{/* decision history (useDisclosure) */}
      {workflow.history && workflow.history.length > 0 ? (
        <div className="border-t border-[var(--color-border)] px-4 py-1.5 @[400px]/workflow:px-5 @[400px]/workflow:py-2.5">
          <button
            type="button"
            {...history.triggerProps}
            className="flex min-h-[44px] w-full items-center gap-2 rounded-md py-1 text-left text-[12.5px] font-medium text-[var(--color-fg)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] @[400px]/workflow:min-h-0"
          >
            <motion.svg
              aria-hidden
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              className="shrink-0 text-[var(--color-muted)]"
              animate={reduce ? undefined : { rotate: history.open ? 90 : 0 }}
              style={reduce ? { transform: history.open ? "rotate(90deg)" : "none" } : undefined}
              transition={{ duration: 0.2, ease: EASE }}
            >
              {P("m9 6 6 6-6 6")}
            </motion.svg>
            Decision history
            <span className="rounded-full bg-[var(--color-bg-secondary)] px-1.5 py-0.5 text-[11px] tabular-nums text-[var(--color-muted)] [border:1px_solid_var(--color-border)]">
              {workflow.history.length}
            </span>
          </button>
          <AnimatePresence initial={false}>
            {history.open ? (
              <motion.div
                {...history.panelProps}
                key="history"
                initial={reduce ? false : { height: 0, opacity: 0 }}
                animate={reduce ? { opacity: 1 } : { height: "auto", opacity: 1 }}
                exit={reduce ? { opacity: 0 } : { height: 0, opacity: 0 }}
                transition={{ duration: reduce ? 0 : 0.24, ease: EASE }}
                className="overflow-hidden"
              >
                {/* Same rail language as the stage timeline: a node disc sitting
                    on a connector that runs green through approvals. */}
                <ol role="list" className="mt-1.5 flex flex-col pb-1 pl-1">
                  <AnimatePresence initial={false}>
                    {workflow.history.map((d, i, arr) => (
                      <HistoryRow
                        key={d.id}
                        decision={d}
                        isLast={i === arr.length - 1}
                        reduce={reduce}
                        fmt={fmt}
                      />
                    ))}
                  </AnimatePresence>
                </ol>
              </motion.div>
            ) : null}
          </AnimatePresence>
        </div>
      ) : null}

{/* attachments */}
      {workflow.attachments && workflow.attachments.length > 0 ? (
        <div className="flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] px-4 py-3 @[400px]/workflow:px-5">
          <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--color-muted)]">Attachments</span>
          {workflow.attachments.map((a) =>
            renderAttachment ? (
              <React.Fragment key={a.id}>{renderAttachment(a)}</React.Fragment>
            ) : (
              <AttachmentChip key={a.id} attachment={a} />
            ),
          )}
        </div>
      ) : null}

{/* polite status announcement + focus target */}
      <div
        ref={statusRef}
        tabIndex={-1}
        role="status"
        aria-live="polite"
        className="sr-only"
        style={{
          position: "absolute",
          width: 1,
          height: 1,
          overflow: "hidden",
          clip: "rect(0 0 0 0)",
          whiteSpace: "nowrap",
        }}
      >
        {announce}
      </div>
    </section>
  );
}

/* -- action button (gated by app permission) ---------------------------- */

interface ActionButtonProps {
  tone: StatusTone;
  primary?: boolean;
  permission: { allowed: boolean; reason?: string };
  onClick: () => void;
  children: React.ReactNode;
  className?: string;
  "aria-expanded"?: boolean;
}

/* -- stage row ----------------------------------------------------------- */

return (
    <li className="relative flex gap-3">
      {/* rail */}
      <div className="flex flex-col items-center">
        <span
          className="relative z-10 grid h-7 w-7 shrink-0 place-items-center rounded-full text-[12px] font-semibold [border:2px_solid]"
          style={{
            color: statusVars(nodeTone).color,
            background: statusVars(nodeTone).bg,
            borderColor: statusVars(nodeTone).border,
          }}
          aria-hidden
        >
          {resolved ? <ToneIcon tone={stageMeta.tone} size={14} /> : index + 1}
        </span>
        {!isLast ? (
          <span
            className="w-0.5 flex-1"
            style={{
              minHeight: 18,
              background:
                stage.status === "approved"
                  ? "var(--color-success)"
                  : "var(--color-border)",
            }}
            aria-hidden
          />
        ) : null}
      </div>

{/* body */}
      <div className={cn("min-w-0 flex-1", isLast ? "pb-1" : "pb-4")}>
        {collapsed ? (
          <button
            type="button"
            aria-expanded={false}
            aria-controls={panelId}
            onClick={onToggle}
            className="flex min-h-[44px] w-full flex-wrap items-center gap-x-2 gap-y-1 rounded-lg px-2 py-1.5 text-left outline-none hover:bg-[var(--color-bg-secondary)] focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] @[400px]/workflow:min-h-0 @[400px]/workflow:flex-nowrap"
          >
            <span className="text-[13.5px] font-medium text-[var(--color-fg)]">{stage.name}</span>
            <StatusPill tone={stageMeta.tone} label={stageMeta.label} size="sm" />
            <span className="whitespace-nowrap text-[12px] text-[var(--color-muted)]">{progress.given} approvals</span>
            <span className="ml-auto text-[12px] text-[var(--color-accent)]">Show</span>
          </button>
        ) : (
          <motion.div
            id={expanded || resolved ? panelId : undefined}
            layout={!reduce}
            className={cn(
              "rounded-xl p-2 @[400px]/workflow:p-2.5",
              isCurrent && "bg-[color-mix(in_oklab,var(--color-accent)_7%,transparent)] [box-shadow:inset_0_0_0_1px_color-mix(in_oklab,var(--color-accent)_35%,transparent)]",
            )}
          >
            <div className="flex flex-wrap items-center gap-2">
              <span className="text-[13.5px] font-semibold text-[var(--color-fg)]">{stage.name}</span>
              <StatusPill tone={stageMeta.tone} label={stageMeta.label} size="sm" />
              {isCurrent ? (
                <span className="rounded-full bg-[var(--color-accent)] px-1.5 py-0.5 text-[10.5px] font-semibold uppercase tracking-wide text-[var(--color-accent-foreground,white)]">
                  Current
                </span>
              ) : null}
              {resolved && stage.completedAt != null ? (
                <span className="text-[12px] text-[var(--color-muted)]">{fmt(stage.completedAt)}</span>
              ) : null}
              {resolved ? (
                <button
                  type="button"
                  aria-expanded={expanded}
                  aria-controls={panelId}
                  onClick={onToggle}
                  className="ml-auto inline-flex min-h-[32px] items-center rounded-md px-1.5 py-0.5 text-[12px] font-medium text-[var(--color-accent)] outline-none hover:underline focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] @[400px]/workflow:min-h-[24px]"
                >
                  Hide
                </button>
              ) : null}
            </div>

{stage.description ? (
              <p className="mt-1 text-[12.5px] leading-snug text-[var(--color-muted)]">{stage.description}</p>
            ) : null}

{/* Mode + tally are two whole phrases in inline flow; below `@[400px]/workflow` the
                tally takes its own line and the "·" is dropped rather than left
                leading a line on its own. */}
            <p className="mt-1.5 text-[12px] leading-snug text-[var(--color-muted)]">
              <span className="font-medium text-[var(--color-fg)]">{progress.modeLabel}</span>
              <span aria-hidden className="hidden @[400px]/workflow:inline">{" · "}</span>
              <span className="block tabular-nums @[400px]/workflow:inline">
                {progress.given} of {progress.needed} approval{progress.needed === 1 ? "" : "s"}
              </span>
            </p>

{/* reviewers */}
            <ul role="list" className="mt-2 flex flex-col gap-1.5">
              {stage.reviewers.map((r) =>
                renderReviewer ? (
                  <li key={r.id}>{renderReviewer(r)}</li>
                ) : (
                  <ReviewerRow key={r.id} reviewer={r} reduce={reduce} fmt={fmt} />
                ),
              )}
            </ul>
          </motion.div>
        )}
      </div>
    </li>
  );
}

/* -- reviewer row -------------------------------------------------------- */

/* -- history row --------------------------------------------------------- */

const ACTION_LABEL: Record<ApprovalAction, { verb: string; tone: StatusTone }> = {
  approve: { verb: "approved", tone: "success" },
  reject: { verb: "rejected", tone: "error" },
  request_changes: { verb: "requested changes on", tone: "warning" },
  add_comment: { verb: "commented on", tone: "info" },
  cancel: { verb: "cancelled", tone: "neutral" },
  resubmit: { verb: "resubmitted", tone: "active" },
};

{/* body */}
      <div className={cn("min-w-0 flex-1", isLast ? "pb-1" : "pb-3")}>
        <p className="text-[12.5px] leading-snug text-[var(--color-fg)]">
          <span className="font-medium">{decision.actorName}</span>{" "}
          <span className="text-[var(--color-muted)]">{al.verb}</span>
          {decision.stageName ? <span className="text-[var(--color-muted)]"> {decision.stageName}</span> : null}
        </p>
        {decision.comment ? (
          <p className="mt-1 rounded-md border-l-2 border-[var(--color-border)] bg-[var(--color-bg-secondary)] px-2 py-1 text-[11.5px] leading-snug text-[var(--color-muted)]">
            {decision.comment}
          </p>
        ) : null}
        <time
          className="mt-0.5 block text-[11px] text-[var(--color-muted)]"
          dateTime={new Date(toMs(decision.timestamp)).toISOString()}
        >
          {fmt(decision.timestamp)}
        </time>
      </div>
    </motion.li>
  );
}

/* -- attachment chip ----------------------------------------------------- */

export default ApprovalWorkflow;
6e:["$","$L84",null,{"files":[{"path":"registry/collaboration/approval-workflow.tsx","content":"$85","type":"registry:component","target":"components/motiq/approval-workflow.tsx"}],"className":"h-[70svh] min-h-80"}]
</article></body></html>