feat: import UI components from @4242labs/design-system package (42L-1913)

tests/test_ds_contract.py

@@ -2,7 +2,6 @@
 from __future__ import annotations
 
 import json
-import os
 import re
 from pathlib import Path
 
@@ -12,7 +11,11 @@
 WEB = ROOT / "web"
 SRC = WEB / "src"
 UI = SRC / "components" / "ui"
-DS_RELEASE = "2.4.8"
+DS_RELEASE = "2.4.10"
+# The compliance checker's own version, deliberately pinned separately from
+# DS_RELEASE in the workflow: it is the binary that runs the gates, not the
+# pin the app renders, and moving it moves no pixel.
+DS_CHECKER_VERSION = "2.4.8"
 
 RAW_CONTROL = re.compile(r"<(button|input|select|textarea)(?:\s|>|/)")
 ARBITRARY_VALUE = re.compile(r"\b[a-z][a-z-]*-\[[^\]]+\]")
@@ -26,29 +29,10 @@
 SHADOW_CLASS = re.compile(r"(?<![\w-])shadow(?:-[\w\[\]-]+)?(?![\w-])")
 FULL_RADIUS = re.compile(r"(?<![\w-])rounded-full(?![\w-])")
 
-# These are upstream component source, not app-owned styling. The local candidate
-# compliance run byte-checks them against @42labs; everything else is scanned.
-ADOPTED_UI = {
-    "alert.tsx",
-    "badge.tsx",
-    "button.tsx",
-    "card.tsx",
-    "collapsible.tsx",
-    "input.tsx",
-    "pagination.tsx",
-    "progress.tsx",
-    "select.tsx",
-    "separator.tsx",
-    "sheet.tsx",
-    "sidebar.tsx",
-    "skeleton.tsx",
-    "table.tsx",
-    "theme-switch.tsx",
-    "toggle-group.tsx",
-    "toggle.tsx",
-    "tooltip.tsx",
-    "top-bar.tsx",
-}
+# Package mode, components too (42L-1913): every adopted primitive imports from
+# @4242labs/design-system now, and there is no local ui/ copy left to exclude
+# from the app-owned drift scan below.
+ADOPTED_UI: set[str] = set()
 
 
 def own_source_files() -> list[Path]:
@@ -101,7 +85,7 @@ def test_app_owned_source_has_no_visual_or_primitive_drift() -> None:
 
 def test_theme_switch_is_only_a_controller_for_the_adopted_component() -> None:
     controller = (SRC / "components" / "ThemeSwitch.tsx").read_text()
-    assert "@/components/ui/theme-switch" in controller
+    assert "@4242labs/design-system/components/theme-switch" in controller
     assert "<CanonicalThemeSwitch" in controller
     assert "ToggleGroup" not in controller
 
@@ -136,7 +120,7 @@ def test_permanent_rail_uses_complete_dark_roles_and_dark_assets() -> None:
     sidebar = (SRC / "components" / "AppSidebar.tsx").read_text()
     assert "buymeacoffee.com" in sidebar
     assert 'className="band-dark"' in sidebar
-    assert "@/components/brand-mark" in sidebar
+    assert "@4242labs/design-system/components/brand-mark" in sidebar
     assert "@/components/Brand" not in sidebar
 
 
@@ -159,7 +143,7 @@ def test_alfred_build_contract_is_exact_and_uses_npm_ci() -> None:
 
 def test_ci_pins_exact_ds_release_and_runs_provenance_and_browser_gates() -> None:
     workflow = (ROOT / ".github" / "workflows" / "ds-compliance.yml").read_text()
-    assert f"@4242labs/design-system@{DS_RELEASE}" in workflow
+    assert f"@4242labs/design-system@{DS_CHECKER_VERSION}" in workflow
     # The pin is read out of package.json, so a bump moves one file and goes green alone.
     assert '--expect "$PIN"' in workflow
     assert "--ui-dir src/components/ui" in workflow
@@ -193,16 +177,3 @@ def test_tokens_come_from_the_package_and_not_from_a_copy() -> None:
     assert '@import "@4242labs/design-system/tailwind.css";' in css
 
 
-def test_local_candidate_adopted_sources_are_byte_identical() -> None:
-    candidate = os.environ.get("DS_CANDIDATE")
-    if not candidate:
-        pytest.skip("set DS_CANDIDATE to byte-check the local design-system candidate")
-    ds_src = Path(candidate) / "src"
-    pairs = [(UI / name, ds_src / "components" / "ui" / name) for name in ADOPTED_UI]
-    pairs.append((SRC / "components" / "brand-mark.tsx", ds_src / "components" / "brand-mark.tsx"))
-    mismatches = [
-        str(local.relative_to(ROOT))
-        for local, canonical in pairs
-        if not canonical.is_file() or local.read_bytes() != canonical.read_bytes()
-    ]
-    assert mismatches == []

web/package.json

@@ -14,7 +14,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@4242labs/design-system": "2.4.8",
+    "@4242labs/design-system": "2.4.10",
     "@fontsource-variable/geist-mono": "5.3.0",
     "@fontsource-variable/ibm-plex-sans": "5.3.0",
     "@fontsource-variable/space-grotesk": "5.3.0",
@@ -23,7 +23,6 @@
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

web/src/App.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { AppSidebar } from '@/components/AppSidebar'
 import { ForecastPage } from '@/components/ForecastPage'
 import { ReportsPage } from '@/components/ReportsPage'
