chore: purge shadcn from codebase. Replace with bits-ui components and other tools

src/shared/ui/Badge/Badge.svelte

@@ -3,11 +3,11 @@
     Pill badge with border and optional status dot.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     type LabelSize,
     labelSizeConfig,
 } from '$shared/ui/Label/config';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
@@ -64,7 +64,7 @@ let {
 </script>
 
 <span
-    class={cn(
+    class={clsx(
         'inline-flex items-center gap-1 px-2 py-0.5 border rounded-full',
         'font-mono uppercase tracking-wide',
         labelSizeConfig[size],

src/shared/ui/Button/Button.svelte

@@ -3,7 +3,7 @@
     design-system button. Uppercase, zero border-radius, Space Grotesk.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type {
@@ -71,7 +71,7 @@ let {
 const isIconOnly = $derived(!!icon && !children);
 
 const variantStyles: Record<ButtonVariant, string> = {
-    primary: cn(
+    primary: clsx(
         'bg-swiss-red text-white',
         'hover:bg-swiss-red/90',
         'active:bg-swiss-red/80',
@@ -87,7 +87,7 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:cursor-not-allowed',
         'disabled:transform-none',
     ),
-    secondary: cn(
+    secondary: clsx(
         'bg-surface dark:bg-paper',
         'text-swiss-black dark:text-neutral-200',
         'border border-black/10 dark:border-white/10',
@@ -98,7 +98,7 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
-    outline: cn(
+    outline: clsx(
         'bg-transparent',
         'text-swiss-black dark:text-neutral-200',
         'border border-black/20 dark:border-white/20',
@@ -109,7 +109,7 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
-    ghost: cn(
+    ghost: clsx(
         'bg-transparent',
         'text-secondary',
         'border border-transparent',
@@ -119,7 +119,7 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
-    icon: cn(
+    icon: clsx(
         'bg-surface dark:bg-dark-bg',
         'text-secondary',
         'border border-transparent',
@@ -130,8 +130,8 @@ const variantStyles: Record<ButtonVariant, string> = {
         'disabled:text-neutral-400 dark:disabled:text-neutral-600',
         'disabled:cursor-not-allowed',
     ),
-    tertiary: cn(
-        // Font override — must come after base in cn() to win via tailwind-merge
+    tertiary: clsx(
+        // Font override — must come after base in clsx() to win via tailwind-merge
         'font-secondary font-medium normal-case tracking-normal',
         // Inactive state
         'bg-transparent',
@@ -175,7 +175,7 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
     icon: 'bg-paper dark:bg-paper text-brand border-subtle',
 };
 
-const classes = $derived(cn(
+const classes = $derived(clsx(
     // Base
     'inline-flex items-center justify-center',
     'font-primary font-bold tracking-tight uppercase',

src/shared/ui/Button/ButtonGroup.svelte

@@ -4,7 +4,7 @@
     Use for segmented controls, view toggles, or any mutually exclusive button set.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
@@ -23,7 +23,7 @@ let { children, class: className, ...rest }: Props = $props();
 </script>
 
 <div
-    class={cn(
+    class={clsx(
         'flex items-center gap-1 p-1',
         'bg-surface dark:bg-dark-bg',
         'border border-subtle',

src/shared/ui/ComboControl/ComboControl.svelte

@@ -5,12 +5,12 @@
 -->
 <script lang="ts">
 import type { TypographyControl } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Slider } from '$shared/ui';
 import { Button } from '$shared/ui/Button';
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
 import { Popover } from 'bits-ui';
+import clsx from 'clsx';
 import TechText from '../TechText/TechText.svelte';
 
 interface Props {
@@ -78,7 +78,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 -->
 {#if reduced}
     <div
-        class={cn(
+        class={clsx(
             'flex gap-4 items-end w-full',
             className,
         )}
@@ -98,7 +98,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
     <!-- ── FULL MODE ──────────────────────────────────────────────────────────────── -->
 {:else}
-    <div class={cn('flex items-center px-1 relative', className)}>
+    <div class={clsx('flex items-center px-1 relative', className)}>
         <!-- Decrease button -->
         <Button
             variant="icon"
@@ -119,7 +119,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                     {#snippet child({ props })}
                         <button
                             {...props}
-                            class={cn(
+                            class={clsx(
                                 'flex flex-col items-center justify-center w-14 py-1',
                                 'select-none rounded-none transition-all duration-150',
                                 'border border-transparent',

src/shared/ui/ControlGroup/ControlGroup.svelte

@@ -3,7 +3,7 @@
     Labeled container for form controls
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 
 interface Props {
@@ -24,7 +24,7 @@ interface Props {
 const { label, children, class: className }: Props = $props();
 </script>
 
-<div class={cn('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
+<div class={clsx('flex flex-col gap-3 py-6 border-b border-subtle last:border-0', className)}>
     <div class="flex justify-between items-center text-xs font-primary font-bold tracking-tight text-neutral-900 dark:text-neutral-100 uppercase leading-none">
         {label}
     </div>

src/shared/ui/Divider/Divider.svelte

@@ -3,7 +3,7 @@
     1px separator line, horizontal or vertical.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 
 interface Props {
     /**
@@ -24,7 +24,7 @@ let {
 </script>
 
 <div
-    class={cn(
+    class={clsx(
         'bg-black/10 dark:bg-white/10',
         orientation === 'horizontal' ? 'w-full h-px' : 'w-px h-full',
         className,

src/shared/ui/FilterGroup/FilterGroup.svelte

@@ -4,11 +4,11 @@
 -->
 <script lang="ts">
 import type { Filter } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Button } from '$shared/ui';
 import { Label } from '$shared/ui';
 import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+import clsx from 'clsx';
 import { cubicOut } from 'svelte/easing';
 import {
     draw,
@@ -68,7 +68,7 @@ $effect(() => {
     </svg>
 {/snippet}
 
-<div class={cn('flex flex-col', className)}>
+<div class={clsx('flex flex-col', className)}>
     <Label
         variant="default"
         size="sm"

src/shared/ui/Footnote/Footnote.svelte

@@ -3,7 +3,7 @@
     Provides classes for styling footnotes
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 
 interface Props {
@@ -26,14 +26,14 @@ const { children, class: className, render }: Props = $props();
 
 {#if render}
     {@render render({
-    class: cn(
+    class: clsx(
         'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
         className,
     ),
 })}
 {:else if children}
     <span
-        class={cn(
+        class={clsx(
             'font-mono text-3xs sm:text-2xs lowercase tracking-wider-mono text-text-soft',
             className,
         )}

src/shared/ui/Input/Input.svelte

@@ -3,8 +3,8 @@
     design-system input. Zero border-radius, Space Grotesk, precise states.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import XIcon from '@lucide/svelte/icons/x';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import { cubicOut } from 'svelte/easing';
 import type { HTMLInputAttributes } from 'svelte/elements';
@@ -90,7 +90,7 @@ const hasRightSlot = $derived(!!rightIcon || showClearButton);
 const cfg = $derived(inputSizeConfig[size]);
 const styles = $derived(inputVariantConfig[variant]);
 
-const inputClasses = $derived(cn(
+const inputClasses = $derived(clsx(
     'font-primary rounded-none outline-none transition-all duration-200',
     'text-neutral-900 dark:text-neutral-100',
     'placeholder:text-neutral-400 dark:placeholder:text-neutral-600',
@@ -107,8 +107,8 @@ const inputClasses = $derived(cn(
 ));
 </script>
 
-<div class={cn('flex flex-col gap-1', fullWidth && 'w-full')}>
-    <div class={cn('relative group', fullWidth && 'w-full')}>
+<div class={clsx('flex flex-col gap-1', fullWidth && 'w-full')}>
+    <div class={clsx('relative group', fullWidth && 'w-full')}>
         <!-- Left icon slot -->
         {#if leftIcon}
             <div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-600 pointer-events-none z-10 flex items-center">
@@ -147,7 +147,7 @@ const inputClasses = $derived(cn(
     <!-- Helper / error text -->
     {#if helperText}
         <span
-            class={cn(
+            class={clsx(
                 'text-2xs font-mono tracking-wide px-1',
                 error ? 'text-brand ' : 'text-secondary',
             )}

src/shared/ui/Label/Label.svelte

@@ -3,7 +3,7 @@
     Inline monospace label. The base primitive for all micrographic text.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import {
     type LabelFont,
@@ -72,7 +72,7 @@ let {
 </script>
 
 <span
-    class={cn(
+    class={clsx(
         'font-mono tracking-widest leading-none',
         'inline-flex items-center gap-1.5',
         font === 'primary' && 'font-primary tracking-tight',

src/shared/ui/Logo/Logo.svelte

@@ -3,8 +3,8 @@
     Project logo with apropriate styles
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Badge } from '$shared/ui';
+import clsx from 'clsx';
 
 interface Props {
     /**
@@ -18,7 +18,7 @@ const { class: className }: Props = $props();
 const title = 'GLYPHDIFF';
 </script>
 
-<div class={cn('flex items-center gap-2 md:gap-3 select-none', className)}>
+<div class={clsx('flex items-center gap-2 md:gap-3 select-none', className)}>
     <h1 class="font-logo font-extrabold text-base md:text-xl tracking-tight text-swiss-black dark:text-neutral-200">
         {title}
     </h1>

src/shared/ui/PerspectivePlan/PerspectivePlan.svelte

@@ -5,7 +5,7 @@
 -->
 <script lang="ts">
 import type { PerspectiveManager } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import { type Snippet } from 'svelte';
 
 interface Props {
@@ -73,7 +73,7 @@ const isVisible = $derived(manager.isFront);
 </script>
 
 <div
-    class={cn('will-change-transform', className)}
+    class={clsx('will-change-transform', className)}
     style:transform-style="preserve-3d"
     style:transform={style?.transform}
     style:filter={style?.filter}

src/shared/ui/Section/SectionHeader/SectionHeader.svelte

@@ -3,8 +3,8 @@
     Numbered section heading with optional subtitle and pulse dot.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Label } from '$shared/ui';
+import clsx from 'clsx';
 
 interface Props {
     /**
@@ -41,7 +41,7 @@ let {
 const indexStr = $derived(String(index).padStart(2, '0'));
 </script>
 
-<div class={cn('flex items-center gap-3 md:gap-4 mb-2', className)}>
+<div class={clsx('flex items-center gap-3 md:gap-4 mb-2', className)}>
     <div class="flex items-center gap-2">
         {#if pulse}
             <span class="w-1.5 h-1.5 bg-brand rounded-full animate-pulse"></span>

src/shared/ui/Section/SectionSeparator/SectionSeparator.svelte

@@ -3,7 +3,7 @@
     A horizontal separator line used to visually separate sections within a page.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 
 interface Props {
     /**
@@ -15,4 +15,4 @@ interface Props {
 const { class: className = '' }: Props = $props();
 </script>
 
-<div class={cn('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>
+<div class={clsx('w-full h-px bg-swiss-black/5 dark:bg-white/10 my-8 md:my-12', className)}></div>

src/shared/ui/SidebarContainer/SidebarContainer.svelte

@@ -4,7 +4,7 @@
 -->
 <script lang="ts">
 import type { ResponsiveManager } from '$shared/lib';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import { getContext } from 'svelte';
 import { cubicOut } from 'svelte/easing';
@@ -79,7 +79,7 @@ function close() {
         The inner div stays w-80 so Sidebar layout never reflows mid-animation.
     -->
     <div
-        class={cn(
+        class={clsx(
             'shrink-0 z-30 h-full relative',
             'overflow-hidden',
             'will-change-[width]',

src/shared/ui/Skeleton/Skeleton.svelte

@@ -3,7 +3,7 @@
     Generic loading placeholder with shimmer animation.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { HTMLAttributes } from 'svelte/elements';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -18,7 +18,7 @@ let { class: className, animate = true, ...rest }: Props = $props();
 </script>
 
 <div
-    class={cn(
+    class={clsx(
         'rounded-md bg-background-subtle/50 backdrop-blur-sm',
         animate && 'animate-pulse',
         className,

src/shared/ui/Stat/Stat.svelte

@@ -3,8 +3,8 @@
     A single key:value pair in Space Mono. Optional trailing divider.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Label } from '$shared/ui';
+import clsx from 'clsx';
 import type { ComponentProps } from 'svelte';
 
 interface Props extends Pick<ComponentProps<typeof Label>, 'variant'> {
@@ -36,7 +36,7 @@ let {
 }: Props = $props();
 </script>
 
-<div class={cn('flex items-center gap-1', className)}>
+<div class={clsx('flex items-center gap-1', className)}>
     <Label variant="muted" size="xs">{label}:</Label>
     <Label {variant} size="xs" bold>{value}</Label>
 </div>

src/shared/ui/Stat/StatGroup.svelte

@@ -3,8 +3,8 @@
     Renders multiple Stat components in a row with auto-separators.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Stat } from '$shared/ui';
+import clsx from 'clsx';
 import type { ComponentProps } from 'svelte';
 
 interface StatItem extends Partial<Pick<ComponentProps<typeof Stat>, 'variant'>> {
@@ -26,7 +26,7 @@ interface Props {
 let { stats, class: className }: Props = $props();
 </script>
 
-<div class={cn('flex items-center gap-4', className)}>
+<div class={clsx('flex items-center gap-4', className)}>
     {#each stats as stat, i}
         <Stat
             label={stat.label}

src/shared/ui/TechText/TechText.svelte

@@ -3,13 +3,13 @@
     Monospace <code> element for technical values, measurements, identifiers.
 -->
 <script lang="ts">
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import {
     type LabelSize,
     type LabelVariant,
     labelSizeConfig,
     labelVariantConfig,
 } from '$shared/ui/Label/config';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 
 interface Props {
@@ -42,7 +42,7 @@ let {
 </script>
 
 <code
-    class={cn(
+    class={clsx(
         'font-mono tracking-tight tabular-nums',
         labelSizeConfig[size],
         labelVariantConfig[variant],

src/shared/ui/VirtualList/VirtualList.svelte

@@ -11,7 +11,7 @@
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
 import { throttle } from '$shared/lib/utils';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import clsx from 'clsx';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 
@@ -295,13 +295,13 @@ $effect(() => {
 {/snippet}
 
 {#if useWindowScroll}
-    <div class={cn('relative w-full', className)} bind:this={viewportRef} {...rest}>
+    <div class={clsx('relative w-full', className)} bind:this={viewportRef} {...rest}>
         {@render content()}
     </div>
 {:else}
     <div
         bind:this={viewportRef}
-        class={cn(
+        class={clsx(
             'relative overflow-y-auto overflow-x-hidden',
             'rounded-md bg-background',
             'w-full',