@taskmark/ui 0.3.0 → 0.3.1

package/components/board/project-status-metrics-strip.tsx

@@ -2,16 +2,12 @@ import {
   CalendarDays,
   CheckSquare,
   Layers,
-  TrendingUp,
   Users,
 } from "lucide-react"
 
 import { MetricStatCard } from "@/components/board/metric-stat-card"
 import { ProjectContributorsPanel } from "@/components/board/project-contributors-panel"
-import {
-  formatSpeedPtsPerWeek,
-  type ProjectStatusMetrics,
-} from "@/lib/taskmark/project-metrics-shared"
+import type { ProjectStatusMetrics } from "@/lib/taskmark/project-metrics-shared"
 
 type ProjectStatusMetricsStripProps = {
   metrics: ProjectStatusMetrics
@@ -20,14 +16,12 @@ type ProjectStatusMetricsStripProps = {
 export function ProjectStatusMetricsStrip({
   metrics,
 }: ProjectStatusMetricsStripProps) {
-  const speedLabel = formatSpeedPtsPerWeek(metrics.currentSpeedPtsPerWeek)
-
   return (
     <section
       className="flex flex-col gap-4"
       aria-label="Project status metrics"
     >
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <MetricStatCard
           title="Total work items"
           value={metrics.totalWorkItems}
@@ -53,29 +47,18 @@ export function ProjectStatusMetricsStrip({
           accentClassName="bg-emerald-400"
           icon={<CalendarDays className="size-4" strokeWidth={2.5} />}
         />
-        <MetricStatCard
-          title="Current speed"
-          value={speedLabel}
-          subtitle={
-            metrics.currentSpeedPtsPerWeek == null
-              ? "No completed tasks yet"
-              : `pts/week · ${metrics.speedWeekCount} active weeks (90d)`
-          }
-          accentClassName="bg-sky-400"
-          icon={<TrendingUp className="size-4" strokeWidth={2.5} />}
-        />
       </div>
 
-      <div className="border-2 border-black bg-white p-4">
+      <div className="border-2 border-black bg-card p-4">
         <div className="mb-3 flex items-center gap-2">
           <div
-            className="flex size-8 items-center justify-center border-2 border-black bg-amber-300 text-black shadow-[3px_3px_0_0_#000]"
+            className="flex size-8 items-center justify-center border-2 border-black bg-amber-300 text-black shadow-[3px_3px_0_0_var(--shadow-color)]"
             aria-hidden
           >
             <Users className="size-4" strokeWidth={2.5} />
           </div>
           <div>
-            <h2 className="text-sm font-medium text-neutral-800">
+            <h2 className="text-sm font-medium text-card-foreground">
               Contributors
             </h2>
             <p className="text-xs text-muted-foreground">

package/components/board/static-board-app.tsx

@@ -1,31 +1,26 @@
 "use client"
 
 import * as React from "react"
-import Link from "next/link"
 import { useSearchParams } from "next/navigation"
 
 import { AppBar } from "@/components/board/app-bar"
-import { EpicList } from "@/components/board/epic-list"
+import { ChangelogPanel } from "@/components/board/changelog-panel"
 import { ListViewSwitcher } from "@/components/board/list-view-switcher"
-import { OverallWorkItemsList } from "@/components/board/overall-work-items-list"
+import { OverallTreeList } from "@/components/board/overall-tree-list"
+import { PointsHeatmap } from "@/components/board/points-heatmap"
 import { ProjectStatusMetricsStrip } from "@/components/board/project-status-metrics-strip"
-import { TaskList } from "@/components/board/task-list"
 import { WorkItemsList } from "@/components/board/work-items-list"
 import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
 import {
   LIST_VIEW_LABELS,
-  boardHref,
   parseListViewMode,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
 import { seedBoardSnapshot } from "@/lib/taskmark/snapshot-client"
-import {
-  storyKey,
-  type BoardSnapshot,
-} from "@/lib/taskmark/snapshot-types"
+import type { BoardSnapshot } from "@/lib/taskmark/snapshot-types"
 
 function headingForView(view: ListViewMode): string {
-  if (view === "overall") return "Epics"
+  if (view === "overall") return "Overall"
   return LIST_VIEW_LABELS[view]
 }
 
@@ -36,15 +31,19 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
   }, [snapshot])
 
   const searchParams = useSearchParams()
-  const activeView = parseListViewMode(searchParams.get("view") ?? undefined)
+  const changelogMarkdown = snapshot.changelogMarkdown?.trim()
+    ? snapshot.changelogMarkdown
+    : null
+  const hasChangelog = changelogMarkdown != null
+  const activeView = parseListViewMode(searchParams.get("view") ?? undefined, {
+    hasChangelog,
+  })
   const selectedEpicId =
     activeView === "overall" ? searchParams.get("epic")?.trim() || null : null
   const selectedStoryId =
     activeView === "overall" && selectedEpicId
       ? searchParams.get("story")?.trim() || null
       : null
-  const selectedItemId = searchParams.get("item")?.trim() || null
-
   const activeProject = snapshot.project
   const list = snapshot.epics
   const epicCount = list.epics.length
@@ -58,27 +57,9 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
     ? list.epics.find((e) => e.id === selectedEpicId) ?? null
     : null
 
-  const epicWorkItems =
-    selectedEpicId != null
-      ? snapshot.workItemsByEpic[selectedEpicId] ?? null
-      : null
-
-  const selectedStory =
-    epicWorkItems && selectedStoryId
-      ? (epicWorkItems.rows.find(
-          (row) => row.kind === "story" && row.id === selectedStoryId
-        ) ?? null)
-      : null
-
-  const itemList =
-    selectedEpicId && selectedStory
-      ? snapshot.itemsByStory[storyKey(selectedEpicId, selectedStory.id)] ??
-        null
-      : null
-
   return (
     <WorkItemSheetProvider>
-      <div className="min-h-svh bg-[linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]">
+      <div className="tm-surface min-h-svh">
         <AppBar
           projects={snapshot.projects}
           activeProjectId={activeProject.id}
@@ -103,23 +84,20 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
                   ? ` · ${workItemsList.rows.length} item${workItemsList.rows.length === 1 ? "" : "s"}`
                   : ""}
                 {activeView === "overall" && selectedEpic
-                  ? ` · selected ${selectedEpic.id}`
+                  ? ` · expanded ${selectedEpic.id}`
                   : activeView === "overall" && selectedEpicId
                     ? ` · epic ${selectedEpicId} not in list`
-                    : activeView === "overall"
-                      ? " · select an epic to view work items"
-                      : ""}
-                {activeView === "overall" && selectedStory
-                  ? ` · story ${selectedStory.id}`
-                  : activeView === "overall" && selectedStoryId
-                    ? ` · story ${selectedStoryId} not in list`
                     : ""}
+                {activeView === "overall" && selectedStoryId
+                  ? ` · story ${selectedStoryId}`
+                  : ""}
               </p>
             </div>
             <ListViewSwitcher
               activeView={activeView}
               selectedEpicId={selectedEpicId}
-              selectedStoryId={selectedStory?.id ?? null}
+              selectedStoryId={selectedStoryId}
+              hasChangelog={hasChangelog}
             />
           </div>
 
@@ -127,63 +105,16 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
 
           {activeView === "overall" ? (
             <>
-              <EpicList
-                lists={[list]}
+              <PointsHeatmap samples={countableCompletions} />
+              <OverallTreeList
+                list={list}
+                workItemsByEpic={snapshot.workItemsByEpic}
+                itemsByStory={snapshot.itemsByStory}
                 selectedEpicId={selectedEpicId}
+                selectedStoryId={selectedStoryId}
                 countableCompletions={countableCompletions}
                 initialHideCompleted={hideCompletedPrefs.epics}
               />
-
-              {epicWorkItems ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Work items for{" "}
-                      {epicWorkItems.epicTitle ?? epicWorkItems.epicId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear selection
-                    </Link>
-                  </div>
-                  <OverallWorkItemsList
-                    list={epicWorkItems}
-                    selectedStoryId={selectedStory?.id ?? null}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.overallWorkItems}
-                  />
-                </div>
-              ) : null}
-
-              {itemList && selectedStory ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Sub Tasks for {itemList.storyTitle ?? itemList.storyId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        epic: itemList.epicId,
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      Clear story
-                    </Link>
-                  </div>
-                  <TaskList
-                    list={itemList}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.tasks}
-                  />
-                </div>
-              ) : null}
             </>
           ) : null}
 
@@ -194,6 +125,10 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
               initialHideCompleted={hideCompletedPrefs.workItems}
             />
           ) : null}
+
+          {activeView === "changelog" && changelogMarkdown ? (
+            <ChangelogPanel markdown={changelogMarkdown} />
+          ) : null}
         </div>
       </div>
     </WorkItemSheetProvider>

package/components/board/status-badge.tsx

@@ -9,6 +9,8 @@ export function statusBadgeClass(status: string): string {
   switch (status) {
     case "done":
       return "border-black bg-[var(--chart-4)] text-black"
+    case "shelved":
+      return "border-black border-dashed bg-[var(--chart-2)]/45 text-foreground"
     case "in_progress":
       return "border-black bg-[var(--chart-1)] text-black"
     case "blocked":
@@ -22,6 +24,12 @@ export function statusBadgeClass(status: string): string {
   }
 }
 
+export function statusRowClass(status: string): string | undefined {
+  return status.trim().toLowerCase() === "shelved"
+    ? "bg-[var(--chart-2)]/10 text-muted-foreground"
+    : undefined
+}
+
 export function typeBadgeClass(type: string): string {
   if (type === "bug") {
     return "border-black bg-destructive/15 text-destructive"

package/components/board/story-list.tsx

@@ -27,6 +27,7 @@ import { ChildProgressBar } from "@/components/board/child-progress-bar"
 import { ListFiltersBar } from "@/components/board/list-filters-bar"
 import { ListPagination } from "@/components/board/list-pagination"
 import { SortableTableHead } from "@/components/board/sortable-table-head"
+import { statusRowClass } from "@/components/board/status-badge"
 import { TimeframeFilter } from "@/components/board/timeframe-filter"
 import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
 import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
@@ -250,6 +251,7 @@ export function StoryList({
                           key={`${project.id}:${story.id}:${story.filePath}`}
                           data-state={selected ? "selected" : undefined}
                           className={cn(
+                            statusRowClass(story.status),
                             selected && "bg-muted/60",
                             "hover:bg-muted/40"
                           )}

package/components/board/task-list.tsx

@@ -18,7 +18,10 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { TypeBadge } from "@/components/board/status-badge"
+import {
+  statusRowClass,
+  TypeBadge,
+} from "@/components/board/status-badge"
 import {
   IdCreatedTooltip,
   StatusWithSolvedTooltip,
@@ -244,6 +247,7 @@ export function TaskList({
                     {pageRows.map((item) => (
                       <TableRow
                         key={`${project.id}:${item.id}:${item.filePath}`}
+                        className={statusRowClass(item.status)}
                       >
                         <TableCell className="w-10 pr-0">
                           <ViewWorkItemButton

package/components/board/work-item-detail-body.tsx

@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react"
 
-import { formatActualDuration, formatDurationMinutes } from "@/lib/format-duration"
+import { formatActualDuration } from "@/lib/format-duration"
 import { formatTaskmarkDate } from "@/lib/format-date"
 import type {
   ChecklistItem,
@@ -10,12 +10,19 @@ import type {
   EpicDetail,
   ItemDetail,
   PromptFeedbackRow,
+  RowWorkItemRef,
   StoryDetail,
   WorkItemDetail,
   WorkItemMeta,
   WorkLogRow,
 } from "@/lib/taskmark/detail-types"
-import { StatusBadge, TypeBadge, PriorityBadge } from "@/components/board/status-badge"
+import {
+  StatusBadge,
+  TypeBadge,
+  PriorityBadge,
+  typeBadgeClass,
+} from "@/components/board/status-badge"
+import { cn } from "@/lib/utils"
 import { AttributionPeopleList } from "@/components/board/attribution-avatars"
 import { DetailChildrenList } from "@/components/board/detail-children-list"
 import { MarkdownContent } from "@/components/board/markdown-content"
@@ -23,6 +30,12 @@ import { useWorkItemSheet } from "@/components/board/work-item-sheet"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 function RelatedItemButton({ itemId }: { itemId: string }) {
   const { openDetailById } = useWorkItemSheet()
@@ -39,22 +52,101 @@ function RelatedItemButton({ itemId }: { itemId: string }) {
   )
 }
 
+const MAX_VISIBLE_WORK_ITEMS = 2
+
+function workItemKindFromId(id: string): "epic" | "story" | "task" | "bug" {
+  if (id.startsWith("B-")) return "bug"
+  if (id.startsWith("E-")) return "epic"
+  if (id.startsWith("S-")) return "story"
+  return "task"
+}
+
+function WorkItemTag({
+  item,
+  onOpen,
+}: {
+  item: RowWorkItemRef
+  onOpen: (id: string) => void
+}) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Badge
+              variant="outline"
+              title={item.title || item.id}
+              className={cn(
+                "cursor-pointer font-mono text-xs",
+                typeBadgeClass(workItemKindFromId(item.id))
+              )}
+              render={<button type="button" onClick={() => onOpen(item.id)} />}
+            />
+          }
+        >
+          {item.id}
+        </TooltipTrigger>
+        <TooltipContent>{item.title || item.id}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+function WorkItemsCell({ items }: { items?: RowWorkItemRef[] }) {
+  const { openDetailById } = useWorkItemSheet()
+  if (!items || items.length === 0) return "—"
+
+  const visible = items.slice(0, MAX_VISIBLE_WORK_ITEMS)
+  const hidden = items.slice(MAX_VISIBLE_WORK_ITEMS)
+
+  return (
+    <span className="inline-flex flex-nowrap items-center gap-1 align-middle">
+      {visible.map((item) => (
+        <WorkItemTag key={item.id} item={item} onOpen={openDetailById} />
+      ))}
+      {hidden.length > 0 ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Badge
+                  variant="outline"
+                  className="cursor-default font-mono text-xs"
+                  title={hidden.map((item) => item.id).join(", ")}
+                />
+              }
+            >
+              +{hidden.length}
+            </TooltipTrigger>
+            <TooltipContent>
+              <ul className="flex flex-col gap-0.5 text-left">
+                {hidden.map((item) => (
+                  <li key={item.id}>
+                    <span className="font-mono">{item.id}</span>
+                    {item.title ? ` — ${item.title}` : null}
+                  </li>
+                ))}
+              </ul>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : null}
+    </span>
+  )
+}
+
 function MetaGrid({ detail }: { detail: WorkItemMeta }) {
   const rows: { label: string; value: ReactNode }[] = [
     { label: "Status", value: <StatusBadge status={detail.status} /> },
     { label: "Priority", value: <PriorityBadge priority={detail.priority} /> },
     {
       label: "Size",
-      value: detail.type === "epic" ? "—" : detail.size || "—",
+      value: detail.size || "—",
     },
     {
       label: "Points",
       value: detail.points == null ? "—" : String(detail.points),
     },
-    {
-      label: "Est",
-      value: formatDurationMinutes(detail.estimateMinutes),
-    },
     {
       label: "Actual",
       value: formatActualDuration(detail.actualMs, detail.actualMinutes),
@@ -67,7 +159,6 @@ function MetaGrid({ detail }: { detail: WorkItemMeta }) {
       label: "Epic",
       value: detail.epic ? <RelatedItemButton itemId={detail.epic} /> : "—",
     },
-    { label: "Owner", value: detail.owner || "—" },
     { label: "Created", value: formatTaskmarkDate(detail.created) },
     { label: "Updated", value: formatTaskmarkDate(detail.updated) },
     { label: "Started", value: formatTaskmarkDate(detail.startedAt) },
@@ -162,6 +253,7 @@ function CommitsTable({ rows }: { rows: CommitRow[] }) {
   if (rows.length === 0) {
     return <p className="text-sm text-muted-foreground">No commits logged.</p>
   }
+  const showWorkItems = rows.some((row) => (row.workItems?.length ?? 0) > 0)
   return (
     <div className="w-full overflow-x-auto rounded border-2 border-border">
       <table className="w-full text-left text-xs">
@@ -172,6 +264,7 @@ function CommitsTable({ rows }: { rows: CommitRow[] }) {
             <th className="px-2 py-1.5">Date</th>
             <th className="px-2 py-1.5">Author</th>
             <th className="px-2 py-1.5">Message</th>
+            {showWorkItems ? <th className="px-2 py-1.5">Work items</th> : null}
           </tr>
         </thead>
         <tbody>
@@ -184,6 +277,11 @@ function CommitsTable({ rows }: { rows: CommitRow[] }) {
               </td>
               <td className="px-2 py-1.5">{row.author || "—"}</td>
               <td className="px-2 py-1.5">{row.message || "—"}</td>
+              {showWorkItems ? (
+                <td className="px-2 py-1.5 whitespace-nowrap">
+                  <WorkItemsCell items={row.workItems} />
+                </td>
+              ) : null}
             </tr>
           ))}
         </tbody>
@@ -196,6 +294,7 @@ function WorkLogTable({ rows }: { rows: WorkLogRow[] }) {
   if (rows.length === 0) {
     return <p className="text-sm text-muted-foreground">No work sessions logged.</p>
   }
+  const showWorkItems = rows.some((row) => (row.workItems?.length ?? 0) > 0)
   return (
     <div className="w-full overflow-x-auto rounded border-2 border-border">
       <table className="w-full text-left text-xs">
@@ -206,6 +305,7 @@ function WorkLogTable({ rows }: { rows: WorkLogRow[] }) {
             <th className="px-2 py-1.5">Started</th>
             <th className="px-2 py-1.5">Ended</th>
             <th className="px-2 py-1.5">Summary</th>
+            {showWorkItems ? <th className="px-2 py-1.5">Work items</th> : null}
           </tr>
         </thead>
         <tbody>
@@ -220,6 +320,11 @@ function WorkLogTable({ rows }: { rows: WorkLogRow[] }) {
                 {formatTaskmarkDate(row.ended)}
               </td>
               <td className="px-2 py-1.5">{row.summary || "—"}</td>
+              {showWorkItems ? (
+                <td className="px-2 py-1.5 whitespace-nowrap">
+                  <WorkItemsCell items={row.workItems} />
+                </td>
+              ) : null}
             </tr>
           ))}
         </tbody>
@@ -232,6 +337,7 @@ function PromptTable({ rows }: { rows: PromptFeedbackRow[] }) {
   if (rows.length === 0) {
     return <p className="text-sm text-muted-foreground">No prompts logged.</p>
   }
+  const showWorkItems = rows.some((row) => (row.workItems?.length ?? 0) > 0)
   return (
     <div className="w-full overflow-x-auto rounded border-2 border-border">
       <table className="w-full text-left text-xs">
@@ -242,6 +348,7 @@ function PromptTable({ rows }: { rows: PromptFeedbackRow[] }) {
             <th className="px-2 py-1.5">Kind</th>
             <th className="px-2 py-1.5">Author</th>
             <th className="px-2 py-1.5">Summary</th>
+            {showWorkItems ? <th className="px-2 py-1.5">Work items</th> : null}
           </tr>
         </thead>
         <tbody>
@@ -254,6 +361,11 @@ function PromptTable({ rows }: { rows: PromptFeedbackRow[] }) {
               <td className="px-2 py-1.5">{row.kind || "—"}</td>
               <td className="px-2 py-1.5">{row.author || "—"}</td>
               <td className="px-2 py-1.5">{row.summary || "—"}</td>
+              {showWorkItems ? (
+                <td className="px-2 py-1.5 whitespace-nowrap">
+                  <WorkItemsCell items={row.workItems} />
+                </td>
+              ) : null}
             </tr>
           ))}
         </tbody>
@@ -285,6 +397,9 @@ function EpicDetailBody({ detail }: { detail: EpicDetail }) {
           emptyLabel="No stories or epic-direct tasks yet."
         />
       </Section>
+      <Section title="Prompt & feedback">
+        <PromptTable rows={detail.promptFeedback} />
+      </Section>
       <Section title="Commits">
         <CommitsTable rows={detail.commits} />
       </Section>

package/components/board/work-items-list.tsx

@@ -22,6 +22,7 @@ import { ParentTagBadge } from "@/components/board/parent-tag-badge"
 import { ChildProgressBar } from "@/components/board/child-progress-bar"
 import {
   PriorityBadge,
+  statusRowClass,
   TypeBadge,
 } from "@/components/board/status-badge"
 import {
@@ -282,6 +283,7 @@ export function WorkItemsList({
                       return (
                         <TableRow
                           key={`${project.id}:${row.kind}:${row.id}:${row.filePath}`}
+                          className={statusRowClass(row.status)}
                         >
                           <TableCell className="w-10 pr-0">
                             <ViewWorkItemButton

package/components/theme-provider.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+import {
+  parseThemePreference,
+  THEME_STORAGE_KEY,
+  writeThemeCookie,
+} from "@/lib/theme-cookie"
+
+type ThemeProviderProps = React.ComponentProps<typeof NextThemesProvider>
+
+function ThemeCookieSync() {
+  const { theme } = useTheme()
+
+  React.useEffect(() => {
+    const preference = parseThemePreference(theme)
+    if (preference) writeThemeCookie(preference)
+  }, [theme])
+
+  return null
+}
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      storageKey={THEME_STORAGE_KEY}
+      {...props}
+    >
+      <ThemeCookieSync />
+      {children}
+    </NextThemesProvider>
+  )
+}

package/components/theme-toggle.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="icon"
+      aria-label="Switch between light and dark theme"
+      title="Switch between light and dark theme"
+      onClick={() => {
+        const isDark = document.documentElement.classList.contains("dark")
+        setTheme(isDark ? "light" : "dark")
+      }}
+    >
+      <SunIcon className="hidden size-4 dark:block" />
+      <MoonIcon className="size-4 dark:hidden" />
+    </Button>
+  )
+}

package/components/ui/sonner.tsx

@@ -11,11 +11,11 @@ import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={(resolvedTheme === "dark" ? "dark" : "light") as ToasterProps["theme"]}
       className="toaster group"
       icons={{
         success: <CircleCheckIcon className="size-4" />,

package/dist/prod-next/BUILD_ID

@@ -1 +1 @@
-yyRnYAFQrJjF5_b5ZIeqh
+EI1zQaa_kQ7DqUSE4o3Qo