/* * Stepkit 0.4.1 * Copyright (c) 2026 Vladislav Stepanov * * Original Stepkit portions in this release are licensed under the MIT License. Adapted portions identify their upstream licence and attribution in the copied source and in the entry-specific upstream notice files. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * */ "use client"; import { useEffect, useId, useMemo, useRef, useState, type FormEvent } from "react"; import { Badge } from "../../components/Badge"; import { Button } from "../../components/Button"; import { EmptyState } from "../../components/EmptyState"; import { Input } from "../../components/Input"; import { Sidebar } from "../../components/Sidebar"; import { Switch } from "../../components/Switch"; import { Toast } from "../../components/Toast"; import "./vellum-workspace.css"; type SignalKind = "risk" | "decision" | "win"; type SignalStatus = "open" | "watching" | "closed"; type SortKey = "title" | "owner" | "kind" | "status" | "day"; type ViewId = "overview" | "signals" | "brief" | "settings"; interface Signal { id: string; title: string; owner: string; kind: SignalKind; status: SignalStatus; day: string; note: string; } interface DayPoint { id: string; label: string; count: number; } const OWNERS = ["Maya Chen", "Jonah Adeyemi", "Priya Shah", "Sam Okada"]; const DAY_ORDER = ["Mon", "Tue", "Wed", "Thu", "Fri"]; const INITIAL_SIGNALS: Signal[] = [ { id: "sig-01", title: "Checkout retry storm after the card-network blip", owner: "Maya Chen", kind: "risk", status: "open", day: "Mon", note: "Retries peaked at 14:10. Still above the quiet band." }, { id: "sig-02", title: "Maya owns the Monday sheet through April", owner: "Maya Chen", kind: "decision", status: "closed", day: "Mon", note: "Written down so the brief does not reopen the debate." }, { id: "sig-03", title: "Freeze pricing copy until the studio review", owner: "Jonah Adeyemi", kind: "decision", status: "watching", day: "Tue", note: "Review is Thursday. Do not ship the interim headline." }, { id: "sig-04", title: "Activation mail recovered without a vendor ticket", owner: "Priya Shah", kind: "win", status: "closed", day: "Tue", note: "Local template change. Keep the vendor thread closed." }, { id: "sig-05", title: "EU data map still missing the digest store", owner: "Maya Chen", kind: "risk", status: "open", day: "Wed", note: "Blocks the Floor plan story. Not a legal review yet." }, { id: "sig-06", title: "Cut the unused weekly digest, keep the sheet", owner: "Jonah Adeyemi", kind: "decision", status: "open", day: "Thu", note: "Digest had no readers this month. Sheet did." }, { id: "sig-07", title: "Design ran Monday from the sheet, not Slack", owner: "Priya Shah", kind: "win", status: "watching", day: "Fri", note: "Worth keeping in the brief so it does not look accidental." }, { id: "sig-08", title: "Vendor token rotation is still on a calendar reminder", owner: "Sam Okada", kind: "risk", status: "watching", day: "Fri", note: "Move this into the board before the next rotation." } ]; const NAV_ITEMS = [ { id: "overview", label: "Overview" }, { id: "signals", label: "Signals" }, { id: "brief", label: "Monday brief" }, { id: "settings", label: "Settings" } ]; function kindTone(kind: SignalKind) { if (kind === "risk") return "danger" as const; if (kind === "win") return "success" as const; return "accent" as const; } function statusTone(status: SignalStatus) { if (status === "open") return "warning" as const; if (status === "closed") return "success" as const; return "neutral" as const; } function nextId(signals: Signal[]) { return `sig-${String(signals.length + 1).padStart(2, "0")}-${Math.floor(Math.random() * 90 + 10)}`; } function dialogTabbables(node: HTMLElement) { return [...node.querySelectorAll("a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type='hidden']), select:not([disabled])")].filter((element) => element.tabIndex >= 0 && !element.hasAttribute("disabled") && element.getClientRects().length > 0); } function bindDialogTabTrap(node: HTMLDialogElement | null) { if (!node) return () => {}; const onKey = (event: KeyboardEvent) => { if (event.key !== "Tab" || !node.open) return; const items = dialogTabbables(node); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; const active = document.activeElement; const inside = Boolean(active && node.contains(active)); if (event.shiftKey && (!inside || active === first)) { event.preventDefault(); last.focus(); return; } if (!event.shiftKey && (!inside || active === last || active === document.body)) { event.preventDefault(); first.focus(); } }; document.addEventListener("keydown", onKey, true); const frame = requestAnimationFrame(() => dialogTabbables(node)[0]?.focus()); return () => { cancelAnimationFrame(frame); document.removeEventListener("keydown", onKey, true); }; } export function VellumWorkspace() { const searchId = useId(); const weekId = useId(); const addTitleId = useId(); const drawerTitleId = useId(); const [view, setView] = useState("overview"); const [menuOpen, setMenuOpen] = useState(false); const [narrow, setNarrow] = useState(false); const [signals, setSignals] = useState(INITIAL_SIGNALS); const [query, setQuery] = useState(""); const [statusFilter, setStatusFilter] = useState<"all" | SignalStatus>("all"); const [sortKey, setSortKey] = useState("day"); const [sortDir, setSortDir] = useState<"asc" | "desc">("asc"); const [selectedId, setSelectedId] = useState(null); const [addOpen, setAddOpen] = useState(false); const [toast, setToast] = useState(""); const [draftNote, setDraftNote] = useState(""); const [draftStatus, setDraftStatus] = useState("open"); const [addError, setAddError] = useState(""); const [weekLabel, setWeekLabel] = useState("Week of 16 March"); const [compactRows, setCompactRows] = useState(false); const menuButtonRef = useRef(null); const addButtonRef = useRef(null); const addDialogRef = useRef(null); const drawerRef = useRef(null); const openerRef = useRef(null); const pendingSelectId = useRef(null); const selected = signals.find((signal) => signal.id === selectedId) ?? null; const railInert = narrow && !menuOpen; const series = useMemo(() => DAY_ORDER.map((label) => ({ id: label.toLowerCase(), label, count: signals.filter((signal) => signal.day === label).length })), [signals]); const filtered = useMemo(() => { const needle = query.trim().toLowerCase(); const rows = signals.filter((signal) => { const haystack = `${signal.title} ${signal.owner} ${signal.note} ${signal.kind}`.toLowerCase(); const matchesQuery = !needle || haystack.includes(needle); const matchesStatus = statusFilter === "all" || signal.status === statusFilter; return matchesQuery && matchesStatus; }); const direction = sortDir === "asc" ? 1 : -1; return [...rows].sort((a, b) => { if (sortKey === "day") return (DAY_ORDER.indexOf(a.day) - DAY_ORDER.indexOf(b.day)) * direction || a.title.localeCompare(b.title); return String(a[sortKey]).localeCompare(String(b[sortKey])) * direction; }); }, [query, signals, sortDir, sortKey, statusFilter]); useEffect(() => { const media = window.matchMedia("(max-width: 900px)"); const sync = () => setNarrow(media.matches); sync(); media.addEventListener("change", sync); return () => media.removeEventListener("change", sync); }, []); useEffect(() => { if (!selected) return; setDraftNote(selected.note); setDraftStatus(selected.status); }, [selected]); useEffect(() => { const node = addDialogRef.current; if (!node) return; if (addOpen && !node.open) node.showModal(); if (!addOpen && node.open) node.close(); if (!addOpen) return; return bindDialogTabTrap(node); }, [addOpen]); useEffect(() => { const node = drawerRef.current; if (!node) return; if (selectedId && !node.open) node.showModal(); if (!selectedId && node.open) node.close(); if (!selectedId) return; return bindDialogTabTrap(node); }, [selectedId]); useEffect(() => { if (!menuOpen) return; const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { setMenuOpen(false); menuButtonRef.current?.focus(); } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, [menuOpen]); const closeDrawer = () => { setSelectedId(null); const opener = openerRef.current; queueMicrotask(() => opener?.focus()); }; const openRow = (id: string, trigger?: HTMLElement | null) => { openerRef.current = trigger ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null); setSelectedId(id); }; const toggleSort = (key: SortKey) => { if (sortKey === key) setSortDir((value) => (value === "asc" ? "desc" : "asc")); else { setSortKey(key); setSortDir("asc"); } }; const saveSelected = () => { if (!selected) return; setSignals((current) => current.map((signal) => signal.id === selected.id ? { ...signal, note: draftNote, status: draftStatus } : signal)); setToast("Saved on this sheet."); }; const deleteSelected = () => { if (!selected) return; const removedId = selected.id; setSignals((current) => current.filter((signal) => signal.id !== removedId)); openerRef.current = addButtonRef.current; setSelectedId(null); setToast("Removed from this sheet."); queueMicrotask(() => addButtonRef.current?.focus()); }; const addSignal = (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); const title = String(data.get("title") || "").trim(); const owner = String(data.get("owner") || "").trim(); const kind = String(data.get("kind") || "risk") as SignalKind; const day = String(data.get("day") || "Mon"); if (!title || !owner) { setAddError("Title and owner are required."); return; } const created: Signal = { id: nextId(signals), title, owner, kind, status: "open", day, note: "Logged in this session." }; setSignals((current) => [...current, created]); pendingSelectId.current = created.id; openerRef.current = addButtonRef.current; setAddOpen(false); setAddError(""); setView("signals"); setToast("Signal added to this sheet."); event.currentTarget.reset(); }; const openCounts = signals.filter((signal) => signal.status === "open").length; const riskCounts = signals.filter((signal) => signal.kind === "risk" && signal.status !== "closed").length; const watchingCounts = signals.filter((signal) => signal.status === "watching").length; const toastNode = toast ? ( { if (!open) setToast(""); }} /> ) : null; const table = ( ); return (

{menuOpen ?

{weekLabel}

Monday sheet

))}

{filtered.length ? table : ( { setQuery(""); setStatusFilter("all"); }} /> )} ) : null} {view === "brief" ? (

Monday brief

{weekLabel} · written from the current sheet.

{openCounts} open item{openCounts === 1 ? "" : "s"}, including {riskCounts} live risk{riskCounts === 1 ? "" : "s"} and {watchingCounts} still being watched.

{signal.title} · {signal.owner}

) : null} {view === "settings" ? (

Sheet preferences

setWeekLabel(event.target.value)} />

) : null}

Monday sheet

The week at a glance

Signals

Monday brief

Sheet preferences

{selected.title}