From 4dc5482aa89ccafe6a6e99ccbe9a9e995a7dfcbb Mon Sep 17 00:00:00 2001
From: bntvllnt <bntvllnt@users.noreply.github.com>
Date: Tue, 12 May 2026 23:00:05 +0200
Subject: [PATCH] fix(react-doctor): clear correctness warnings

---
 apps/registry/app/components/[slug]/page.tsx  | 33 ++++++------
 apps/registry/app/docs/page.tsx               | 17 +++---
 apps/registry/app/layout.tsx                  | 16 +++---
 .../component-preview/component-preview.tsx   | 14 +++--
 apps/registry/components/landing/landing.tsx  |  9 ++--
 apps/registry/lib/jsonld.ts                   | 18 ++++++-
 .../registry/default/checklist/checklist.tsx  | 53 ++++++++++++++++---
 .../ui/src/components/checklist/checklist.tsx | 53 ++++++++++++++++---
 packages/ui/src/components/checklist/index.ts |  3 ++
 .../date-picker/date-picker.test.tsx          | 11 ++--
 .../date-picker/date-picker.visual.tsx        |  4 +-
 .../interactive-timeline.test.tsx             | 33 +++++++-----
 .../interactive-timeline.visual.tsx           |  7 ++-
 .../progress-tracker.test.tsx                 |  9 ++--
 .../progress-tracker/progress-tracker.tsx     | 11 ++--
 15 files changed, 199 insertions(+), 92 deletions(-)

diff --git a/apps/registry/app/components/[slug]/page.tsx b/apps/registry/app/components/[slug]/page.tsx
index 827ecfa4..6b3436b3 100644
--- a/apps/registry/app/components/[slug]/page.tsx
+++ b/apps/registry/app/components/[slug]/page.tsx
@@ -12,7 +12,7 @@ import { StorybookEmbed } from "@/components/storybook-embed";
 import componentMetadata from "@/lib/component-metadata.json";
 import {
   breadcrumbLd,
-  jsonLdScript,
+  jsonLdScriptAttributes,
   softwareSourceCodeLd,
 } from "@/lib/jsonld";
 import { generateOGMetadata, generateTwitterMetadata } from "@/lib/og";
