feat: add sequential progression and video watch lesson completion

Gate student content by completion order, track per-video watch progress
with seek enforcement, and auto-complete lessons at the configured
threshold. Show ring progress in the lesson header, keep watch progress
on rewatch, and sync progression locks client-side so the next item
unlocks after completion.

apps/dashboard/src/lib/features/setup/components/setup-progress.svelte

@@ -2,6 +2,7 @@
   import { calculateProgress, setupProgressApi } from '../api/setup-progress.svelte';
   import type { SetupItem } from '../api/setup-progress.svelte';
   import { Skeleton } from '@cio/ui/base/skeleton';
+  import { PercentRingProgress } from '@cio/ui/custom/percent-ring-progress';
 
   let { setupItems, size = 'default' } = $props<{
     setupItems?: SetupItem[];
@@ -14,40 +15,8 @@
   const sizeClass = $derived(size === 'small' ? 'size-10' : 'size-14');
 </script>
 
-<div class="relative shrink-0">
-  {#if isLoading}
-    <!-- Loading skeleton - round circle -->
-    <Skeleton class="{sizeClass} rounded-full" />
-  {:else}
-    <svg class="{sizeClass} -rotate-90" viewBox="0 0 100 100">
-      <!-- Background circle -->
-      <circle
-        cx="50"
-        cy="50"
-        r="45"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="8"
-        class="text-gray-200 dark:text-gray-700"
-      />
-      <!-- Progress circle -->
-      <circle
-        cx="50"
-        cy="50"
-        r="45"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="8"
-        stroke-linecap="round"
-        class="text-green-600"
-        stroke-dasharray={2 * Math.PI * 45}
-        stroke-dashoffset={2 * Math.PI * 45 * (1 - progressPercentage / 100)}
-        style="transition: stroke-dashoffset 0.5s ease-in-out;"
-      />
-    </svg>
-    <!-- Center text -->
-    <div class="absolute inset-0 flex flex-col items-center justify-center">
-      <p class={size === 'small' ? 'text-[10px]' : 'text-sm'}>{progressPercentage}%</p>
-    </div>
-  {/if}
-</div>
+{#if isLoading}
+  <Skeleton class="{sizeClass} shrink-0 rounded-full" />
+{:else}
+  <PercentRingProgress value={progressPercentage} {size} />
+{/if}