refactor: move shared components to lib/shared/ sub-packages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/shared/primitives/RichtlinienRuleCard.svelte.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import RichtlinienRuleCard from './RichtlinienRuleCard.svelte';
+
+afterEach(cleanup);
+
+const defaultProps = {
+	icon: '✍',
+	title: 'Unleserliche Wörter',
+	body: 'Schreiben Sie [unleserlich].',
+	beispielOutput: '[unleserlich]'
+};
+
+describe('RichtlinienRuleCard', () => {
+	it('renders an h3 with the title', async () => {
+		render(RichtlinienRuleCard, { props: defaultProps });
+		await expect
+			.element(page.getByRole('heading', { level: 3 }))
+			.toHaveTextContent('Unleserliche Wörter');
+	});
+
+	it('renders the body text', async () => {
+		render(RichtlinienRuleCard, { props: defaultProps });
+		await expect.element(page.getByText('Schreiben Sie [unleserlich].')).toBeInTheDocument();
+	});
+
+	it('renders icon in a span with aria-hidden="true"', async () => {
+		render(RichtlinienRuleCard, { props: defaultProps });
+		const iconSpan = document.querySelector('span[aria-hidden="true"]');
+		expect(iconSpan).not.toBeNull();
+		expect(iconSpan!.textContent).toContain('✍');
+	});
+
+	it('renders beispielOutput in monospace with → arrow', async () => {
+		render(RichtlinienRuleCard, { props: defaultProps });
+		const mono = document.querySelector('code, [class*="font-mono"]');
+		expect(mono).not.toBeNull();
+		expect(mono!.textContent).toContain('[unleserlich]');
+		await expect.element(page.getByText(/→/)).toBeInTheDocument();
+	});
+
+	it('does not render beispiel section when beispielOutput is absent', async () => {
+		render(RichtlinienRuleCard, {
+			props: { icon: '✍', title: 'Test', body: 'Body' }
+		});
+		expect(document.querySelector('code, [class*="font-mono"]')).toBeNull();
+	});
+});