@@ -172,24 +172,21 @@ export default async function ComponentPage(props: Props) {
   return (
     <>
       <script
-        dangerouslySetInnerHTML={{
-          __html: jsonLdScript([
-            softwareSourceCodeLd({
-              description: displayDescription,
-              name: component.name,
-              title: displayTitle,
-            }),
-            breadcrumbLd([
-              { name: "Home", url: SITE_URL },
-              { name: "Components", url: `${SITE_URL}/components` },
-              {
-                name: displayTitle,
-                url: `${SITE_URL}/components/${component.name}`,
-              },
-            ]),
+        {...jsonLdScriptAttributes([
+          softwareSourceCodeLd({
+            description: displayDescription,
+            name: component.name,
+            title: displayTitle,
+          }),
+          breadcrumbLd([
+            { name: "Home", url: SITE_URL },
+            { name: "Components", url: `${SITE_URL}/components` },
+            {
+              name: displayTitle,
+              url: `${SITE_URL}/components/${component.name}`,
+            },
           ]),
-        }}
-        type="application/ld+json"
+        ])}
       />
       <Sidebar sections={getSidebarSections(getCategoryForComponent(slug))} />
       <main className="flex-1 overflow-y-auto bg-background overflow-x-hidden">
diff --git a/apps/registry/app/docs/page.tsx b/apps/registry/app/docs/page.tsx
index af33081d..544b5a10 100644
--- a/apps/registry/app/docs/page.tsx
+++ b/apps/registry/app/docs/page.tsx
@@ -2,7 +2,7 @@ import { Breadcrumb, MDXContent, Sidebar } from "@vllnt/ui";
 import type { Metadata } from "next";
 
 import { getPageContent } from "@/lib/content";
-import { breadcrumbLd, jsonLdScript } from "@/lib/jsonld";
+import { breadcrumbLd, jsonLdScriptAttributes } from "@/lib/jsonld";
 import { generateOGMetadata, generateTwitterMetadata } from "@/lib/og";
 import { canonical } from "@/lib/seo";
 import { getSidebarSections } from "@/lib/sidebar-sections";
@@ -36,15 +36,12 @@ export default async function DocumentationPage() {
   return (
     <>
       <script
-        dangerouslySetInnerHTML={{
-          __html: jsonLdScript(
-            breadcrumbLd([
-              { name: "Home", url: SITE_URL },
-              { name: "Docs", url: `${SITE_URL}/docs` },
-            ]),
-          ),
-        }}
-        type="application/ld+json"
+        {...jsonLdScriptAttributes(
+          breadcrumbLd([
+            { name: "Home", url: SITE_URL },
+            { name: "Docs", url: `${SITE_URL}/docs` },
+          ]),
+        )}
       />
       <Sidebar sections={getSidebarSections()} />
       <main className="flex-1 overflow-y-auto bg-background">
diff --git a/apps/registry/app/layout.tsx b/apps/registry/app/layout.tsx
index 0153efe7..c8755530 100644
--- a/apps/registry/app/layout.tsx
+++ b/apps/registry/app/layout.tsx
@@ -8,7 +8,11 @@ import type { Metadata } from "next";
 import type React from "react";
 
 import { Header } from "@/components/header";
-import { jsonLdScript, organizationLd, websiteLd } from "@/lib/jsonld";
+import {
+  jsonLdScriptAttributes,
+  organizationLd,
+  websiteLd,
+} from "@/lib/jsonld";
 
 import "./globals.css";
 
@@ -82,14 +86,8 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <script
-          dangerouslySetInnerHTML={{ __html: jsonLdScript(organizationLd()) }}
-          type="application/ld+json"
-        />
-        <script
-          dangerouslySetInnerHTML={{ __html: jsonLdScript(websiteLd()) }}
-          type="application/ld+json"
-        />
+        <script {...jsonLdScriptAttributes(organizationLd())} />
+        <script {...jsonLdScriptAttributes(websiteLd())} />
       </head>
       <body className="h-full overflow-hidden">
         <ThemeProvider
diff --git a/apps/registry/components/component-preview/component-preview.tsx b/apps/registry/components/component-preview/component-preview.tsx
index d3bf3011..5852d80d 100644
--- a/apps/registry/components/component-preview/component-preview.tsx
+++ b/apps/registry/components/component-preview/component-preview.tsx
@@ -237,6 +237,12 @@ type ComponentPreviewProps = {
   componentName: string;
 };
 
+const DATE_PICKER_PREVIEW_DATE = new Date("2026-04-19T00:00:00.000Z");
+const HORIZONTAL_SCROLL_ROW_CARDS = Array.from({ length: 6 }, (_, index) => ({
+  id: `featured-card-${index + 1}`,
+  label: `Card ${index + 1}`,
+}));
+
 // Simple text-based preview for components that need complex context
 function SimplePreview({ description }: { description: string }) {
   return (
@@ -314,7 +320,7 @@ function ComboboxPreview() {
 function DatePickerPreview() {
   return (
     <div className="w-full max-w-sm">
-      <DatePicker value={new Date("2026-04-19T00:00:00.000Z")} />
+      <DatePicker value={DATE_PICKER_PREVIEW_DATE} />
     </div>
   );
 }
@@ -1413,12 +1419,12 @@ function AlertDialogPreview() {
 function HorizontalScrollRowPreview() {
   return (
     <HorizontalScrollRow description="Browse our picks" title="Featured">
-      {Array.from({ length: 6 }, (_, index) => (
+      {HORIZONTAL_SCROLL_ROW_CARDS.map((card) => (
         <div
           className="min-w-[180px] snap-start rounded-lg border bg-card p-4 text-sm"
-          key={index}
+          key={card.id}
         >
-          Card {index + 1}
+          {card.label}
         </div>
       ))}
     </HorizontalScrollRow>
diff --git a/apps/registry/components/landing/landing.tsx b/apps/registry/components/landing/landing.tsx
index 14aa6d5c..94590be2 100644
--- a/apps/registry/components/landing/landing.tsx
+++ b/apps/registry/components/landing/landing.tsx
@@ -109,18 +109,15 @@ function Stats({
   generatedAt?: string;
   version: string;
 }) {
+  const generatedDate = generatedAt?.slice(0, 10) ?? "—";
+
   return (
     <section className="border-b border-border bg-muted/30">
       <div className="mx-auto grid max-w-7xl grid-cols-2 gap-6 px-4 py-12 lg:grid-cols-4 lg:px-8">
         <Stat label="Components" value={String(componentCount)} />
         <Stat label="Categories" value={String(categoryCount)} />
         <Stat label="Library version" value={`v${version}`} />
-        <Stat
-          label="Last build"
-          value={
-            generatedAt ? new Date(generatedAt).toISOString().slice(0, 10) : "—"
-          }
-        />
+        <Stat label="Last build" value={generatedDate} />
       </div>
     </section>
   );
diff --git a/apps/registry/lib/jsonld.ts b/apps/registry/lib/jsonld.ts
index 2459df26..e912e7a5 100644
--- a/apps/registry/lib/jsonld.ts
+++ b/apps/registry/lib/jsonld.ts
@@ -10,6 +10,13 @@ type JsonLdValue =
 
 type JsonLdNode = { readonly [key: string]: JsonLdValue };
 
+export type JsonLdScriptAttributes = {
+  readonly dangerouslySetInnerHTML: {
+    readonly __html: string;
+  };
+  readonly type: "application/ld+json";
+};
+
 export function organizationLd(): JsonLdNode {
   return {
     "@context": "https://schema.org",
@@ -86,5 +93,14 @@ export function breadcrumbLd(trail: ReadonlyArray<{
 }
 
 export function jsonLdScript(node: JsonLdNode | readonly JsonLdNode[]): string {
-  return JSON.stringify(node);
+  return JSON.stringify(node).replace(/</g, "\\u003c");
+}
+
+export function jsonLdScriptAttributes(
+  node: JsonLdNode | readonly JsonLdNode[],
+): JsonLdScriptAttributes {
+  return {
+    dangerouslySetInnerHTML: { __html: jsonLdScript(node) },
+    type: "application/ld+json",
+  };
 }
diff --git a/apps/registry/registry/default/checklist/checklist.tsx b/apps/registry/registry/default/checklist/checklist.tsx
index d3e871ba..15b7db54 100644
--- a/apps/registry/registry/default/checklist/checklist.tsx
+++ b/apps/registry/registry/default/checklist/checklist.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { cn } from "@vllnt/ui";
 
 export const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
+export const CHECKLIST_STORAGE_VERSION = 1;
 
 export type ChecklistItem = {
   description?: string;
@@ -12,6 +13,50 @@ export type ChecklistItem = {
   label: string;
 };
 
+type ChecklistStoragePayload = {
+  checked: string[];
+  version: typeof CHECKLIST_STORAGE_VERSION;
+};
+
+function stringItemsFromUnknown(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : [];
+}
+
+export function parseChecklistStorageValue(saved: string): string[] {
+  try {
+    const parsed: unknown = JSON.parse(saved);
+
+    if (Array.isArray(parsed)) {
+      return stringItemsFromUnknown(parsed);
+    }
+
+    if (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "version" in parsed &&
+      "checked" in parsed &&
+      parsed.version === CHECKLIST_STORAGE_VERSION
+    ) {
+      return stringItemsFromUnknown(parsed.checked);
+    }
+  } catch {
+    return [];
+  }
+
+  return [];
+}
+
+export function createChecklistStorageValue(ids: Iterable<string>): string {
+  const payload: ChecklistStoragePayload = {
+    checked: [...ids],
+    version: CHECKLIST_STORAGE_VERSION,
+  };
+
+  return JSON.stringify(payload);
+}
+
 type ChecklistItemRowProps = {
   isChecked: boolean;
   item: ChecklistItem;
@@ -140,11 +185,7 @@ export function Checklist({
     if (typeof window !== "undefined" && persistKey) {
       const saved = localStorage.getItem(`checklist:${persistKey}`);
       if (saved) {
-        try {
-          return new Set(JSON.parse(saved) as string[]);
-        } catch {
-          /* skip */
-        }
+        return new Set(parseChecklistStorageValue(saved));
       }
     }
     return new Set();
@@ -159,7 +200,7 @@ export function Checklist({
       try {
         localStorage.setItem(
           `checklist:${persistKey}`,
-          JSON.stringify([...newChecked]),
+          createChecklistStorageValue(newChecked),
         );
         window.dispatchEvent(
           new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
diff --git a/packages/ui/src/components/checklist/checklist.tsx b/packages/ui/src/components/checklist/checklist.tsx
index f7a22217..6c3d7e36 100644
--- a/packages/ui/src/components/checklist/checklist.tsx
+++ b/packages/ui/src/components/checklist/checklist.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import { cn } from "../../lib/utils";
 
 export const CHECKLIST_PROGRESS_EVENT = "vllnt:checklist-progress-change";
+export const CHECKLIST_STORAGE_VERSION = 1;
 
 export type ChecklistItem = {
   description?: string;
@@ -12,6 +13,50 @@ export type ChecklistItem = {
   label: string;
 };
 
+type ChecklistStoragePayload = {
+  checked: string[];
+  version: typeof CHECKLIST_STORAGE_VERSION;
+};
+
+function stringItemsFromUnknown(value: unknown): string[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : [];
+}
+
+export function parseChecklistStorageValue(saved: string): string[] {
+  try {
+    const parsed: unknown = JSON.parse(saved);
+
+    if (Array.isArray(parsed)) {
+      return stringItemsFromUnknown(parsed);
+    }
+
+    if (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "version" in parsed &&
+      "checked" in parsed &&
+      parsed.version === CHECKLIST_STORAGE_VERSION
+    ) {
+      return stringItemsFromUnknown(parsed.checked);
+    }
+  } catch {
+    return [];
+  }
+
+  return [];
+}
+
+export function createChecklistStorageValue(ids: Iterable<string>): string {
+  const payload: ChecklistStoragePayload = {
+    checked: [...ids],
+    version: CHECKLIST_STORAGE_VERSION,
+  };
+
+  return JSON.stringify(payload);
+}
+
 type ChecklistItemRowProps = {
   isChecked: boolean;
   item: ChecklistItem;
@@ -140,11 +185,7 @@ export function Checklist({
     if (typeof window !== "undefined" && persistKey) {
       const saved = localStorage.getItem(`checklist:${persistKey}`);
       if (saved) {
-        try {
-          return new Set(JSON.parse(saved) as string[]);
-        } catch {
-          /* skip */
-        }
+        return new Set(parseChecklistStorageValue(saved));
       }
     }
     return new Set();
@@ -159,7 +200,7 @@ export function Checklist({
       try {
         localStorage.setItem(
           `checklist:${persistKey}`,
-          JSON.stringify([...newChecked]),
+          createChecklistStorageValue(newChecked),
         );
         window.dispatchEvent(
           new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
diff --git a/packages/ui/src/components/checklist/index.ts b/packages/ui/src/components/checklist/index.ts
index 05e6bd11..9e76f0eb 100644
--- a/packages/ui/src/components/checklist/index.ts
+++ b/packages/ui/src/components/checklist/index.ts
@@ -1,6 +1,9 @@
 export {
   Checklist,
   CHECKLIST_PROGRESS_EVENT,
+  CHECKLIST_STORAGE_VERSION,
   type ChecklistItem,
   type ChecklistProps,
+  createChecklistStorageValue,
+  parseChecklistStorageValue,
 } from "./checklist";
diff --git a/packages/ui/src/components/date-picker/date-picker.test.tsx b/packages/ui/src/components/date-picker/date-picker.test.tsx
index b8d10500..4a875e02 100644
--- a/packages/ui/src/components/date-picker/date-picker.test.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.test.tsx
@@ -3,6 +3,8 @@ import { describe, expect, it, vi } from "vitest";
 
 import { DatePicker } from "./date-picker";
 
+const SELECTED_DATE = new Date("2026-04-19T00:00:00.000Z");
+
 describe("DatePicker", () => {
   it("renders placeholder by default", () => {
     render(<DatePicker placeholder="Select a due date" />);
@@ -11,7 +13,7 @@ describe("DatePicker", () => {
   });
 
   it("renders the selected date", () => {
-    render(<DatePicker value={new Date("2026-04-19T00:00:00.000Z")} />);
+    render(<DatePicker value={SELECTED_DATE} />);
 
     expect(screen.getByRole("button")).toHaveTextContent("April 19, 2026");
   });
@@ -19,12 +21,7 @@ describe("DatePicker", () => {
   it("forwards calendar selection changes", () => {
     const onValueChange = vi.fn();
 
-    render(
-      <DatePicker
-        onValueChange={onValueChange}
-        value={new Date("2026-04-19T00:00:00.000Z")}
-      />,
-    );
+    render(<DatePicker onValueChange={onValueChange} value={SELECTED_DATE} />);
 
     expect(onValueChange).not.toHaveBeenCalled();
   });
diff --git a/packages/ui/src/components/date-picker/date-picker.visual.tsx b/packages/ui/src/components/date-picker/date-picker.visual.tsx
index a3227386..0b4f55c1 100644
--- a/packages/ui/src/components/date-picker/date-picker.visual.tsx
+++ b/packages/ui/src/components/date-picker/date-picker.visual.tsx
@@ -2,11 +2,13 @@ import { expect, test } from "@playwright/experimental-ct-react";
 
 import { DatePicker } from "./date-picker";
 
+const SELECTED_DATE = new Date("2026-04-19T00:00:00.000Z");
+
 test.describe("DatePicker Visual", () => {
   test("default", async ({ mount, page }) => {
     await mount(
       <div className="w-80 p-6">
-        <DatePicker value={new Date("2026-04-19T00:00:00.000Z")} />
+        <DatePicker value={SELECTED_DATE} />
       </div>,
     );
 
diff --git a/packages/ui/src/components/interactive-timeline/interactive-timeline.test.tsx b/packages/ui/src/components/interactive-timeline/interactive-timeline.test.tsx
index 0ba3bc4a..e6af28bc 100644
--- a/packages/ui/src/components/interactive-timeline/interactive-timeline.test.tsx
+++ b/packages/ui/src/components/interactive-timeline/interactive-timeline.test.tsx
@@ -40,14 +40,19 @@ const CATEGORIES = [
   { color: "red" as const, id: "incident", label: "Incident" },
 ];
 
+const TIMELINE_START = new Date("2024-01-01");
+const TIMELINE_END = new Date("2025-01-01");
+const OUTSIDE_WINDOW_START = new Date("2010-01-01");
+const OUTSIDE_WINDOW_END = new Date("2010-12-31");
+
 describe("InteractiveTimeline", () => {
   describe("rendering", () => {
     it("renders track labels and event markers", () => {
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
           tracks={TRACKS}
         />,
       );
@@ -65,9 +70,9 @@ describe("InteractiveTimeline", () => {
     it("falls back to a single default track when none provided", () => {
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
         />,
       );
 
@@ -82,10 +87,10 @@ describe("InteractiveTimeline", () => {
       const onEventClick = vi.fn();
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
           onEventClick={onEventClick}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
           tracks={TRACKS}
         />,
       );
@@ -103,9 +108,9 @@ describe("InteractiveTimeline", () => {
     it("marks the clicked event as selected via data-selected", () => {
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
           tracks={TRACKS}
         />,
       );
@@ -125,9 +130,9 @@ describe("InteractiveTimeline", () => {
       const { container } = render(
         <InteractiveTimeline
           categories={CATEGORIES}
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
           tracks={TRACKS}
         >
           <InteractiveTimelineToolbar>
@@ -155,9 +160,9 @@ describe("InteractiveTimeline", () => {
     it("doubles inner width on zoom-in and halves on zoom-out", () => {
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2025-01-01")}
+          endDate={TIMELINE_END}
           events={EVENTS}
-          startDate={new Date("2024-01-01")}
+          startDate={TIMELINE_START}
           tracks={TRACKS}
         >
           <InteractiveTimelineToolbar>
@@ -204,9 +209,9 @@ describe("InteractiveTimeline", () => {
     it("hides the today marker when outside the window", () => {
       const { container } = render(
         <InteractiveTimeline
-          endDate={new Date("2010-12-31")}
+          endDate={OUTSIDE_WINDOW_END}
           events={[]}
-          startDate={new Date("2010-01-01")}
+          startDate={OUTSIDE_WINDOW_START}
           tracks={TRACKS}
         />,
       );
diff --git a/packages/ui/src/components/interactive-timeline/interactive-timeline.visual.tsx b/packages/ui/src/components/interactive-timeline/interactive-timeline.visual.tsx
index 8c97c790..74114b4d 100644
--- a/packages/ui/src/components/interactive-timeline/interactive-timeline.visual.tsx
+++ b/packages/ui/src/components/interactive-timeline/interactive-timeline.visual.tsx
@@ -54,14 +54,17 @@ const EVENTS = [
   },
 ];
 
+const TIMELINE_START = new Date("2024-01-01");
+const TIMELINE_END = new Date("2025-01-01");
+
 test.describe("InteractiveTimeline Visual", () => {
   test("default", async ({ mount }) => {
     const component = await mount(
       <InteractiveTimeline
         categories={CATEGORIES}
-        endDate={new Date("2025-01-01")}
+        endDate={TIMELINE_END}
         events={EVENTS}
-        startDate={new Date("2024-01-01")}
+        startDate={TIMELINE_START}
         tracks={TRACKS}
       >
         <InteractiveTimelineToolbar>
diff --git a/packages/ui/src/components/progress-tracker/progress-tracker.test.tsx b/packages/ui/src/components/progress-tracker/progress-tracker.test.tsx
index ca76a2ea..77e9d40b 100644
--- a/packages/ui/src/components/progress-tracker/progress-tracker.test.tsx
+++ b/packages/ui/src/components/progress-tracker/progress-tracker.test.tsx
@@ -1,7 +1,10 @@
 import { act, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 
-import { CHECKLIST_PROGRESS_EVENT } from "../checklist";
+import {
+  CHECKLIST_PROGRESS_EVENT,
+  createChecklistStorageValue,
+} from "../checklist";
 
 import {
   ProgressTracker,
@@ -89,7 +92,7 @@ describe("ProgressTracker", () => {
   it("uses Checklist persistence when checklist items and a persist key are provided", () => {
     localStorage.setItem(
       "checklist:react-fundamentals",
-      JSON.stringify(["intro", "components", "hooks"]),
+      createChecklistStorageValue(["intro", "components", "hooks"]),
     );
 
     render(
@@ -209,7 +212,7 @@ describe("ProgressTracker", () => {
     act(() => {
       localStorage.setItem(
         "checklist:react-fundamentals",
-        JSON.stringify(["intro", "components", "hooks"]),
+        createChecklistStorageValue(["intro", "components", "hooks"]),
       );
       window.dispatchEvent(
         new CustomEvent(CHECKLIST_PROGRESS_EVENT, {
diff --git a/packages/ui/src/components/progress-tracker/progress-tracker.tsx b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
index f7079a0c..0a0a4b28 100644
--- a/packages/ui/src/components/progress-tracker/progress-tracker.tsx
+++ b/packages/ui/src/components/progress-tracker/progress-tracker.tsx
@@ -13,7 +13,11 @@ import {
   CardHeader,
   CardTitle,
 } from "../card";
-import { CHECKLIST_PROGRESS_EVENT, type ChecklistItem } from "../checklist";
+import {
+  CHECKLIST_PROGRESS_EVENT,
+  type ChecklistItem,
+  parseChecklistStorageValue,
+} from "../checklist";
 import { ProgressBar } from "../progress-bar";
 
 export type ProgressTrackerModuleStatus =
@@ -93,10 +97,7 @@ function readPersistedChecklistItems(persistKey?: string): string[] {
   try {
     const saved = localStorage.getItem(`checklist:${persistKey}`);
     if (!saved) return [];
-    const parsed = JSON.parse(saved) as unknown;
-    return Array.isArray(parsed)
-      ? parsed.filter((item): item is string => typeof item === "string")
-      : [];
+    return parseChecklistStorageValue(saved);
   } catch {
     return [];
   }