svelte-kit-vice/web/routes/active/_components/ModuleHeader.svelte

<script lang="ts">
	let {
		section,
		title,
		alias,
		summary,
		factories,
		dependsOn,
		layer,
		stub
	}: {
		section: string;
		title: string;
		alias?: string;
		summary: string;
		factories?: readonly string[];
		dependsOn?: readonly string[];
		layer?: string;
		stub?: boolean;
	} = $props();
</script>

<header class="mod-header">
	<div class="breadcrumbs">
		<a href="/active">Modules</a>
		<span aria-hidden="true">/</span>
		<span>{section}</span>
		<span aria-hidden="true">/</span>
		<span class="current">{title}</span>
	</div>

	<h1>
		<span class="mark">{title}</span>
		{#if alias}
			<span class="alias">{alias}</span>
		{/if}
		{#if stub}
			<span class="stub-badge">Stub</span>
		{/if}
	</h1>
	<p class="lead">{summary}</p>

	<dl class="meta">
		{#if layer}
			<div>
				<dt>Layer</dt>
				<dd>{layer}</dd>
			</div>
		{/if}
		{#if factories && factories.length}
			<div>
				<dt>Factories</dt>
				<dd>
					{#each factories as fn (fn)}
						<code>{fn}</code>
					{/each}
				</dd>
			</div>
		{/if}
		{#if dependsOn && dependsOn.length}
			<div>
				<dt>Depends on</dt>
				<dd>
					{#each dependsOn as dep (dep)}
						<code>{dep}</code>
					{/each}
				</dd>
			</div>
		{/if}
	</dl>
</header>

<style>
	.mod-header {
		margin-bottom: 2rem;
	}

	.breadcrumbs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem;
		font-size: 0.8125rem;
		color: var(--c-fg-subtle);
		margin-bottom: 1rem;
	}

	.breadcrumbs a {
		color: var(--c-fg-muted);
	}

	.breadcrumbs .current {
		color: var(--c-fg);
		font-weight: 500;
	}

	h1 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 2.25rem;
		font-weight: 700;
		letter-spacing: -0.025em;
		margin: 0 0 0.4rem;
	}

	.mark {
		color: var(--c-fg);
	}

	.alias {
		font-family: var(--font-mono);
		font-size: 1rem;
		font-weight: 500;
		color: var(--c-fg-subtle);
		background: var(--c-bg-muted);
		border: 1px solid var(--c-border);
		padding: 0.15em 0.5em;
		border-radius: var(--r-sm);
		letter-spacing: 0;
		align-self: center;
	}

	.stub-badge {
		font-size: 0.65rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		padding: 0.15em 0.5em;
		background: var(--c-bg-muted);
		color: var(--c-fg-subtle);
		border: 1px solid var(--c-border);
		border-radius: var(--r-sm);
	}

	.lead {
		font-size: 1.125rem;
		color: var(--c-fg-muted);
		margin: 0 0 1.25rem;
	}

	.meta {
		position: relative;
		display: grid;
		grid-template-columns: max-content 1fr;
		column-gap: 1.4rem;
		row-gap: 0.55rem;
		margin: 0;
		padding: 1rem 1.15rem;
		background: var(--c-bg-subtle);
		border: 1px solid var(--c-border);
		border-radius: var(--r-lg);
		font-size: 0.875rem;
		box-shadow: var(--shadow-sm);
	}

	.meta::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.85rem;
		bottom: 0.85rem;
		width: 3px;
		border-radius: 0 2px 2px 0;
		background: var(--c-accent);
		opacity: 0.5;
	}

	.meta > div {
		display: contents;
	}

	dt {
		font-size: 0.7rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--c-fg-subtle);
		padding-top: 0.15rem;
	}

	dd {
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	dd code {
		font-size: 0.8125rem;
		padding: 0.1em 0.45em;
		background: var(--c-code-bg);
		color: var(--c-code-fg);
		border: 1px solid var(--c-code-border);
		border-radius: var(--r-sm);
	}
</style>