@nucel/ui 0.1.0

package/README.md

@@ -0,0 +1,235 @@
+# @nucel/ui
+
+A comprehensive Svelte 5 UI component library for Nucel projects.
+
+## Features
+
+- **36 Components**: 24 shadcn-svelte primitives + 12 custom components
+- **115 Component Files**: Full comprehensive coverage
+- **Svelte 5**: Built with runes and modern Svelte patterns
+- **TypeScript**: Full type safety
+- **Tailwind CSS v4**: Seamless styling integration
+- **Accessible**: Built on top of bits-ui for accessibility
+- **Tree-shakeable**: Only import what you need
+
+## Installation
+
+```bash
+npm install @nucel/ui
+# or
+bun add @nucel/ui
+```
+
+## Peer Dependencies
+
+```bash
+npm install svelte@^5.0.0 tailwindcss@^4.0.0
+```
+
+## Quick Start
+
+```svelte
+<script>
+	import {
+		Button,
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		StatusBadge,
+		Sparkline,
+	} from '@nucel/ui';
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>Dashboard</CardTitle>
+	</CardHeader>
+	<CardContent>
+		<StatusBadge status="running" />
+		<Sparkline data={[10, 25, 15, 30, 20, 35, 28]} />
+		<Button>Action</Button>
+	</CardContent>
+</Card>
+```
+
+## Components
+
+### shadcn-svelte Primitives (24)
+
+- **Accordion**: Expandable/collapsible sections
+- **Avatar**: User avatar with fallback
+- **Badge**: Status badges with variants
+- **Breadcrumb**: Navigation breadcrumbs
+- **Button**: Action buttons with multiple variants
+- **Card**: Content containers with header, content, footer
+- **Collapsible**: Expandable/collapsible content
+- **Dialog**: Modal dialogs with overlay
+- **DropdownMenu**: Context menus and dropdowns
+- **Input**: Text input fields
+- **Label**: Form labels
+- **NavigationMenu**: Top-level navigation menus
+- **Progress**: Progress bars
+- **ScrollArea**: Custom scrollable areas
+- **Select**: Dropdown selects with search
+- **Separator**: Visual dividers
+- **Sheet**: Side panels and drawers
+- **Skeleton**: Loading placeholders
+- **Sonner**: Toast notifications
+- **Tabs**: Tabbed interfaces
+- **Textarea**: Multi-line text inputs
+- **Toggle**: Toggle switches
+- **ToggleGroup**: Grouped toggles
+- **Tooltip**: Hover tooltips
+
+### Custom Components (12)
+
+- **Backdrop**: Fixed overlay backdrop for modals
+- **CountBadge**: Animated count indicators (99+)
+- **EmptyState**: Empty state placeholders
+- **KbdShortcut**: Keyboard shortcut displays
+- **MarkdownRenderer**: Sanitized markdown rendering
+- **ProgressRing**: Circular progress indicator
+- **ReviewBadge**: PR review status badges
+- **Sparkline**: Mini line charts for data visualization
+- **StatusBadge**: Combined status indicator with badge
+- **StatusDot**: Animated status dots
+- **TabBar**: Tab navigation with variants
+- **VerticalSeparator**: Inline vertical dividers
+
+## Usage Examples
+
+### Dialog
+
+```svelte
+<script>
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogDescription,
+		DialogFooter,
+		Button,
+	} from '@nucel/ui';
+	let open = $state(false);
+</script>
+
+<Button onclick={() => (open = true)}>Open Dialog</Button>
+
+<Dialog bind:open>
+	<DialogContent>
+		<DialogHeader>
+			<DialogTitle>Confirm Action</DialogTitle>
+			<DialogDescription>Are you sure you want to proceed?</DialogDescription>
+		</DialogHeader>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+			<Button onclick={() => (open = false)}>Confirm</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+```
+
+### Status Components
+
+```svelte
+<script>
+	import { StatusDot, StatusBadge } from '@nucel/ui';
+</script>
+
+<!-- Simple status dot -->
+<StatusDot color="bg-green-500" animated />
+<StatusDot status="running" />
+<StatusDot status="failed" size="sm" />
+
+<!-- Combined status badge -->
+<StatusBadge status="open" />
+<StatusBadge status="merged" label="Merged by john" />
+```
+
+### Data Visualization
+
+```svelte
+<script>
+	import { Sparkline, ProgressRing } from '@nucel/ui';
+</script>
+
+<!-- Mini chart -->
+<Sparkline data={[10, 25, 15, 30, 20]} color="stroke-blue-500" />
+
+<!-- Circular progress -->
+<ProgressRing spent={75} limit={100} size={24} />
+```
+
+### Navigation
+
+```svelte
+<script>
+	import { TabBar } from '@nucel/ui';
+	import { File, GitBranch, Settings } from '@lucide/svelte';
+
+	const items = [
+		{ id: 'files', label: 'Files', icon: File },
+		{ id: 'branches', label: 'Branches', icon: GitBranch, count: 3 },
+		{ id: 'settings', label: 'Settings', icon: Settings },
+	];
+
+	let selected = $state('files');
+</script>
+
+<TabBar {items} {selected} onselect={(id) => (selected = id)} variant="underline" />
+```
+
+## Styling
+
+Components use Tailwind CSS v4 with the following theme structure:
+
+```css
+@theme {
+	--color-background: oklch(...);
+	--color-foreground: oklch(...);
+	--color-primary: oklch(...);
+	--color-secondary: oklch(...);
+	--color-destructive: oklch(...);
+	/* ... more theme variables */
+}
+```
+
+Import the styles in your app:
+
+```css
+@import '@nucel/ui/src/styles.css';
+```
+
+## Storybook
+
+Explore all components with interactive examples:
+
+```bash
+cd packages/ui
+bun run storybook
+```
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Run checks
+bun run check
+
+# Run linter
+bun run lint
+
+# Format code
+bun run format
+
+# Build Storybook
+bun run build-storybook
+```
+
+## License
+
+MIT © Nucel Team

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "@nucel/ui",
+	"version": "0.1.0",
+	"description": "A comprehensive Svelte 5 UI component library for Nucel projects",
+	"type": "module",
+	"svelte": "./src/lib/index.ts",
+	"exports": {
+		".": {
+			"types": "./src/lib/index.ts",
+			"svelte": "./src/lib/index.ts",
+			"default": "./src/lib/index.ts"
+		}
+	},
+	"files": [
+		"src/lib",
+		"src/styles.css"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"lint": "eslint .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build",
+		"prepublishOnly": "echo 'publishing @nucel/ui'"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/nucel/ui.git"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"ui",
+		"components",
+		"shadcn",
+		"tailwindcss",
+		"bits-ui",
+		"component-library"
+	],
+	"author": "Nucel Team",
+	"license": "MIT",
+	"dependencies": {
+		"@lucide/svelte": "^0.564.0",
+		"bits-ui": "^2.16.1",
+		"clsx": "^2.1.1",
+		"dompurify": "^3.3.3",
+		"marked": "^17.0.5",
+		"svelte-sonner": "^1.0.7",
+		"tailwind-merge": "^3.5.0",
+		"tailwind-variants": "^3.2.2"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.39.2",
+		"@storybook/addon-a11y": "^10.0.0",
+		"@storybook/addon-docs": "^10.0.0",
+		"@storybook/addon-svelte-csf": "^5.0.0",
+		"@storybook/addon-vitest": "^10.0.0",
+		"@storybook/svelte-vite": "^10.3.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/dompurify": "^3.2.0",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.3.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"storybook": "^10.0.0",
+		"svelte": "^5.49.2",
+		"svelte-check": "^4.3.6",
+		"tailwindcss": "^4.1.18",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.8.0",
+		"typescript-eslint": "^8.54.0",
+		"vite": "^8.0.0",
+		"vitest": "^4.0.18"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}

package/src/lib/components/ui/Backdrop.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let {
+		onclick,
+		zIndex = 40,
+	}: {
+		onclick?: () => void;
+		zIndex?: number;
+	} = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0"
+	style="z-index: {zIndex}"
+	{onclick}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') onclick?.();
+	}}
+></div>

package/src/lib/components/ui/CountBadge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	let {
+		count,
+		max = 99,
+		size = 'md',
+		variant = 'primary',
+	}: {
+		count: number;
+		max?: number;
+		size?: 'sm' | 'md';
+		variant?: 'primary' | 'secondary' | 'destructive';
+	} = $props();
+
+	const display = $derived(count > max ? `${max}+` : `${count}`);
+
+	const sizeClass = $derived(
+		size === 'sm'
+			? 'h-3.5 min-w-[14px] text-[7px] px-0.5'
+			: 'h-[18px] min-w-[18px] text-[9px] px-1',
+	);
+
+	const variantClass = $derived.by(() => {
+		switch (variant) {
+			case 'destructive':
+				return 'bg-destructive text-destructive-foreground shadow-sm shadow-destructive/30';
+			case 'secondary':
+				return 'bg-secondary text-secondary-foreground';
+			default:
+				return 'bg-primary text-primary-foreground shadow-sm shadow-primary/30';
+		}
+	});
+</script>
+
+{#if count > 0}
+	<span
+		class="flex items-center justify-center rounded-full font-bold {sizeClass} {variantClass} animate-in zoom-in-50 duration-200"
+	>
+		{display}
+	</span>
+{/if}

package/src/lib/components/ui/EmptyState.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+
+	let {
+		icon,
+		title,
+		description,
+		action,
+		variant = 'default',
+	}: {
+		icon?: Component<{ class?: string }>;
+		title: string;
+		description?: string;
+		action?: Snippet;
+		variant?: 'default' | 'compact' | 'inline';
+	} = $props();
+</script>
+
+{#if variant === 'inline'}
+	<div class="text-muted-foreground flex items-center gap-2 px-3 py-2 text-xs">
+		{#if icon}
+			{@const Icon = icon}
+			<Icon class="h-3.5 w-3.5 shrink-0" />
+		{/if}
+		<span>{title}</span>
+	</div>
+{:else if variant === 'compact'}
+	<div class="flex flex-col items-center gap-1.5 px-4 py-6 text-center">
+		{#if icon}
+			{@const Icon = icon}
+			<div class="bg-secondary flex h-9 w-9 items-center justify-center rounded-lg">
+				<Icon class="text-muted-foreground h-4 w-4" />
+			</div>
+		{/if}
+		<p class="text-muted-foreground text-xs font-medium">{title}</p>
+		{#if description}
+			<p class="text-muted-foreground/70 max-w-[200px] text-[10px]">{description}</p>
+		{/if}
+		{#if action}
+			<div class="mt-1">
+				{@render action()}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="flex flex-col items-center gap-2 px-6 py-10 text-center">
+		{#if icon}
+			{@const Icon = icon}
+			<div class="relative mb-1">
+				<div class="bg-secondary flex h-12 w-12 items-center justify-center rounded-xl">
+					<Icon class="text-muted-foreground h-5 w-5" />
+				</div>
+				<div
+					class="border-background bg-muted absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2"
+				></div>
+			</div>
+		{/if}
+		<p class="text-foreground/80 text-sm font-medium">{title}</p>
+		{#if description}
+			<p class="text-muted-foreground max-w-[260px] text-xs">{description}</p>
+		{/if}
+		{#if action}
+			<div class="mt-2">
+				{@render action()}
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/ui/KbdShortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	let {
+		keys,
+		size = 'sm',
+	}: {
+		keys: string[];
+		size?: 'xs' | 'sm';
+	} = $props();
+
+	const sizeClass = $derived(size === 'xs' ? 'px-0.5 py-px text-[9px]' : 'px-1 py-0.5 text-[10px]');
+</script>
+
+<span class="inline-flex items-center gap-0.5">
+	{#each keys as key, i (key)}
+		{#if i > 0}
+			<span class="text-muted-foreground/30 text-[10px]">+</span>
+		{/if}
+		<kbd class="bg-muted rounded {sizeClass} text-muted-foreground font-mono">{key}</kbd>
+	{/each}
+</span>

package/src/lib/components/ui/MarkdownRenderer.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import DOMPurify from 'dompurify';
+
+	let { content }: { content: string } = $props();
+
+	let html = $derived(
+		DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: false }) as string),
+	);
+</script>
+
+<div class="md-body">
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html html}
+</div>
+
+<style>
+	/* :global() is required here to style injected {@html} content */
+	.md-body {
+		max-width: none;
+	}
+	.md-body :global(h1),
+	.md-body :global(h2),
+	.md-body :global(h3),
+	.md-body :global(h4) {
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.5rem;
+		color: var(--foreground);
+	}
+	.md-body :global(code) {
+		background: var(--muted);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-family: var(--font-mono, monospace);
+		font-size: 0.875em;
+		color: var(--foreground);
+	}
+	.md-body :global(pre) {
+		background: var(--background);
+		padding: 1rem;
+		border-radius: 0.375rem;
+		overflow-x: auto;
+		border: 1px solid var(--border);
+	}
+	.md-body :global(pre code) {
+		background: none;
+		padding: 0;
+		color: var(--muted-foreground);
+	}
+	.md-body :global(a) {
+		color: var(--primary);
+	}
+	.md-body :global(p) {
+		color: var(--muted-foreground);
+		line-height: 1.6;
+	}
+	.md-body :global(ul),
+	.md-body :global(ol) {
+		color: var(--muted-foreground);
+	}
+	.md-body :global(blockquote) {
+		border-left: 3px solid var(--border);
+		margin-left: 0;
+		padding-left: 1rem;
+		color: var(--muted-foreground);
+	}
+	.md-body :global(hr) {
+		border: none;
+		border-top: 1px solid var(--border);
+	}
+	.md-body :global(table) {
+		border-collapse: collapse;
+		width: 100%;
+	}
+	.md-body :global(th),
+	.md-body :global(td) {
+		border: 1px solid var(--border);
+		padding: 0.5rem 0.75rem;
+		color: var(--muted-foreground);
+	}
+	.md-body :global(th) {
+		background: var(--card);
+		color: var(--foreground);
+	}
+</style>

package/src/lib/components/ui/ProgressRing.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		spent = 0,
+		limit = 0,
+		size = 16,
+		strokeWidth = 2,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+		spent?: number;
+		limit?: number;
+		size?: number;
+		strokeWidth?: number;
+	} = $props();
+
+	const radius = $derived((size - strokeWidth) / 2);
+	const circumference = $derived(2 * Math.PI * radius);
+	const pct = $derived(limit > 0 ? Math.min(1, spent / limit) : 0);
+	const dashOffset = $derived(circumference * (1 - pct));
+	const color = $derived(
+		pct >= 0.8 ? 'stroke-destructive' : pct >= 0.5 ? 'stroke-warning' : 'stroke-success',
+	);
+	const bgColor = $derived(
+		pct >= 0.8 ? 'stroke-destructive/20' : pct >= 0.5 ? 'stroke-warning/20' : 'stroke-success/20',
+	);
+</script>
+
+{#if limit > 0}
+	<span
+		bind:this={ref}
+		title="${spent.toFixed(2)} / ${limit.toFixed(2)} ({Math.round(pct * 100)}%)"
+		class={cn(className)}
+		{...restProps}
+	>
+		<svg width={size} height={size} class="shrink-0 -rotate-90">
+			<circle
+				cx={size / 2}
+				cy={size / 2}
+				r={radius}
+				fill="none"
+				stroke-width={strokeWidth}
+				class={bgColor}
+			/>
+			<circle
+				cx={size / 2}
+				cy={size / 2}
+				r={radius}
+				fill="none"
+				stroke-width={strokeWidth}
+				stroke-linecap="round"
+				stroke-dasharray={circumference}
+				stroke-dashoffset={dashOffset}
+				class="{color} transition-[stroke-dashoffset] duration-500 ease-out"
+			/>
+		</svg>
+	</span>
+{/if}

package/src/lib/components/ui/ProviderIcon.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { cn } from '../../utils.js';
+
+	let {
+		provider,
+		class: className,
+		...restProps
+	}: {
+		provider: string;
+		class?: string;
+	} = $props();
+
+	const cls = $derived(cn('h-4 w-4', className));
+</script>
+
+{#if provider === 'github' || provider === 'github_issues'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="GitHub" {...restProps}>
+		<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
+	</svg>
+{:else if provider === 'gitlab'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="GitLab" {...restProps}>
+		<path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51 1.22 3.78a.84.84 0 0 1-.3.92z"/>
+	</svg>
+{:else if provider === 'linear'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="Linear" {...restProps}>
+		<path d="M3.464 1.51 13.104 11.15A7.992 7.992 0 0 0 4.455 3.046l-.99-.99A.5.5 0 0 0 3.464 1.51zM2.1 3.697a.5.5 0 0 0 0 .707L13.596 15.9a8.027 8.027 0 0 0 1.017-1.696L3.515 3.105a.5.5 0 0 0-.707 0l-.707.592zM1.509 6.232a.5.5 0 0 0-.15.354v9.003a.5.5 0 0 0 .854.354L13.82 4.346A8.036 8.036 0 0 0 12 4a7.99 7.99 0 0 0-5.657 2.343L1.51 6.23a.5.5 0 0 0 0 0zM4 17.172l5.172 5.172A8 8 0 0 1 4 17.172zM1.359 10.24a.5.5 0 0 0 0 .707l11.697 11.697A8.03 8.03 0 0 0 15.654 21.4L2.066 10.24a.5.5 0 0 0-.707 0z"/>
+	</svg>
+{:else if provider === 'jira'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="Jira" {...restProps}>
+		<path d="M11.975 0C5.962 0 .05 5.36.05 11.992c0 6.278 4.818 11.42 10.966 11.96v-3.8c-3.968-.512-7.006-3.91-7.006-7.983 0-4.44 3.602-8.04 8.04-8.04 4.438 0 8.04 3.6 8.04 8.04 0 3.96-2.862 7.276-6.65 7.93v-5.28h3.24l.93-3.84H13.44V9.73c0-1.12.55-2.2 2.3-2.2h1.78V4.21s-1.614-.276-3.158-.276c-3.22 0-5.32 1.952-5.32 5.49v2.57H5.63v3.84h3.41v5.424C4.01 20.3 0 16.46 0 11.993 0 5.36 5.36 0 12 0z"/>
+		<path d="M11.975 5.195C8.9 5.195 6.4 7.696 6.4 10.77h5.575v5.576c3.076 0 5.576-2.5 5.576-5.576s-2.5-5.575-5.576-5.575z"/>
+	</svg>
+{:else if provider === 'bitbucket'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="Bitbucket" {...restProps}>
+		<path d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z"/>
+	</svg>
+{:else if provider === 'plane'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="Plane" {...restProps}>
+		<path d="M22.2 2.4 1.8 9.6l8.4 2.4 2.4 8.4 2.4-7.2 7.2-10.8z"/>
+	</svg>
+{:else if provider === 'digitalocean' || provider === 'do'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="DigitalOcean" {...restProps}>
+		<path d="M12.04 0C5.408 0 .05 5.36.05 11.992c0 6.278 4.818 11.42 10.966 11.96v-3.8c-3.968-.512-7.006-3.91-7.006-7.983 0-4.44 3.602-8.04 8.04-8.04 4.438 0 8.04 3.6 8.04 8.04 0 3.96-2.862 7.276-6.65 7.93v-5.28h3.24l.93-3.84H13.44V9.73c0-1.12.55-2.2 2.3-2.2h1.78V4.21s-1.614-.276-3.158-.276c-3.22 0-5.32 1.952-5.32 5.49v2.57H5.63v3.84h3.41v5.424C4.01 20.3 0 16.46 0 11.993 0 5.36 5.36 0 12 0z"/>
+	</svg>
+{:else if provider === 'azure' || provider === 'azuredevops'}
+	<svg class={cls} viewBox="0 0 24 24" fill="currentColor" aria-label="Azure DevOps" {...restProps}>
+		<path d="M0 5.26l2.65-.37 8.54 9.24v-8.5l-2.47-.34L0 5.26zm23.99 3.44L14.6 0l-5.4 4.82 8.12 2.65v9.75l6.67-8.52zM8.85 14.01L6.47 24l4.8-1.7 5.66-8.25-8.08-.04z"/>
+	</svg>
+{:else}
+	<!-- Generic git/provider icon -->
+	<svg class={cls} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-label="Provider" {...restProps}>
+		<circle cx="18" cy="18" r="3"/>
+		<circle cx="6" cy="6" r="3"/>
+		<circle cx="6" cy="18" r="3"/>
+		<path d="M6 9v6M18 15v1a3 3 0 0 1-3 3H9"/>
+	</svg>
+{/if}