feat(ui): add ProgressBar component

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

n-link-core/components/ProgressBar.spec.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ProgressBar from './ProgressBar.vue';
+
+const fill = (w: ReturnType<typeof mount>) => w.get('[data-testid="fill"]');
+
+describe('ProgressBar', () => {
+  it('renders fraction as a width percentage', () => {
+    const wrapper = mount(ProgressBar, { props: { fraction: 0.5 } });
+    expect(fill(wrapper).attributes('style')).toContain('width: 50%');
+  });
+
+  it('clamps fractions below 0 and above 1', () => {
+    expect(fill(mount(ProgressBar, { props: { fraction: -0.3 } }))
+      .attributes('style')).toContain('width: 0%');
+    expect(fill(mount(ProgressBar, { props: { fraction: 1.8 } }))
+      .attributes('style')).toContain('width: 100%');
+  });
+
+  it('applies the accent color class by default', () => {
+    const wrapper = mount(ProgressBar, { props: { fraction: 0.5 } });
+    expect(fill(wrapper).classes()).toContain('bg-accent');
+  });
+
+  it('applies a chosen color class', () => {
+    const wrapper = mount(ProgressBar, { props: { fraction: 0.5, color: 'ok' } });
+    expect(fill(wrapper).classes()).toContain('bg-ok');
+  });
+});

n-link-core/components/ProgressBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="w-full bg-edge rounded-full overflow-hidden">
+    <div data-testid="fill" class="py-1 rounded-full" :class="`bg-${color}`"
+         :style="{ width: `${percent}%` }"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  fraction: number;
+  color?: 'accent' | 'ok' | 'warn';
+}>(), {
+  color: 'accent',
+});
+
+const percent = computed(() => Math.min(100, Math.max(0, props.fraction * 100)));
+</script>