-import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { SidebarInset, SidebarProvider } from '@4242labs/design-system/components/sidebar'
 import type { AppView } from '@/lib/types'
 
 const VIEW_KEY = 'entropy:view'

web/src/components/AppSidebar.tsx

@@ -1,10 +1,10 @@
 import { CalendarClock, ChevronRight, Github } from 'lucide-react'
 
-import { BrandMark } from '@/components/brand-mark'
+import { BrandMark } from '@4242labs/design-system/components/brand-mark'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { Wordmark } from '@/components/Wordmark'
-import { Button } from '@/components/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Button } from '@4242labs/design-system/components/button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@4242labs/design-system/components/collapsible'
 import {
   Sidebar,
   SidebarContent,
@@ -20,7 +20,7 @@ import {
   SidebarMenuSubItem,
   SidebarRail,
   useSidebar,
-} from '@/components/ui/sidebar'
+} from '@4242labs/design-system/components/sidebar'
 import type { AppView } from '@/lib/types'
 
 const VIEWS: { key: AppView; label: string }[] = [

web/src/components/ChartCard.tsx

@@ -1,9 +1,9 @@
 import { useState, type ReactNode } from 'react'
 import { Maximize2 } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@4242labs/design-system/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@4242labs/design-system/components/dialog'
 
 export interface ChartCardProps {
   title: string

web/src/components/DateRangePicker.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@4242labs/design-system/components/button'
+import { Calendar } from '@4242labs/design-system/components/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { formatDate } from '@/lib/format'
 import { anchorToDate, toISO } from '@/lib/range'
 

web/src/components/ErrorState.tsx

@@ -1,6 +1,6 @@
 import { RotateCw } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 
 export function ErrorState({
   message,

web/src/components/FacetedFilter.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Check, ChevronDown } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 import {
   Command,
   CommandEmpty,
@@ -10,8 +10,8 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+} from '@4242labs/design-system/components/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { cn } from '@/lib/utils'
 
 export interface FacetOption {

web/src/components/FilterBar.tsx

@@ -1,6 +1,6 @@
 import { X } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { Button } from '@4242labs/design-system/components/button'
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { EMPTY_FILTERS, hasActiveFilters, type FilterOptions } from '@/lib/filters'
 import type { ActiveFilters, ItemType } from '@/lib/types'

web/src/components/PeriodNav.tsx

@@ -3,9 +3,9 @@ import { AlertTriangle, ChevronLeft, ChevronRight, RefreshCw } from 'lucide-reac
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { FilterBar } from '@/components/FilterBar'
 import { PeriodPicker } from '@/components/PeriodPicker'
-import { Button } from '@/components/ui/button'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { TopBar, TopBarActions, TopBarRailLead } from '@/components/ui/top-bar'
+import { Button } from '@4242labs/design-system/components/button'
+import { SidebarTrigger } from '@4242labs/design-system/components/sidebar'
+import { TopBar, TopBarActions, TopBarRailLead } from '@4242labs/design-system/components/top-bar'
 import type { FilterOptions } from '@/lib/filters'
 import {
   isCumulativeMode,

web/src/components/PeriodPicker.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Button } from '@4242labs/design-system/components/button'
+import { Calendar } from '@4242labs/design-system/components/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@4242labs/design-system/components/popover'
 import { anchorToDate, toISO } from '@/lib/range'
 import type { Granularity } from '@/lib/types'
 

web/src/components/PeriodTable.tsx

@@ -1,5 +1,5 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@4242labs/design-system/components/table'
 import { StatusBadge } from '@/components/StatusBadge'
 import { FlagBadges } from '@/components/FlagBadges'
 import { EmptyState } from '@/components/EmptyState'

web/src/components/ReportChart.tsx

@@ -1,8 +1,8 @@
 import { Fragment, useEffect, useState } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@4242labs/design-system/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@4242labs/design-system/components/card'
 import { formatMoney } from '@/lib/format'
 import { FLOW_LABEL, pageCount, pageOf, type Flow, type ReportCard } from '@/lib/reports'
 

web/src/components/ReportsNav.tsx

@@ -4,9 +4,9 @@ import { DateRangePicker } from '@/components/DateRangePicker'
 import { FacetedFilter } from '@/components/FacetedFilter'
 import { FilterBar } from '@/components/FilterBar'
 import { PeriodPicker } from '@/components/PeriodPicker'
-import { Button } from '@/components/ui/button'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import { TopBar, TopBarActions, TopBarRailLead } from '@/components/ui/top-bar'
+import { Button } from '@4242labs/design-system/components/button'
+import { SidebarTrigger } from '@4242labs/design-system/components/sidebar'
+import { TopBar, TopBarActions, TopBarRailLead } from '@4242labs/design-system/components/top-bar'
 import type { FilterOptions } from '@/lib/filters'
 import {
   isCustomPeriod,

web/src/components/SummaryCards.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@/components/ui/card'
+import { Card, CardContent } from '@4242labs/design-system/components/card'
 import { formatMoney } from '@/lib/format'
 import type { ProjectionsResponse } from '@/lib/types'
 

web/src/components/ThemeSwitch.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import {
   ThemeSwitch as CanonicalThemeSwitch,
   type ThemeSwitchTheme,
-} from '@/components/ui/theme-switch'
+} from '@4242labs/design-system/components/theme-switch'
 
 const STORAGE_KEY = 'entropy-theme'