chore: add archived clock app to apps-archived/

The Clock app source is preserved in apps-archived/ for reference. This directory is excluded from the pnpm workspace. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-14 21:01:08 +02:00 · 2026-04-02 13:07:38 +02:00 · 2026-04-02 13:07:38 +02:00 · df7395e57a
commit df7395e57a
parent 99d0dc6fb0
88 changed files with 6683 additions and 0 deletions
--- a/apps-archived/clock/apps/landing/.gitignore
+++ b/apps-archived/clock/apps/landing/.gitignore
@ -0,0 +1,27 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS
+.DS_Store
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
--- a/apps-archived/clock/apps/landing/.prettierrc
+++ b/apps-archived/clock/apps/landing/.prettierrc
@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.astro",
+			"options": {
+				"parser": "astro"
+			}
+		}
+	]
+}
--- a/apps-archived/clock/apps/landing/astro.config.mjs
+++ b/apps-archived/clock/apps/landing/astro.config.mjs
@ -0,0 +1,19 @@
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+	integrations: [tailwind()],
+	output: 'static',
+	build: {
+		inlineStylesheets: 'auto',
+	},
+	vite: {
+		resolve: {
+			alias: {
+				'@components': '/src/components',
+				'@layouts': '/src/layouts',
+			},
+		},
+	},
+});
--- a/apps-archived/clock/apps/landing/package.json
+++ b/apps-archived/clock/apps/landing/package.json
@ -0,0 +1,34 @@
+{
+	"name": "@clock/landing",
+	"version": "0.2.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "astro dev --port 4323",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro",
+		"type-check": "astro check || echo 'Astro check skipped'",
+		"format": "prettier --write .",
+		"clean": "rm -rf dist .astro node_modules"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.9.0",
+		"@manacore/shared-landing-ui": "workspace:*",
+		"astro": "^5.16.0",
+		"typescript": "^5.9.2"
+	},
+	"devDependencies": {
+		"@astrojs/tailwind": "^6.0.2",
+		"@tailwindcss/typography": "^0.5.18",
+		"@types/node": "^20.0.0",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-astro": "^1.0.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-tailwindcss": "^0.6.14",
+		"tailwindcss": "^3.4.0"
+	}
+}
--- a/apps-archived/clock/apps/landing/public/favicon.svg
+++ b/apps-archived/clock/apps/landing/public/favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#f59e0b">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
--- a/apps-archived/clock/apps/landing/src/components/CTA.astro
+++ b/apps-archived/clock/apps/landing/src/components/CTA.astro
@ -0,0 +1,60 @@
+---
+// Call to Action section
+---
+
+<section class="relative overflow-hidden bg-dark-bg">
+	<!-- Background gradient -->
+	<div class="absolute inset-0 bg-gradient-to-r from-primary-950/30 via-dark-bg to-primary-950/30">
+	</div>
+
+	<div class="container relative">
+		<div class="mx-auto max-w-3xl text-center">
+			<h2 class="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">
+				Bereit, produktiver zu werden?
+			</h2>
+			<p class="mb-10 text-lg text-gray-400">
+				Starte kostenlos und erlebe, wie einfach Zeitmanagement sein kann. Keine Kreditkarte
+				erforderlich.
+			</p>
+
+			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
+				<a href="#" class="btn btn-primary text-lg">
+					Jetzt kostenlos starten
+					<svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+					</svg>
+				</a>
+				<a href="#features" class="btn btn-secondary"> Mehr erfahren </a>
+			</div>
+
+			<!-- Benefits list -->
+			<div class="mt-12 flex flex-wrap items-center justify-center gap-6 text-sm text-gray-500">
+				<div class="flex items-center gap-2">
+					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<span>Kostenlos starten</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<span>Keine Kreditkarte</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+						></path>
+					</svg>
+					<span>Jederzeit kundbar</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
--- a/apps-archived/clock/apps/landing/src/components/Features.astro
+++ b/apps-archived/clock/apps/landing/src/components/Features.astro
@ -0,0 +1,82 @@
+---
+// Features section for Clock landing page
+
+const features = [
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+		</svg>`,
+		title: 'Pomodoro Timer',
+		description:
+			'Arbeite in fokussierten 25-Minuten-Intervallen mit automatischen Pausen. Steigere deine Konzentration.',
+	},
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+		</svg>`,
+		title: 'Zeiterfassung',
+		description:
+			'Tracke deine Arbeitszeit auf Projekte und Aufgaben. Detaillierte Berichte und Statistiken.',
+	},
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+		</svg>`,
+		title: 'Focus Sessions',
+		description:
+			'Starte dedizierte Focus-Sessions und eliminiere Ablenkungen. Perfekt fur Deep Work.',
+	},
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+		</svg>`,
+		title: 'Erinnerungen',
+		description: 'Sanfte Erinnerungen fur Pausen und Arbeitsende. Schutze deine Work-Life-Balance.',
+	},
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+		</svg>`,
+		title: 'Detaillierte Reports',
+		description:
+			'Wochentliche und monatliche Ubersichten. Exportiere deine Daten als CSV oder PDF.',
+	},
+	{
+		icon: `<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+		</svg>`,
+		title: 'Alle Gerate',
+		description: 'Web-App, iOS und Android. Deine Zeit wird uber alle Gerate synchronisiert.',
+	},
+];
+---
+
+<section id="features" class="bg-dark-surface">
+	<div class="container">
+		<!-- Section header -->
+		<div class="mx-auto mb-16 max-w-3xl text-center">
+			<span class="mb-4 inline-block text-sm font-medium uppercase tracking-wider text-primary-400">
+				Funktionen
+			</span>
+			<h2 class="mb-6 text-3xl font-bold md:text-4xl lg:text-5xl">Produktiver arbeiten</h2>
+			<p class="text-lg text-gray-400">
+				Clock bietet alle Tools, die du fur effektives Zeitmanagement brauchst.
+			</p>
+		</div>
+
+		<!-- Features grid -->
+		<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+			{
+				features.map((feature) => (
+					<div class="group rounded-xl border border-dark-border bg-dark-card p-6 transition-all duration-300 hover:border-primary-500/50 hover:bg-dark-card/80">
+						<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 transition-colors group-hover:bg-primary-500/20">
+							<Fragment set:html={feature.icon} />
+						</div>
+						<h3 class="mb-3 text-xl font-semibold">{feature.title}</h3>
+						<p class="text-gray-400">{feature.description}</p>
+					</div>
+				))
+			}
+		</div>
+	</div>
+</section>
--- a/apps-archived/clock/apps/landing/src/components/Footer.astro
+++ b/apps-archived/clock/apps/landing/src/components/Footer.astro
@ -0,0 +1,108 @@
+---
+// Footer component
+
+const currentYear = new Date().getFullYear();
+
+const links = {
+	product: [
+		{ name: 'Funktionen', href: '#features' },
+		{ name: 'Preise', href: '#pricing' },
+		{ name: 'Changelog', href: '/changelog' },
+		{ name: 'Roadmap', href: '/roadmap' },
+	],
+	legal: [
+		{ name: 'Impressum', href: '/impressum' },
+		{ name: 'Datenschutz', href: '/datenschutz' },
+		{ name: 'AGB', href: '/agb' },
+	],
+	support: [
+		{ name: 'FAQ', href: '/faq' },
+		{ name: 'Kontakt', href: '/kontakt' },
+		{ name: 'Status', href: '/status' },
+	],
+};
+---
+
+<footer class="border-t border-dark-border bg-dark-bg py-12">
+	<div class="container">
+		<div class="grid gap-8 md:grid-cols-4">
+			<!-- Brand -->
+			<div class="md:col-span-1">
+				<div class="mb-4 flex items-center gap-2">
+					<svg
+						class="h-8 w-8 text-primary-500"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+					</svg>
+					<span class="text-xl font-bold">Clock</span>
+				</div>
+				<p class="text-sm text-gray-500">Time Tracking & Focus fur bessere Produktivitat.</p>
+			</div>
+
+			<!-- Links -->
+			<div>
+				<h4 class="mb-4 font-semibold">Produkt</h4>
+				<ul class="space-y-2 text-sm text-gray-400">
+					{
+						links.product.map((link) => (
+							<li>
+								<a href={link.href} class="transition-colors hover:text-white">
+									{link.name}
+								</a>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+
+			<div>
+				<h4 class="mb-4 font-semibold">Rechtliches</h4>
+				<ul class="space-y-2 text-sm text-gray-400">
+					{
+						links.legal.map((link) => (
+							<li>
+								<a href={link.href} class="transition-colors hover:text-white">
+									{link.name}
+								</a>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+
+			<div>
+				<h4 class="mb-4 font-semibold">Support</h4>
+				<ul class="space-y-2 text-sm text-gray-400">
+					{
+						links.support.map((link) => (
+							<li>
+								<a href={link.href} class="transition-colors hover:text-white">
+									{link.name}
+								</a>
+							</li>
+						))
+					}
+				</ul>
+			</div>
+		</div>
+
+		<!-- Bottom bar -->
+		<div
+			class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-dark-border pt-8 md:flex-row"
+		>
+			<p class="text-sm text-gray-500">
+				&copy; {currentYear} Clock. Alle Rechte vorbehalten.
+			</p>
+			<p class="text-sm text-gray-500">
+				Ein <a href="https://mana.how" class="text-primary-400 hover:underline">Manacore</a> Produkt
+			</p>
+		</div>
+	</div>
+</footer>
--- a/apps-archived/clock/apps/landing/src/components/Hero.astro
+++ b/apps-archived/clock/apps/landing/src/components/Hero.astro
@ -0,0 +1,108 @@
+---
+// Hero section for Clock landing page
+---
+
+<section class="relative overflow-hidden py-20 md:py-32">
+	<!-- Background gradient -->
+	<div class="absolute inset-0 bg-gradient-to-b from-primary-950/30 via-dark-bg to-dark-bg"></div>
+
+	<!-- Grid pattern -->
+	<div class="absolute inset-0 bg-[url('/grid.svg')] bg-center opacity-10"></div>
+
+	<div class="container relative">
+		<div class="mx-auto max-w-4xl text-center">
+			<!-- Badge -->
+			<div
+				class="mb-8 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-4 py-2 text-sm text-primary-400"
+			>
+				<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+				</svg>
+				<span>Time Tracking & Focus</span>
+			</div>
+
+			<!-- Headline -->
+			<h1 class="mb-6 text-4xl font-bold leading-tight md:text-6xl lg:text-7xl">
+				Nutze deine Zeit
+				<span class="gradient-text">effektiv</span>
+			</h1>
+
+			<!-- Subheadline -->
+			<p class="mx-auto mb-10 max-w-2xl text-lg text-gray-400 md:text-xl">
+				Pomodoro-Timer, Zeiterfassung und Focus-Sessions - steigere deine Produktivitat und behalte
+				den Uberblick uber deine Arbeitszeit.
+			</p>
+
+			<!-- CTA Buttons -->
+			<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
+				<a href="#" class="btn btn-primary group text-lg">
+					Kostenlos starten
+					<svg
+						class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+					</svg>
+				</a>
+				<a href="#features" class="btn btn-secondary"> Funktionen entdecken </a>
+			</div>
+
+			<!-- Social proof -->
+			<div class="mt-16 flex flex-col items-center gap-4">
+				<div class="flex -space-x-2">
+					{
+						[1, 2, 3, 4, 5].map((i) => (
+							<div class="h-10 w-10 rounded-full border-2 border-dark-bg bg-gradient-to-br from-primary-400 to-primary-600" />
+						))
+					}
+				</div>
+				<p class="text-sm text-gray-500">
+					<span class="font-semibold text-white">300+</span> Nutzer tracken ihre Zeit
+				</p>
+			</div>
+		</div>
+
+		<!-- Preview mockup -->
+		<div class="relative mx-auto mt-16 max-w-5xl">
+			<div
+				class="absolute -inset-4 rounded-2xl bg-gradient-to-r from-primary-500/20 via-transparent to-primary-500/20 blur-3xl"
+			>
+			</div>
+			<div class="relative rounded-xl border border-dark-border bg-dark-card p-2 shadow-2xl">
+				<div class="flex gap-2 px-4 py-3">
+					<div class="h-3 w-3 rounded-full bg-red-500"></div>
+					<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
+					<div class="h-3 w-3 rounded-full bg-green-500"></div>
+				</div>
+				<div class="aspect-[16/9] overflow-hidden rounded-lg bg-dark-surface">
+					<!-- Timer preview placeholder -->
+					<div class="flex h-full flex-col items-center justify-center p-6">
+						<div class="mb-8 text-8xl font-bold text-primary-400">25:00</div>
+						<div class="mb-6 flex gap-4">
+							<button class="rounded-lg bg-primary-500 px-6 py-2 text-sm font-medium">Start</button>
+							<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Pause</button>
+							<button class="rounded-lg bg-dark-card px-6 py-2 text-sm">Reset</button>
+						</div>
+						<div class="flex gap-2">
+							<span class="rounded-full bg-primary-500/20 px-3 py-1 text-xs text-primary-400"
+								>Focus</span
+							>
+							<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Short Break</span>
+							<span class="rounded-full bg-dark-card px-3 py-1 text-xs">Long Break</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
--- a/apps-archived/clock/apps/landing/src/layouts/Layout.astro
+++ b/apps-archived/clock/apps/landing/src/layouts/Layout.astro
@ -0,0 +1,58 @@
+---
+import '../styles/global.css';
+import Analytics from '@manacore/shared-landing-ui/atoms/Analytics.astro';
+
+interface Props {
+	title?: string;
+	description?: string;
+}
+
+const {
+	title = 'Clock - Time Tracking & Focus',
+	description = 'Track your time, stay focused, and boost productivity. Pomodoro timer, time tracking, and focus sessions. Start free today.',
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="de" class="scroll-smooth">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content={description} />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+
+		<!-- SEO Meta Tags -->
+		<meta property="og:title" content={title} />
+		<meta property="og:description" content={description} />
+		<meta property="og:type" content="website" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content={title} />
+		<meta name="twitter:description" content={description} />
+
+		<!-- Preconnect to Google Fonts -->
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
+
+		<!-- Umami Analytics -->
+		{
+			import.meta.env.PUBLIC_UMAMI_WEBSITE_ID && (
+				<script
+					defer
+					src="https://stats.mana.how/script.js"
+					data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
+				/>
+			)
+		}
+
+		<title>{title}</title>
+	</head>
+	<body class="antialiased">
+		<slot />
+		<Analytics />
+	</body>
+</html>
--- a/apps-archived/clock/apps/landing/src/pages/index.astro
+++ b/apps-archived/clock/apps/landing/src/pages/index.astro
@ -0,0 +1,158 @@
+---
+import Layout from '@layouts/Layout.astro';
+import Hero from '@components/Hero.astro';
+import Features from '@components/Features.astro';
+import CTA from '@components/CTA.astro';
+import Footer from '@components/Footer.astro';
+
+// Pricing data
+const pricingPlans = [
+	{
+		name: 'Free',
+		price: '0',
+		period: '/Monat',
+		description: 'Perfekt zum Ausprobieren',
+		features: [
+			{ text: 'Pomodoro Timer', included: true },
+			{ text: 'Basis-Zeiterfassung', included: true },
+			{ text: '7 Tage Historie', included: true },
+			{ text: 'Web-App Zugang', included: true },
+			{ text: 'Projekte & Tags', included: false },
+			{ text: 'Detaillierte Reports', included: false },
+		],
+		cta: {
+			text: 'Kostenlos starten',
+			href: '#',
+		},
+	},
+	{
+		name: 'Pro',
+		price: '3,99',
+		period: '/Monat',
+		description: 'Fur Freelancer & Profis',
+		features: [
+			{ text: 'Alles aus Free', included: true },
+			{ text: 'Unbegrenzte Historie', included: true },
+			{ text: 'Projekte & Tags', included: true },
+			{ text: 'Detaillierte Reports', included: true },
+			{ text: 'CSV/PDF Export', included: true },
+			{ text: 'Mobile Apps', included: true },
+		],
+		cta: {
+			text: 'Pro starten',
+			href: '#',
+		},
+		highlighted: true,
+		badge: 'Beliebt',
+	},
+	{
+		name: 'Team',
+		price: '7,99',
+		period: '/Nutzer/Monat',
+		description: 'Fur Teams & Agenturen',
+		features: [
+			{ text: 'Alles aus Pro', included: true },
+			{ text: 'Team-Dashboard', included: true },
+			{ text: 'Projekt-Budgets', included: true },
+			{ text: 'Kunden-Reports', included: true },
+			{ text: 'API-Zugang', included: true },
+			{ text: 'Priority Support', included: true },
+		],
+		cta: {
+			text: 'Team erstellen',
+			href: '#',
+		},
+	},
+];
+---
+
+<Layout
+	title="Clock - Time Tracking & Focus"
+	description="Tracke deine Zeit, bleib fokussiert und steigere deine Produktivitat. Pomodoro Timer, Zeiterfassung und Focus Sessions. Kostenlos starten."
+>
+	<Hero />
+	<Features />
+
+	<section id="pricing" class="bg-dark-bg">
+		<div class="container">
+			<div class="mx-auto mb-16 max-w-3xl text-center">
+				<span
+					class="mb-4 inline-block text-sm font-medium uppercase tracking-wider text-primary-400"
+				>
+					Preise
+				</span>
+				<h2 class="mb-6 text-3xl font-bold md:text-4xl">Einfache, transparente Preise</h2>
+				<p class="text-lg text-gray-400">Starte kostenlos, upgrade wenn du mehr brauchst</p>
+			</div>
+
+			<div class="mx-auto grid max-w-5xl gap-8 md:grid-cols-3">
+				{
+					pricingPlans.map((plan) => (
+						<div
+							class={`relative rounded-xl border p-6 ${plan.highlighted ? 'border-primary-500 bg-primary-500/10' : 'border-dark-border bg-dark-card'}`}
+						>
+							{plan.badge && (
+								<div class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-primary-500 px-3 py-1 text-xs font-medium text-white">
+									{plan.badge}
+								</div>
+							)}
+							<h3 class="mb-2 text-xl font-semibold">{plan.name}</h3>
+							<p class="mb-4 text-sm text-gray-400">{plan.description}</p>
+							<div class="mb-6">
+								<span class="text-4xl font-bold">{plan.price}€</span>
+								<span class="text-gray-500">{plan.period}</span>
+							</div>
+							<ul class="mb-8 space-y-3">
+								{plan.features.map((feature) => (
+									<li
+										class={`flex items-center gap-2 text-sm ${feature.included ? 'text-white' : 'text-gray-600'}`}
+									>
+										{feature.included ? (
+											<svg
+												class="h-5 w-5 text-green-500"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M5 13l4 4L19 7"
+												/>
+											</svg>
+										) : (
+											<svg
+												class="h-5 w-5 text-gray-600"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+										)}
+										{feature.text}
+									</li>
+								))}
+							</ul>
+							<a
+								href={plan.cta.href}
+								class={`btn w-full ${plan.highlighted ? 'btn-primary' : 'btn-secondary'}`}
+							>
+								{plan.cta.text}
+							</a>
+						</div>
+					))
+				}
+			</div>
+		</div>
+	</section>
+
+	<CTA />
+	<Footer />
+</Layout>
--- a/apps-archived/clock/apps/landing/src/styles/global.css
+++ b/apps-archived/clock/apps/landing/src/styles/global.css
@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+	--color-background-page: #0a0a0a;
+	--color-background-card: #1a1a1a;
+	--color-background-card-hover: #242424;
+	--color-text-primary: #ffffff;
+	--color-text-secondary: #d1d5db;
+	--color-text-muted: #9ca3af;
+	--color-border: #262626;
+	--color-border-hover: #3f3f3f;
+	--color-primary: #f59e0b;
+	--color-primary-hover: #d97706;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	@apply bg-dark-bg text-white;
+	margin: 0;
+	padding: 0;
+	overflow-x: hidden;
+	font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	@apply bg-dark-bg;
+}
+
+::-webkit-scrollbar-thumb {
+	@apply bg-dark-border rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	@apply bg-gray-600;
+}
+
+/* Section padding */
+section {
+	@apply py-16 md:py-24;
+}
+
+/* Container */
+.container {
+	@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
+}
+
+/* Gradient text */
+.gradient-text {
+	@apply bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent;
+}
+
+/* Button styles */
+.btn {
+	@apply inline-flex items-center justify-center rounded-lg px-6 py-3 font-medium transition-all duration-200;
+}
+
+.btn-primary {
+	@apply bg-primary-500 text-white hover:bg-primary-600;
+}
+
+.btn-secondary {
+	@apply border border-dark-border bg-dark-card text-white hover:bg-dark-surface;
+}
--- a/apps-archived/clock/apps/landing/tailwind.config.mjs
+++ b/apps-archived/clock/apps/landing/tailwind.config.mjs
@ -0,0 +1,52 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: [
+		'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+		'../../packages/shared-landing-ui/src/**/*.{astro,html,js,jsx,ts,tsx}',
+	],
+	theme: {
+		extend: {
+			colors: {
+				// Clock app theme - amber/orange
+				primary: {
+					DEFAULT: '#f59e0b',
+					50: '#fffbeb',
+					100: '#fef3c7',
+					200: '#fde68a',
+					300: '#fcd34d',
+					400: '#fbbf24',
+					500: '#f59e0b',
+					600: '#d97706',
+					700: '#b45309',
+					800: '#92400e',
+					900: '#78350f',
+					950: '#451a03',
+				},
+				dark: {
+					bg: '#0a0a0a',
+					surface: '#111111',
+					card: '#1a1a1a',
+					border: '#262626',
+				},
+				background: {
+					page: 'var(--color-background-page, #0a0a0a)',
+					card: 'var(--color-background-card, #1a1a1a)',
+					'card-hover': 'var(--color-background-card-hover, #242424)',
+				},
+				text: {
+					primary: 'var(--color-text-primary, #ffffff)',
+					secondary: 'var(--color-text-secondary, #d1d5db)',
+					muted: 'var(--color-text-muted, #9ca3af)',
+				},
+				border: {
+					DEFAULT: 'var(--color-border, #262626)',
+					hover: 'var(--color-border-hover, #3f3f3f)',
+				},
+			},
+			fontFamily: {
+				sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+			},
+		},
+	},
+	plugins: [require('@tailwindcss/typography')],
+};
--- a/apps-archived/clock/apps/landing/tsconfig.json
+++ b/apps-archived/clock/apps/landing/tsconfig.json
@ -0,0 +1,10 @@
+{
+	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@components/*": ["src/components/*"],
+			"@layouts/*": ["src/layouts/*"]
+		}
+	}
+}
--- a/apps-archived/clock/apps/landing/wrangler.toml
+++ b/apps-archived/clock/apps/landing/wrangler.toml
@ -0,0 +1,7 @@
+# Cloudflare Pages configuration for Clock Landing
+# Deployed via Wrangler CLI (Direct Upload)
+# Custom domain: clocks.mana.how
+
+name = "clocks-landing"
+compatibility_date = "2024-12-01"
+pages_build_output_dir = "dist"
--- a/apps-archived/clock/apps/web/Dockerfile
+++ b/apps-archived/clock/apps/web/Dockerfile
@ -0,0 +1,32 @@
+# syntax=docker/dockerfile:1
+FROM sveltekit-base:local AS builder
+
+ARG PUBLIC_BACKEND_URL=http://mana-auth
+ARG PUBLIC_MANA_CORE_AUTH_URL=http://mana-auth:3001
+ENV PUBLIC_BACKEND_URL=$PUBLIC_BACKEND_URL
+ENV PUBLIC_MANA_CORE_AUTH_URL=$PUBLIC_MANA_CORE_AUTH_URL
+
+COPY apps/clock/packages/shared ./apps/clock/packages/shared
+COPY apps/clock/apps/web ./apps/clock/apps/web
+
+RUN --mount=type=cache,id=pnpm,target=/root/.local/share/pnpm/store \
+    pnpm install --no-frozen-lockfile --ignore-scripts
+
+WORKDIR /app/apps/clock/apps/web
+RUN pnpm exec svelte-kit sync
+RUN NODE_OPTIONS="--max-old-space-size=4096" pnpm build
+
+FROM node:20-alpine AS production
+WORKDIR /app/apps/clock/apps/web
+COPY --from=builder /app/node_modules/.pnpm /app/node_modules/.pnpm
+COPY --from=builder /app/apps/clock/apps/web/node_modules ./node_modules
+COPY --from=builder /app/apps/clock/apps/web/build ./build
+COPY --from=builder /app/apps/clock/apps/web/package.json ./
+
+EXPOSE 5013
+ENV NODE_ENV=production PORT=5013 HOST=0.0.0.0
+
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:5013/health || exit 1
+
+CMD ["node", "build"]
--- a/apps-archived/clock/apps/web/package.json
+++ b/apps-archived/clock/apps/web/package.json
@ -0,0 +1,66 @@
+{
+	"name": "@clock/web",
+	"version": "0.2.0",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"format": "prettier --write .",
+		"type-check": "svelte-kit sync && svelte-check --threshold error"
+	},
+	"devDependencies": {
+		"@manacore/shared-pwa": "workspace:*",
+		"@manacore/shared-vite-config": "workspace:*",
+		"@sveltejs/adapter-node": "^5.0.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.1.7",
+		"@types/d3": "^7.4.3",
+		"@types/node": "^20.0.0",
+		"@types/topojson-client": "^3.1.5",
+		"@types/topojson-specification": "^1.0.5",
+		"@vite-pwa/sveltekit": "^1.1.0",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"svelte": "^5.41.0",
+		"svelte-check": "^4.3.3",
+		"tailwindcss": "^4.1.7",
+		"tslib": "^2.4.1",
+		"typescript": "^5.9.3",
+		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"@clock/shared": "workspace:*",
+		"@manacore/local-store": "workspace:*",
+		"@manacore/shared-api-client": "workspace:*",
+		"@manacore/shared-app-onboarding": "workspace:*",
+		"@manacore/shared-auth": "workspace:*",
+		"@manacore/shared-auth-stores": "workspace:*",
+		"@manacore/shared-auth-ui": "workspace:*",
+		"@manacore/shared-branding": "workspace:*",
+		"@manacore/shared-error-tracking": "workspace:*",
+		"@manacore/feedback": "workspace:*",
+		"@manacore/shared-i18n": "workspace:*",
+		"@manacore/help": "workspace:*",
+		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-profile-ui": "workspace:*",
+		"@manacore/shared-stores": "workspace:*",
+		"@manacore/shared-tags": "workspace:*",
+		"@manacore/subscriptions": "workspace:*",
+		"@manacore/shared-tailwind": "workspace:*",
+		"@manacore/shared-theme": "workspace:*",
+		"@manacore/shared-theme-ui": "workspace:*",
+		"@manacore/shared-ui": "workspace:*",
+		"@manacore/shared-utils": "workspace:*",
+		"d3": "^7.9.0",
+		"svelte-dnd-action": "^0.9.68",
+		"svelte-i18n": "^4.0.1",
+		"topojson-client": "^3.1.0"
+	},
+	"type": "module"
+}
--- a/apps-archived/clock/apps/web/src/app.css
+++ b/apps-archived/clock/apps/web/src/app.css
@ -0,0 +1,10 @@
+@import "tailwindcss";
+@import "@manacore/shared-tailwind/themes.css";
+
+/* Scan shared packages for Tailwind classes */
+@source "../../../../packages/shared-ui/src";
+@source "../../../../packages/shared-auth-ui/src";
+@source "../../../../packages/shared-branding/src";
+@source "../../../../packages/shared-theme-ui/src";
+@source "../../../../packages/shared-theme-ui/src/components";
+@source "../../../../packages/shared-theme-ui/src/pages";
--- a/apps-archived/clock/apps/web/src/app.d.ts
+++ b/apps-archived/clock/apps/web/src/app.d.ts
@ -0,0 +1,2 @@
+declare const __BUILD_HASH__: string;
+declare const __BUILD_TIME__: string;
--- a/apps-archived/clock/apps/web/src/app.html
+++ b/apps-archived/clock/apps/web/src/app.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/apps-archived/clock/apps/web/src/hooks.client.ts
+++ b/apps-archived/clock/apps/web/src/hooks.client.ts
@ -0,0 +1,12 @@
+import { initErrorTracking, handleSvelteError } from '@manacore/shared-error-tracking/browser';
+import type { HandleClientError } from '@sveltejs/kit';
+
+initErrorTracking({
+	serviceName: 'clock-web',
+	dsn: (window as any).__PUBLIC_GLITCHTIP_DSN__,
+	environment: import.meta.env.MODE,
+});
+
+export const handleError: HandleClientError = ({ error }) => {
+	handleSvelteError(error);
+};
--- a/apps-archived/clock/apps/web/src/hooks.server.ts
+++ b/apps-archived/clock/apps/web/src/hooks.server.ts
@ -0,0 +1,28 @@
+import type { Handle } from '@sveltejs/kit';
+import { injectUmamiAnalytics } from '@manacore/shared-utils/analytics-server';
+import { setSecurityHeaders } from '@manacore/shared-utils/security-headers';
+
+const PUBLIC_MANA_CORE_AUTH_URL_CLIENT =
+	process.env.PUBLIC_MANA_CORE_AUTH_URL_CLIENT || process.env.PUBLIC_MANA_CORE_AUTH_URL || '';
+const PUBLIC_BACKEND_URL_CLIENT =
+	process.env.PUBLIC_BACKEND_URL_CLIENT || process.env.PUBLIC_BACKEND_URL || '';
+const PUBLIC_GLITCHTIP_DSN = process.env.PUBLIC_GLITCHTIP_DSN || '';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event, {
+		transformPageChunk: ({ html }) => {
+			const envScript = `<script>
+window.__PUBLIC_MANA_CORE_AUTH_URL__ = ${JSON.stringify(PUBLIC_MANA_CORE_AUTH_URL_CLIENT)};
+window.__PUBLIC_BACKEND_URL__ = ${JSON.stringify(PUBLIC_BACKEND_URL_CLIENT)};
+window.__PUBLIC_GLITCHTIP_DSN__ = ${JSON.stringify(PUBLIC_GLITCHTIP_DSN)};
+</script>`;
+			return injectUmamiAnalytics(html.replace('<head>', `<head>${envScript}`));
+		},
+	});
+
+	setSecurityHeaders(response, {
+		connectSrc: [PUBLIC_MANA_CORE_AUTH_URL_CLIENT, PUBLIC_BACKEND_URL_CLIENT],
+	});
+
+	return response;
+};
--- a/apps-archived/clock/apps/web/src/lib/api/alarms.ts
+++ b/apps-archived/clock/apps/web/src/lib/api/alarms.ts
@ -0,0 +1,15 @@
+/**
+ * Alarms API - Direct API calls for alarms
+ */
+
+import { api } from './client';
+import type { Alarm, CreateAlarmInput, UpdateAlarmInput } from '@clock/shared';
+
+export const alarmsApi = {
+	getAll: () => api.get<Alarm[]>('/alarms'),
+	getById: (id: string) => api.get<Alarm>(`/alarms/${id}`),
+	create: (input: CreateAlarmInput) => api.post<Alarm>('/alarms', input),
+	update: (id: string, input: UpdateAlarmInput) => api.patch<Alarm>(`/alarms/${id}`, input),
+	delete: (id: string) => api.delete(`/alarms/${id}`),
+	toggle: (id: string) => api.post<Alarm>(`/alarms/${id}/toggle`),
+};
--- a/apps-archived/clock/apps/web/src/lib/api/client.ts
+++ b/apps-archived/clock/apps/web/src/lib/api/client.ts
@ -0,0 +1,26 @@
+/**
+ * API Client for Clock backend
+ * Uses @manacore/shared-api-client for consistent error handling
+ */
+
+import { createApiClient, type ApiResult } from '@manacore/shared-api-client';
+import { authStore } from '$lib/stores/auth.svelte';
+
+const API_URL = 'http://localhost:3017';
+
+/**
+ * Clock API client instance
+ * - Auto token handling via authStore.getValidToken()
+ * - Consistent ApiResult<T> response format
+ * - Automatic retry on server errors (configurable)
+ */
+export const api = createApiClient({
+	baseUrl: API_URL,
+	apiPrefix: '/api/v1',
+	getAuthToken: () => authStore.getValidToken(),
+	timeout: 30000,
+	debug: import.meta.env.DEV,
+});
+
+// Re-export types for convenience
+export type { ApiResult };
--- a/apps-archived/clock/apps/web/src/lib/api/timers.ts
+++ b/apps-archived/clock/apps/web/src/lib/api/timers.ts
@ -0,0 +1,17 @@
+/**
+ * Timers API - Direct API calls for timers
+ */
+
+import { api } from './client';
+import type { Timer, CreateTimerInput, UpdateTimerInput } from '@clock/shared';
+
+export const timersApi = {
+	getAll: () => api.get<Timer[]>('/timers'),
+	getById: (id: string) => api.get<Timer>(`/timers/${id}`),
+	create: (input: CreateTimerInput) => api.post<Timer>('/timers', input),
+	update: (id: string, input: UpdateTimerInput) => api.patch<Timer>(`/timers/${id}`, input),
+	delete: (id: string) => api.delete(`/timers/${id}`),
+	start: (id: string) => api.post<Timer>(`/timers/${id}/start`),
+	pause: (id: string) => api.post<Timer>(`/timers/${id}/pause`),
+	reset: (id: string) => api.post<Timer>(`/timers/${id}/reset`),
+};
--- a/apps-archived/clock/apps/web/src/lib/components/AuthGateModal.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/AuthGateModal.svelte
@ -0,0 +1,226 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+
+	type Props = {
+		open: boolean;
+		action?: 'save' | 'sync' | 'feature';
+		itemCount?: number;
+		onClose: () => void;
+	};
+
+	let { open, action = 'save', itemCount = 0, onClose }: Props = $props();
+
+	// Messages based on action type
+	const messages = {
+		save: {
+			title: 'Daten speichern',
+			description: 'Melde dich an, um deine Wecker und Timer dauerhaft in der Cloud zu speichern.',
+		},
+		sync: {
+			title: 'Daten synchronisieren',
+			description: 'Melde dich an, um deine Wecker und Timer auf allen Geräten zu synchronisieren.',
+		},
+		feature: {
+			title: 'Funktion freischalten',
+			description: 'Diese Funktion ist nur für angemeldete Benutzer verfügbar.',
+		},
+	};
+
+	const currentMessage = $derived(messages[action] || messages.save);
+
+	function handleLogin() {
+		if (browser) {
+			sessionStorage.setItem('auth-return-url', window.location.pathname);
+		}
+		goto('/login');
+	}
+
+	function handleRegister() {
+		if (browser) {
+			sessionStorage.setItem('auth-return-url', window.location.pathname);
+		}
+		goto('/register');
+	}
+</script>
+
+{#if open}
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={onClose}>
+		<div class="modal-content" onclick={(e) => e.stopPropagation()}>
+			<div class="modal-header">
+				<h2>{currentMessage.title}</h2>
+				<button class="close-btn" onclick={onClose} aria-label="Schliessen">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<line x1="18" y1="6" x2="6" y2="18"></line>
+						<line x1="6" y1="6" x2="18" y2="18"></line>
+					</svg>
+				</button>
+			</div>
+
+			<div class="modal-body">
+				<p>{currentMessage.description}</p>
+
+				{#if itemCount > 0}
+					<div class="migration-info">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="20"
+							height="20"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<circle cx="12" cy="12" r="10"></circle>
+							<line x1="12" y1="16" x2="12" y2="12"></line>
+							<line x1="12" y1="8" x2="12.01" y2="8"></line>
+						</svg>
+						<span
+							>Du hast {itemCount}
+							{itemCount === 1 ? 'Element' : 'Elemente'} in deiner Session. Diese werden nach der Anmeldung
+							in deinen Account übertragen.</span
+						>
+					</div>
+				{/if}
+			</div>
+
+			<div class="modal-actions">
+				<button class="btn btn-secondary" onclick={onClose}> Später </button>
+				<button class="btn btn-primary" onclick={handleLogin}> Anmelden </button>
+				<button class="btn btn-outline" onclick={handleRegister}> Registrieren </button>
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.modal-backdrop {
+		position: fixed;
+		inset: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 100;
+		padding: 1rem;
+	}
+
+	.modal-content {
+		background-color: var(--color-surface-elevated-2);
+		border: 1px solid var(--color-border-strong);
+		border-radius: 0.75rem;
+		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+		max-width: 28rem;
+		width: 100%;
+		padding: 1.5rem;
+	}
+
+	.modal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 1rem;
+	}
+
+	.modal-header h2 {
+		font-size: 1.25rem;
+		font-weight: 600;
+		color: var(--color-foreground, #1f2937);
+		margin: 0;
+	}
+
+	.close-btn {
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem;
+		color: var(--color-muted-foreground, #6b7280);
+		border-radius: 0.375rem;
+		transition: color 0.15s;
+	}
+
+	.close-btn:hover {
+		color: var(--color-foreground, #1f2937);
+	}
+
+	.modal-body {
+		margin-bottom: 1.5rem;
+	}
+
+	.modal-body p {
+		color: var(--color-muted-foreground, #6b7280);
+		margin: 0 0 1rem 0;
+		line-height: 1.5;
+	}
+
+	.migration-info {
+		display: flex;
+		gap: 0.75rem;
+		padding: 0.75rem;
+		background-color: var(--color-primary-50, #fef3c7);
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		color: var(--color-primary-700, #b45309);
+	}
+
+	.migration-info svg {
+		flex-shrink: 0;
+		margin-top: 0.125rem;
+	}
+
+	.modal-actions {
+		display: flex;
+		gap: 0.75rem;
+		flex-wrap: wrap;
+	}
+
+	.btn {
+		padding: 0.625rem 1rem;
+		border-radius: 0.5rem;
+		font-weight: 500;
+		font-size: 0.875rem;
+		cursor: pointer;
+		transition: all 0.15s;
+		border: 1px solid transparent;
+	}
+
+	.btn-primary {
+		background-color: var(--color-primary, #f59e0b);
+		color: white;
+		flex: 1;
+	}
+
+	.btn-primary:hover {
+		background-color: var(--color-primary-600, #d97706);
+	}
+
+	.btn-secondary {
+		background-color: var(--color-muted, #f3f4f6);
+		color: var(--color-muted-foreground, #6b7280);
+	}
+
+	.btn-secondary:hover {
+		background-color: var(--color-muted-200, #e5e7eb);
+	}
+
+	.btn-outline {
+		background-color: transparent;
+		border-color: var(--color-border, #e5e7eb);
+		color: var(--color-foreground, #1f2937);
+	}
+
+	.btn-outline:hover {
+		background-color: var(--color-muted, #f3f4f6);
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/WorldMap.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/WorldMap.svelte
@ -0,0 +1,111 @@
+<script lang="ts">
+	/**
+	 * WorldMap - Interactive world map component for world clock
+	 */
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+	import { POPULAR_TIMEZONES } from '@clock/shared';
+
+	interface Props {
+		selectedTimezones?: string[];
+		onCityClick?: (timezone: string, cityName: string) => void;
+	}
+
+	let { selectedTimezones = [], onCityClick }: Props = $props();
+
+	let mapContainer: HTMLDivElement;
+	let mapLoaded = $state(false);
+
+	// Get cities from popular timezones
+	const cities = POPULAR_TIMEZONES.map((tz) => ({
+		timezone: tz.timezone,
+		city: tz.city,
+		lat: tz.lat,
+		lng: tz.lng,
+	}));
+
+	function handleCityClick(timezone: string, cityName: string) {
+		onCityClick?.(timezone, cityName);
+	}
+
+	onMount(() => {
+		if (browser) {
+			mapLoaded = true;
+		}
+	});
+</script>
+
+<div class="world-map" bind:this={mapContainer}>
+	{#if mapLoaded}
+		<div class="map-placeholder">
+			<svg viewBox="0 0 800 400" class="map-svg">
+				<!-- Simple world outline -->
+				<rect x="0" y="0" width="800" height="400" fill="hsl(var(--muted))" opacity="0.3" />
+
+				<!-- City markers -->
+				{#each cities as city}
+					{@const x = ((city.lng + 180) / 360) * 800}
+					{@const y = ((90 - city.lat) / 180) * 400}
+					{@const isSelected = selectedTimezones.includes(city.timezone)}
+					<g class="city-marker" onclick={() => handleCityClick(city.timezone, city.city)}>
+						<circle
+							cx={x}
+							cy={y}
+							r={isSelected ? 8 : 5}
+							fill={isSelected ? 'hsl(var(--primary))' : 'hsl(var(--muted-foreground))'}
+							class="cursor-pointer hover:opacity-80 transition-all"
+						/>
+						{#if isSelected}
+							<text
+								{x}
+								y={y - 12}
+								text-anchor="middle"
+								font-size="10"
+								fill="hsl(var(--foreground))"
+								class="pointer-events-none"
+							>
+								{city.city}
+							</text>
+						{/if}
+					</g>
+				{/each}
+			</svg>
+		</div>
+	{:else}
+		<div class="map-loading">
+			<span class="text-muted-foreground">Karte wird geladen...</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.world-map {
+		width: 100%;
+		height: 300px;
+		background: hsl(var(--card));
+		border-radius: 12px;
+		overflow: hidden;
+		border: 1px solid hsl(var(--border));
+	}
+
+	.map-placeholder {
+		width: 100%;
+		height: 100%;
+	}
+
+	.map-svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.city-marker {
+		cursor: pointer;
+	}
+
+	.map-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/life-clock/CircularProgress.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/life-clock/CircularProgress.svelte
@ -0,0 +1,204 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		daysLived: number;
+		lifeExpectancyYears?: number;
+		size?: number;
+	}
+
+	let { daysLived, lifeExpectancyYears = 80, size = 280 }: Props = $props();
+
+	// Calculate progress
+	let totalDays = $derived(Math.ceil(lifeExpectancyYears * 365.25));
+	let percentage = $derived(Math.min((daysLived / totalDays) * 100, 100));
+	let remainingDays = $derived(Math.max(totalDays - daysLived, 0));
+
+	// SVG calculations
+	let strokeWidth = 12;
+	let radius = $derived((size - strokeWidth) / 2);
+	let circumference = $derived(2 * Math.PI * radius);
+	let dashOffset = $derived(circumference - (percentage / 100) * circumference);
+
+	// Animation
+	let animatedOffset = $state(circumference);
+	let mounted = $state(false);
+
+	onMount(() => {
+		mounted = true;
+		// Animate on mount
+		requestAnimationFrame(() => {
+			animatedOffset = dashOffset;
+		});
+	});
+
+	// Update animation when values change
+	$effect(() => {
+		if (mounted) {
+			animatedOffset = dashOffset;
+		}
+	});
+</script>
+
+<div class="circular-container">
+	<div class="circular-wrapper" style="width: {size}px; height: {size}px;">
+		<svg width={size} height={size} viewBox="0 0 {size} {size}" class="circular-svg">
+			<!-- Background circle -->
+			<circle
+				cx={size / 2}
+				cy={size / 2}
+				r={radius}
+				fill="none"
+				stroke="hsl(var(--color-muted-foreground) / 0.15)"
+				stroke-width={strokeWidth}
+			/>
+
+			<!-- Progress circle -->
+			<circle
+				cx={size / 2}
+				cy={size / 2}
+				r={radius}
+				fill="none"
+				stroke="hsl(var(--color-primary))"
+				stroke-width={strokeWidth}
+				stroke-linecap="round"
+				stroke-dasharray={circumference}
+				stroke-dashoffset={animatedOffset}
+				transform="rotate(-90 {size / 2} {size / 2})"
+				class="progress-circle"
+			/>
+
+			<!-- Markers for decades -->
+			{#each Array(8) as _, i}
+				{@const angle = (i / 8) * 360 - 90}
+				{@const markerRadius = radius + strokeWidth / 2 + 8}
+				{@const x = size / 2 + markerRadius * Math.cos((angle * Math.PI) / 180)}
+				{@const y = size / 2 + markerRadius * Math.sin((angle * Math.PI) / 180)}
+				<text {x} {y} text-anchor="middle" dominant-baseline="middle" class="decade-marker">
+					{i * 10}
+				</text>
+			{/each}
+		</svg>
+
+		<!-- Center content -->
+		<div class="center-content">
+			<span class="percentage">{percentage.toFixed(1)}%</span>
+			<span class="label">gelebt</span>
+		</div>
+	</div>
+
+	<div class="circular-stats">
+		<div class="stat-row">
+			<div class="stat">
+				<span class="stat-value lived">{daysLived.toLocaleString('de-DE')}</span>
+				<span class="stat-label">Tage gelebt</span>
+			</div>
+			<div class="stat-divider"></div>
+			<div class="stat">
+				<span class="stat-value remaining">{remainingDays.toLocaleString('de-DE')}</span>
+				<span class="stat-label">Tage verbleibend</span>
+			</div>
+		</div>
+		<p class="expectancy-note">Basierend auf {lifeExpectancyYears} Jahren Lebenserwartung</p>
+	</div>
+</div>
+
+<style>
+	.circular-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 1.5rem;
+	}
+
+	.circular-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.circular-svg {
+		transform: rotate(0deg);
+	}
+
+	.progress-circle {
+		transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.decade-marker {
+		font-size: 0.625rem;
+		fill: hsl(var(--color-muted-foreground));
+		font-weight: 500;
+	}
+
+	.center-content {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.percentage {
+		font-size: 2.5rem;
+		font-weight: 200;
+		color: hsl(var(--color-foreground));
+		line-height: 1;
+	}
+
+	.label {
+		font-size: 0.875rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 0.25rem;
+	}
+
+	.circular-stats {
+		text-align: center;
+	}
+
+	.stat-row {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 1.5rem;
+	}
+
+	.stat {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.stat-divider {
+		width: 1px;
+		height: 2.5rem;
+		background: hsl(var(--color-border));
+	}
+
+	.stat-value {
+		font-size: 1.25rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.stat-value.lived {
+		color: hsl(var(--color-primary));
+	}
+
+	.stat-value.remaining {
+		color: hsl(var(--color-muted-foreground));
+	}
+
+	.stat-label {
+		font-size: 0.75rem;
+		color: hsl(var(--color-muted-foreground));
+		margin-top: 0.125rem;
+	}
+
+	.expectancy-note {
+		font-size: 0.625rem;
+		color: hsl(var(--color-muted-foreground) / 0.7);
+		margin-top: 0.75rem;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/skeletons/AlarmsSkeleton.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/skeletons/AlarmsSkeleton.svelte
@ -0,0 +1,71 @@
+<script lang="ts">
+	/**
+	 * AlarmsSkeleton - Loading skeleton for alarms page
+	 */
+	import { SkeletonBox } from '@manacore/shared-ui';
+</script>
+
+<div class="alarms-skeleton" role="status" aria-label="Alarme werden geladen...">
+	<!-- Presets section -->
+	<div class="presets-grid">
+		{#each Array(6) as _, i}
+			<div class="preset-item" style="opacity: {Math.max(0.4, 1 - i * 0.1)};">
+				<SkeletonBox width="100%" height="64px" borderRadius="12px" />
+			</div>
+		{/each}
+	</div>
+
+	<!-- Alarm list -->
+	<div class="alarm-list">
+		{#each Array(3) as _, i}
+			<div class="alarm-item" style="opacity: {Math.max(0.4, 1 - i * 0.15)};">
+				<div class="alarm-content">
+					<SkeletonBox width="80px" height="32px" />
+					<SkeletonBox width="120px" height="16px" />
+				</div>
+				<SkeletonBox width="48px" height="24px" borderRadius="12px" />
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.alarms-skeleton {
+		padding: 1rem;
+	}
+
+	.presets-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 0.75rem;
+		margin-bottom: 2rem;
+	}
+
+	.alarm-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.alarm-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem;
+		background: hsl(var(--card));
+		border: 1px solid hsl(var(--border));
+		border-radius: 12px;
+	}
+
+	.alarm-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	@media (max-width: 640px) {
+		.presets-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/skeletons/AppLoadingSkeleton.svelte
@ -0,0 +1,90 @@
+<script lang="ts">
+	/**
+	 * AppLoadingSkeleton - Full page loading skeleton for initial app load
+	 * Shows a minimal skeleton layout while auth is being checked
+	 */
+
+	import { SkeletonBox } from '@manacore/shared-ui';
+</script>
+
+<div class="app-loading-skeleton" role="status" aria-label="App wird geladen...">
+	<!-- Header placeholder -->
+	<div class="header-skeleton">
+		<SkeletonBox width="120px" height="32px" borderRadius="8px" />
+		<div class="header-nav">
+			<SkeletonBox width="80px" height="32px" borderRadius="16px" />
+			<SkeletonBox width="80px" height="32px" borderRadius="16px" />
+		</div>
+		<SkeletonBox width="36px" height="36px" borderRadius="50%" />
+	</div>
+
+	<!-- Content placeholder - Clock specific -->
+	<div class="content-skeleton">
+		<!-- Clock display placeholder -->
+		<div class="clock-placeholder">
+			<SkeletonBox width="300px" height="300px" borderRadius="50%" />
+		</div>
+
+		<!-- Controls placeholder -->
+		<div class="controls-placeholder">
+			<SkeletonBox width="200px" height="48px" borderRadius="12px" />
+		</div>
+	</div>
+</div>
+
+<style>
+	.app-loading-skeleton {
+		min-height: 100vh;
+		background: hsl(var(--background));
+	}
+
+	.header-skeleton {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem 2rem;
+		border-bottom: 1px solid hsl(var(--border));
+	}
+
+	.header-nav {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.content-skeleton {
+		max-width: 80rem;
+		margin: 0 auto;
+		padding: 2rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: calc(100vh - 80px);
+		gap: 2rem;
+	}
+
+	.clock-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.controls-placeholder {
+		display: flex;
+		gap: 1rem;
+	}
+
+	@media (max-width: 768px) {
+		.header-nav {
+			display: none;
+		}
+
+		.header-skeleton {
+			padding: 1rem;
+		}
+
+		.content-skeleton {
+			padding: 1rem;
+		}
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/skeletons/TimersSkeleton.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/skeletons/TimersSkeleton.svelte
@ -0,0 +1,85 @@
+<script lang="ts">
+	/**
+	 * TimersSkeleton - Loading skeleton for timers page
+	 */
+	import { SkeletonBox } from '@manacore/shared-ui';
+</script>
+
+<div class="timers-skeleton" role="status" aria-label="Timer werden geladen...">
+	<!-- Quick presets -->
+	<div class="presets-row">
+		{#each Array(4) as _, i}
+			<SkeletonBox width="80px" height="40px" borderRadius="20px" />
+		{/each}
+	</div>
+
+	<!-- Timer form -->
+	<div class="timer-form">
+		<SkeletonBox width="100%" height="80px" borderRadius="12px" />
+		<SkeletonBox width="120px" height="44px" borderRadius="8px" />
+	</div>
+
+	<!-- Active timers -->
+	<div class="timers-list">
+		{#each Array(2) as _, i}
+			<div class="timer-item" style="opacity: {Math.max(0.4, 1 - i * 0.2)};">
+				<div class="timer-display">
+					<SkeletonBox width="150px" height="40px" />
+					<SkeletonBox width="80px" height="16px" />
+				</div>
+				<div class="timer-controls">
+					<SkeletonBox width="44px" height="44px" borderRadius="50%" />
+					<SkeletonBox width="44px" height="44px" borderRadius="50%" />
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.timers-skeleton {
+		padding: 1rem;
+	}
+
+	.presets-row {
+		display: flex;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+		margin-bottom: 1.5rem;
+	}
+
+	.timer-form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+		margin-bottom: 2rem;
+	}
+
+	.timers-list {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.timer-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.5rem;
+		background: hsl(var(--card));
+		border: 1px solid hsl(var(--border));
+		border-radius: 16px;
+	}
+
+	.timer-display {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.timer-controls {
+		display: flex;
+		gap: 0.75rem;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/skeletons/WorldClockSkeleton.svelte
+++ b/apps-archived/clock/apps/web/src/lib/components/skeletons/WorldClockSkeleton.svelte
@ -0,0 +1,58 @@
+<script lang="ts">
+	/**
+	 * WorldClockSkeleton - Loading skeleton for world clock page
+	 */
+	import { SkeletonBox } from '@manacore/shared-ui';
+</script>
+
+<div class="world-clock-skeleton" role="status" aria-label="Weltuhren werden geladen...">
+	<!-- Map skeleton -->
+	<div class="map-skeleton">
+		<SkeletonBox width="100%" height="300px" borderRadius="12px" />
+	</div>
+
+	<!-- Clock list -->
+	<div class="clocks-list">
+		{#each Array(4) as _, i}
+			<div class="clock-item" style="opacity: {Math.max(0.4, 1 - i * 0.15)};">
+				<div class="clock-info">
+					<SkeletonBox width="120px" height="24px" />
+					<SkeletonBox width="80px" height="16px" />
+				</div>
+				<SkeletonBox width="100px" height="36px" />
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.world-clock-skeleton {
+		padding: 1rem;
+	}
+
+	.map-skeleton {
+		margin-bottom: 1.5rem;
+	}
+
+	.clocks-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.clock-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1rem;
+		background: hsl(var(--card));
+		border: 1px solid hsl(var(--border));
+		border-radius: 12px;
+	}
+
+	.clock-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/lib/components/skeletons/index.ts
+++ b/apps-archived/clock/apps/web/src/lib/components/skeletons/index.ts
@ -0,0 +1,13 @@
+/**
+ * Clock App Skeleton Components
+ *
+ * App-specific skeleton loaders for loading states.
+ */
+
+// App Loading Skeleton
+export { default as AppLoadingSkeleton } from './AppLoadingSkeleton.svelte';
+
+// Feature Skeletons
+export { default as AlarmsSkeleton } from './AlarmsSkeleton.svelte';
+export { default as TimersSkeleton } from './TimersSkeleton.svelte';
+export { default as WorldClockSkeleton } from './WorldClockSkeleton.svelte';
--- a/apps-archived/clock/apps/web/src/lib/content/help/index.test.ts
+++ b/apps-archived/clock/apps/web/src/lib/content/help/index.test.ts
@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+import { getClockHelpContent } from './index';
+
+describe('Clock Help Content', () => {
+	it('returns valid German content', () => {
+		const content = getClockHelpContent('de');
+
+		expect(content.faq.length).toBeGreaterThan(0);
+		content.faq.forEach((faq) => {
+			expect(faq.id).toBeTruthy();
+			expect(faq.question).toBeTruthy();
+			expect(faq.answer).toBeTruthy();
+		});
+
+		expect(content.features).toBeDefined();
+		expect(content.contact).toBeDefined();
+		expect(content.contact.supportEmail).toBe('support@mana.how');
+	});
+
+	it('returns valid English content', () => {
+		const content = getClockHelpContent('en');
+
+		expect(content.faq.length).toBeGreaterThan(0);
+		content.faq.forEach((faq) => {
+			expect(faq.id).toBeTruthy();
+			expect(faq.question).toBeTruthy();
+			expect(faq.answer).toBeTruthy();
+		});
+
+		expect(content.features).toBeDefined();
+		expect(content.contact).toBeDefined();
+	});
+
+	it('returns same number of FAQ items for both languages', () => {
+		const de = getClockHelpContent('de');
+		const en = getClockHelpContent('en');
+
+		expect(de.faq.length).toBe(en.faq.length);
+		expect(de.features.length).toBe(en.features.length);
+	});
+
+	it('has unique FAQ IDs', () => {
+		const content = getClockHelpContent('de');
+		const ids = content.faq.map((f) => f.id);
+		expect(new Set(ids).size).toBe(ids.length);
+	});
+});
--- a/apps-archived/clock/apps/web/src/lib/content/help/index.ts
+++ b/apps-archived/clock/apps/web/src/lib/content/help/index.ts
@ -0,0 +1,215 @@
+/**
+ * Help content for Clock app
+ */
+
+import type { HelpContent } from '@manacore/help';
+import { getPrivacyFAQs } from '@manacore/help';
+
+export function getClockHelpContent(locale: string): HelpContent {
+	const isDE = locale === 'de';
+
+	return {
+		faq: [
+			{
+				id: 'faq-create-alarms',
+				question: isDE ? 'Wie erstelle ich Wecker?' : 'How do I create alarms?',
+				answer: isDE
+					? '<p>Du kannst Wecker auf verschiedene Arten erstellen:</p><ul><li><strong>Schnellwecker</strong>: Drücke <kbd>A</kbd> oder klicke auf das + Symbol im Wecker-Tab</li><li><strong>Uhrzeit wählen</strong>: Stelle Stunde und Minute ein und wähle die gewünschten Wochentage</li><li><strong>Label</strong>: Gib deinem Wecker einen Namen, z.B. "Morgenroutine"</li><li><strong>Klingelton</strong>: Wähle aus verschiedenen Tönen oder nutze einen sanften Weckton</li></ul>'
+					: '<p>You can create alarms in several ways:</p><ul><li><strong>Quick alarm</strong>: Press <kbd>A</kbd> or click the + icon in the Alarms tab</li><li><strong>Set time</strong>: Choose hour and minute and select the desired weekdays</li><li><strong>Label</strong>: Give your alarm a name, e.g. "Morning routine"</li><li><strong>Ringtone</strong>: Choose from various sounds or use a gentle wake-up tone</li></ul>',
+				category: 'features',
+				order: 1,
+				language: isDE ? 'de' : 'en',
+				tags: isDE ? ['wecker', 'erstellen', 'neu'] : ['alarm', 'create', 'new'],
+			},
+			{
+				id: 'faq-timers',
+				question: isDE
+					? 'Wie funktionieren Timer und Stoppuhr?'
+					: 'How do timers and the stopwatch work?',
+				answer: isDE
+					? '<p>Clock bietet zwei Zeitmesser:</p><ul><li><strong>Timer</strong>: Stelle eine Countdown-Zeit ein und starte ihn. Du kannst mehrere Timer gleichzeitig laufen lassen. Drücke <kbd>T</kbd> für einen neuen Timer.</li><li><strong>Stoppuhr</strong>: Messe verstrichene Zeit mit Rundenzeiten. Starte, pausiere und setze zurück.</li></ul><p>Beide laufen auch im Hintergrund weiter und benachrichtigen dich, wenn die Zeit abgelaufen ist.</p>'
+					: '<p>Clock offers two time measurement tools:</p><ul><li><strong>Timer</strong>: Set a countdown duration and start it. You can run multiple timers simultaneously. Press <kbd>T</kbd> for a new timer.</li><li><strong>Stopwatch</strong>: Measure elapsed time with lap splits. Start, pause, and reset.</li></ul><p>Both continue running in the background and notify you when time is up.</p>',
+				category: 'features',
+				order: 2,
+				language: isDE ? 'de' : 'en',
+				tags: isDE ? ['timer', 'stoppuhr', 'countdown'] : ['timer', 'stopwatch', 'countdown'],
+			},
+			{
+				id: 'faq-pomodoro',
+				question: isDE ? 'Was ist die Pomodoro-Technik?' : 'What is the Pomodoro technique?',
+				answer: isDE
+					? '<p>Die <strong>Pomodoro-Technik</strong> ist eine Zeitmanagement-Methode:</p><ol><li>Arbeite <strong>25 Minuten</strong> konzentriert (ein "Pomodoro")</li><li>Mache eine <strong>5-Minuten-Pause</strong></li><li>Nach 4 Pomodoros: <strong>15-30 Minuten</strong> längere Pause</li></ol><p>In Clock kannst du die Intervalle anpassen, deinen Fortschritt verfolgen und Statistiken über deine Produktivität einsehen.</p>'
+					: '<p>The <strong>Pomodoro technique</strong> is a time management method:</p><ol><li>Work for <strong>25 minutes</strong> with focus (one "Pomodoro")</li><li>Take a <strong>5-minute break</strong></li><li>After 4 Pomodoros: take a <strong>15-30 minute</strong> longer break</li></ol><p>In Clock you can customize the intervals, track your progress, and view statistics about your productivity.</p>',
+				category: 'features',
+				order: 3,
+				language: isDE ? 'de' : 'en',
+				tags: isDE
+					? ['pomodoro', 'produktivität', 'fokus', 'technik']
+					: ['pomodoro', 'productivity', 'focus', 'technique'],
+			},
+			{
+				id: 'faq-life-clock',
+				question: isDE ? 'Was ist die Life Clock?' : 'What is the Life Clock?',
+				answer: isDE
+					? '<p>Die <strong>Life Clock</strong> ist eine einzigartige Visualisierung deiner Lebenszeit:</p><ul><li>Gib dein Geburtsdatum und deine geschätzte Lebenserwartung ein</li><li>Sieh, wie viel deiner Zeit bereits vergangen ist und wie viel noch vor dir liegt</li><li>Verschiedene Darstellungen: Wochen, Monate oder Jahre als Raster</li></ul><p>Die Life Clock soll dich motivieren, deine Zeit bewusst zu nutzen — keine Angst, sondern <strong>Inspiration</strong>.</p>'
+					: '<p>The <strong>Life Clock</strong> is a unique visualization of your lifetime:</p><ul><li>Enter your birth date and estimated life expectancy</li><li>See how much of your time has passed and how much lies ahead</li><li>Various display modes: weeks, months, or years as a grid</li></ul><p>The Life Clock is meant to motivate you to use your time mindfully — not fear, but <strong>inspiration</strong>.</p>',
+				category: 'features',
+				order: 4,
+				language: isDE ? 'de' : 'en',
+				tags: isDE
+					? ['life-clock', 'lebenszeit', 'visualisierung']
+					: ['life-clock', 'lifetime', 'visualization'],
+			},
+			...getPrivacyFAQs(locale, {
+				dataTypeDE: 'Daten',
+				dataTypeEN: 'data',
+				extraBulletsDE: [
+					'<strong>Lokale Speicherung</strong>: Wecker und Timer werden lokal auf deinem Gerät gespeichert',
+				],
+				extraBulletsEN: [
+					'<strong>Local storage</strong>: Alarms and timers are stored locally on your device',
+				],
+			}),
+		],
+		features: [
+			{
+				id: 'feature-alarms',
+				title: isDE ? 'Wecker' : 'Alarms',
+				description: isDE
+					? 'Erstelle wiederkehrende und einmalige Wecker mit individuellen Tönen'
+					: 'Create recurring and one-time alarms with custom sounds',
+				icon: '⏰',
+				category: 'core',
+				highlights: isDE
+					? ['Wiederkehrende Wecker', 'Individuelle Töne', 'Schlummerfunktion', 'Labels']
+					: ['Recurring alarms', 'Custom sounds', 'Snooze function', 'Labels'],
+				content: '',
+				order: 1,
+				language: isDE ? 'de' : 'en',
+			},
+			{
+				id: 'feature-timers-stopwatch',
+				title: isDE ? 'Timer & Stoppuhr' : 'Timers & Stopwatch',
+				description: isDE
+					? 'Mehrere gleichzeitige Timer und eine Stoppuhr mit Rundenzeiten'
+					: 'Multiple simultaneous timers and a stopwatch with lap times',
+				icon: '⏱️',
+				category: 'core',
+				highlights: isDE
+					? ['Mehrere Timer', 'Rundenzeiten', 'Hintergrund-Benachrichtigung', 'Voreinstellungen']
+					: ['Multiple timers', 'Lap times', 'Background notifications', 'Presets'],
+				content: '',
+				order: 2,
+				language: isDE ? 'de' : 'en',
+			},
+			{
+				id: 'feature-pomodoro',
+				title: 'Pomodoro',
+				description: isDE
+					? 'Steigere deine Produktivität mit der Pomodoro-Technik und Statistiken'
+					: 'Boost your productivity with the Pomodoro technique and statistics',
+				icon: '🍅',
+				category: 'advanced',
+				highlights: isDE
+					? ['Anpassbare Intervalle', 'Sitzungs-Tracking', 'Statistiken', 'Benachrichtigungen']
+					: ['Customizable intervals', 'Session tracking', 'Statistics', 'Notifications'],
+				content: '',
+				order: 3,
+				language: isDE ? 'de' : 'en',
+			},
+			{
+				id: 'feature-world-clock',
+				title: isDE ? 'Weltzeituhr' : 'World Clock',
+				description: isDE
+					? 'Behalte die Uhrzeit in verschiedenen Zeitzonen im Blick'
+					: 'Keep track of the time across different time zones',
+				icon: '🌍',
+				category: 'core',
+				highlights: isDE
+					? ['Alle Zeitzonen', 'Zeitvergleich', 'Favoriten', 'Analoges Zifferblatt']
+					: ['All time zones', 'Time comparison', 'Favorites', 'Analog clock face'],
+				content: '',
+				order: 4,
+				language: isDE ? 'de' : 'en',
+			},
+		],
+		shortcuts: [
+			{
+				id: 'shortcuts-general',
+				category: 'general',
+				title: isDE ? 'Allgemein' : 'General',
+				language: isDE ? 'de' : 'en',
+				order: 1,
+				shortcuts: [
+					{
+						shortcut: 'Cmd/Ctrl + K',
+						action: isDE ? 'Kommandoleiste öffnen' : 'Open command bar',
+					},
+					{
+						shortcut: 'A',
+						action: isDE ? 'Neuer Wecker' : 'New alarm',
+					},
+					{
+						shortcut: 'T',
+						action: isDE ? 'Neuer Timer' : 'New timer',
+					},
+				],
+			},
+			{
+				id: 'shortcuts-navigation',
+				category: 'navigation',
+				title: 'Navigation',
+				language: isDE ? 'de' : 'en',
+				order: 2,
+				shortcuts: [
+					{
+						shortcut: 'Cmd/Ctrl + 1',
+						action: isDE ? 'Wecker öffnen' : 'Open Alarms',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 2',
+						action: isDE ? 'Timer öffnen' : 'Open Timers',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 3',
+						action: isDE ? 'Stoppuhr öffnen' : 'Open Stopwatch',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 4',
+						action: isDE ? 'Pomodoro öffnen' : 'Open Pomodoro',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 5',
+						action: isDE ? 'Weltzeituhr öffnen' : 'Open World Clock',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 6',
+						action: isDE ? 'Life Clock öffnen' : 'Open Life Clock',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 7',
+						action: isDE ? 'Statistiken öffnen' : 'Open Statistics',
+					},
+					{
+						shortcut: 'Cmd/Ctrl + 8',
+						action: isDE ? 'Einstellungen öffnen' : 'Open Settings',
+					},
+				],
+			},
+		],
+		gettingStarted: [],
+		changelog: [],
+		contact: {
+			id: 'contact-support',
+			title: isDE ? 'Support kontaktieren' : 'Contact Support',
+			content: isDE
+				? '<p>Unser Support-Team hilft dir bei allen Fragen rund um Clock.</p>'
+				: '<p>Our support team is here to help you with any questions about Clock.</p>',
+			language: isDE ? 'de' : 'en',
+			order: 1,
+			supportEmail: 'support@mana.how',
+			documentationUrl: 'https://mana.how/docs',
+			responseTime: isDE ? 'Normalerweise innerhalb von 24 Stunden' : 'Usually within 24 hours',
+		},
+	};
+}
--- a/apps-archived/clock/apps/web/src/lib/data/guest-seed.ts
+++ b/apps-archived/clock/apps/web/src/lib/data/guest-seed.ts
@ -0,0 +1,36 @@
+/**
+ * Guest seed data for the Clock app.
+ *
+ * These records are loaded into IndexedDB when a new guest visits the app.
+ * They provide sample alarms and world clocks to showcase the app.
+ */
+
+import type { LocalAlarm, LocalWorldClock } from './local-store';
+
+export const guestAlarms: LocalAlarm[] = [
+	{
+		id: 'alarm-weekday-morning',
+		label: 'Wecker Wochentags',
+		time: '07:00',
+		enabled: true,
+		repeatDays: [1, 2, 3, 4, 5], // Mon-Fri
+		snoozeMinutes: 5,
+		sound: null,
+		vibrate: true,
+	},
+];
+
+export const guestWorldClocks: LocalWorldClock[] = [
+	{
+		id: 'wc-new-york',
+		timezone: 'America/New_York',
+		cityName: 'New York',
+		sortOrder: 0,
+	},
+	{
+		id: 'wc-tokyo',
+		timezone: 'Asia/Tokyo',
+		cityName: 'Tokio',
+		sortOrder: 1,
+	},
+];
--- a/apps-archived/clock/apps/web/src/lib/data/local-store.ts
+++ b/apps-archived/clock/apps/web/src/lib/data/local-store.ts
@ -0,0 +1,69 @@
+/**
+ * Clock App — Local-First Data Layer
+ *
+ * Defines the IndexedDB database, collections, and guest seed data.
+ * This is the single source of truth for all Clock data.
+ */
+
+import { createLocalStore, type BaseRecord } from '@manacore/local-store';
+import { guestAlarms, guestWorldClocks } from './guest-seed';
+
+// ─── Types ──────────────────────────────────────────────────
+
+export interface LocalAlarm extends BaseRecord {
+	label: string | null;
+	time: string; // HH:mm format
+	enabled: boolean;
+	repeatDays: number[] | null; // [0-6] where 0 = Sunday
+	snoozeMinutes: number | null;
+	sound: string | null;
+	vibrate: boolean | null;
+}
+
+export interface LocalTimer extends BaseRecord {
+	label: string | null;
+	durationSeconds: number;
+	remainingSeconds: number | null;
+	status: 'idle' | 'running' | 'paused' | 'finished';
+	startedAt: string | null;
+	pausedAt: string | null;
+	sound: string | null;
+}
+
+export interface LocalWorldClock extends BaseRecord {
+	timezone: string; // IANA timezone e.g. 'America/New_York'
+	cityName: string;
+	sortOrder: number;
+}
+
+// ─── Store ──────────────────────────────────────────────────
+
+const SYNC_SERVER_URL = import.meta.env.PUBLIC_SYNC_SERVER_URL || 'http://localhost:3050';
+
+export const clockStore = createLocalStore({
+	appId: 'clock',
+	collections: [
+		{
+			name: 'alarms',
+			indexes: ['enabled', 'time'],
+			guestSeed: guestAlarms,
+		},
+		{
+			name: 'timers',
+			indexes: ['status'],
+		},
+		{
+			name: 'worldClocks',
+			indexes: ['sortOrder', 'timezone'],
+			guestSeed: guestWorldClocks,
+		},
+	],
+	sync: {
+		serverUrl: SYNC_SERVER_URL,
+	},
+});
+
+// Typed collection accessors
+export const alarmCollection = clockStore.collection<LocalAlarm>('alarms');
+export const timerCollection = clockStore.collection<LocalTimer>('timers');
+export const worldClockCollection = clockStore.collection<LocalWorldClock>('worldClocks');
--- a/apps-archived/clock/apps/web/src/lib/data/queries.ts
+++ b/apps-archived/clock/apps/web/src/lib/data/queries.ts
@ -0,0 +1,106 @@
+/**
+ * Reactive Queries & Pure Helpers for Clock
+ *
+ * Uses Dexie liveQuery to automatically re-render when IndexedDB changes
+ * (local writes, sync updates, other tabs). Components call these hooks
+ * at init time; no manual fetch/refresh needed.
+ */
+
+import { useLiveQueryWithDefault } from '@manacore/local-store/svelte';
+import {
+	alarmCollection,
+	timerCollection,
+	worldClockCollection,
+	type LocalAlarm,
+	type LocalTimer,
+	type LocalWorldClock,
+} from './local-store';
+import type { Alarm, Timer, WorldClock } from '@clock/shared';
+
+// ─── Type Converters ───────────────────────────────────────
+
+export function toAlarm(local: LocalAlarm): Alarm {
+	return {
+		id: local.id,
+		userId: 'local',
+		label: local.label,
+		time: local.time,
+		enabled: local.enabled,
+		repeatDays: local.repeatDays,
+		snoozeMinutes: local.snoozeMinutes,
+		sound: local.sound,
+		vibrate: local.vibrate ?? null,
+		createdAt: local.createdAt ?? new Date().toISOString(),
+		updatedAt: local.updatedAt ?? new Date().toISOString(),
+	};
+}
+
+export function toTimer(local: LocalTimer): Timer {
+	return {
+		id: local.id,
+		userId: 'local',
+		label: local.label,
+		durationSeconds: local.durationSeconds,
+		remainingSeconds: local.remainingSeconds,
+		status: local.status,
+		startedAt: local.startedAt,
+		pausedAt: local.pausedAt,
+		sound: local.sound,
+		createdAt: local.createdAt ?? new Date().toISOString(),
+		updatedAt: local.updatedAt ?? new Date().toISOString(),
+	};
+}
+
+export function toWorldClock(local: LocalWorldClock): WorldClock {
+	return {
+		id: local.id,
+		userId: 'local',
+		timezone: local.timezone,
+		cityName: local.cityName,
+		sortOrder: local.sortOrder,
+		createdAt: local.createdAt ?? new Date().toISOString(),
+	};
+}
+
+// ─── Live Query Hooks (call during component init) ─────────
+
+/** All alarms, auto-updates on any change. */
+export function useAllAlarms() {
+	return useLiveQueryWithDefault(async () => {
+		const locals = await alarmCollection.getAll();
+		return locals.map(toAlarm);
+	}, [] as Alarm[]);
+}
+
+/** All timers, auto-updates on any change. */
+export function useAllTimers() {
+	return useLiveQueryWithDefault(async () => {
+		const locals = await timerCollection.getAll();
+		return locals.map(toTimer);
+	}, [] as Timer[]);
+}
+
+/** All world clocks, sorted by sortOrder. Auto-updates on any change. */
+export function useAllWorldClocks() {
+	return useLiveQueryWithDefault(async () => {
+		const locals = await worldClockCollection.getAll(undefined, {
+			sortBy: 'sortOrder',
+			sortDirection: 'asc',
+		});
+		return locals.map(toWorldClock);
+	}, [] as WorldClock[]);
+}
+
+// ─── Pure Filter Functions (for $derived) ──────────────────
+
+export function filterEnabledAlarms(alarms: Alarm[]): Alarm[] {
+	return alarms.filter((a) => a.enabled);
+}
+
+export function filterActiveTimers(timers: Timer[]): Timer[] {
+	return timers.filter((t) => t.status === 'running' || t.status === 'paused');
+}
+
+export function sortWorldClocksByOrder(clocks: WorldClock[]): WorldClock[] {
+	return [...clocks].sort((a, b) => a.sortOrder - b.sortOrder);
+}
--- a/apps-archived/clock/apps/web/src/lib/i18n/index.ts
+++ b/apps-archived/clock/apps/web/src/lib/i18n/index.ts
@ -0,0 +1,49 @@
+import { browser } from '$app/environment';
+import { init, register, locale, waitLocale } from 'svelte-i18n';
+
+// List of supported locales
+export const supportedLocales = ['de', 'en'] as const;
+export type SupportedLocale = (typeof supportedLocales)[number];
+
+// Default locale
+const defaultLocale = 'de';
+
+// Register all available locales
+register('de', () => import('./locales/de.json'));
+register('en', () => import('./locales/en.json'));
+
+// Get initial locale from browser or localStorage
+function getInitialLocale(): SupportedLocale {
+	if (browser) {
+		// Check localStorage first
+		const stored = localStorage.getItem('clock_locale');
+		if (stored && supportedLocales.includes(stored as SupportedLocale)) {
+			return stored as SupportedLocale;
+		}
+
+		// Fall back to browser language
+		const browserLang = navigator.language.split('-')[0];
+		if (supportedLocales.includes(browserLang as SupportedLocale)) {
+			return browserLang as SupportedLocale;
+		}
+	}
+
+	return defaultLocale;
+}
+
+// Initialize i18n at module scope (required for SSR)
+init({
+	fallbackLocale: defaultLocale,
+	initialLocale: getInitialLocale(),
+});
+
+// Set locale and persist to localStorage
+export function setLocale(newLocale: SupportedLocale) {
+	locale.set(newLocale);
+	if (browser) {
+		localStorage.setItem('clock_locale', newLocale);
+	}
+}
+
+// Wait for locale to be loaded (useful for SSR)
+export { waitLocale };
--- a/apps-archived/clock/apps/web/src/lib/i18n/locales/de.json
+++ b/apps-archived/clock/apps/web/src/lib/i18n/locales/de.json
@ -0,0 +1,23 @@
+{
+	"app": {
+		"name": "Clock"
+	},
+	"common": {
+		"back": "Zurück",
+		"cancel": "Abbrechen",
+		"loading": "Lade..."
+	},
+	"nav": {
+		"home": "Startseite",
+		"settings": "Einstellungen"
+	},
+	"clock": {
+		"title": "Life Clock",
+		"remaining": "Verbleibende Zeit",
+		"elapsed": "Vergangene Zeit"
+	},
+	"messages": {
+		"saved": "Gespeichert",
+		"error": "Ein Fehler ist aufgetreten"
+	}
+}
--- a/apps-archived/clock/apps/web/src/lib/i18n/locales/en.json
+++ b/apps-archived/clock/apps/web/src/lib/i18n/locales/en.json
@ -0,0 +1,23 @@
+{
+	"app": {
+		"name": "Clock"
+	},
+	"common": {
+		"back": "Back",
+		"cancel": "Cancel",
+		"loading": "Loading..."
+	},
+	"nav": {
+		"home": "Home",
+		"settings": "Settings"
+	},
+	"clock": {
+		"title": "Life Clock",
+		"remaining": "Time remaining",
+		"elapsed": "Time elapsed"
+	},
+	"messages": {
+		"saved": "Saved",
+		"error": "An error occurred"
+	}
+}
--- a/apps-archived/clock/apps/web/src/lib/stores/alarms.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/alarms.svelte.ts
@ -0,0 +1,97 @@
+/**
+ * Alarms Store — Mutation-Only Service
+ *
+ * All reads are handled by useLiveQuery() hooks in queries.ts.
+ * This store only provides write operations (create, update, delete, toggle).
+ * IndexedDB writes automatically trigger UI updates via Dexie liveQuery.
+ */
+
+import { alarmCollection, type LocalAlarm } from '$lib/data/local-store';
+import { toAlarm } from '$lib/data/queries';
+import type { CreateAlarmInput, UpdateAlarmInput, Alarm } from '@clock/shared';
+
+let error = $state<string | null>(null);
+
+export const alarmsStore = {
+	get error() {
+		return error;
+	},
+
+	/**
+	 * Create a new alarm -- writes to IndexedDB instantly.
+	 */
+	async createAlarm(input: CreateAlarmInput) {
+		error = null;
+		try {
+			const newLocal: LocalAlarm = {
+				id: crypto.randomUUID(),
+				label: input.label ?? null,
+				time: input.time,
+				enabled: input.enabled ?? true,
+				repeatDays: input.repeatDays ?? null,
+				snoozeMinutes: input.snoozeMinutes ?? null,
+				sound: input.sound ?? null,
+				vibrate: input.vibrate ?? null,
+			};
+
+			const inserted = await alarmCollection.insert(newLocal);
+			return { success: true, data: toAlarm(inserted) };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create alarm';
+			console.error('Failed to create alarm:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Update an alarm -- writes to IndexedDB instantly.
+	 */
+	async updateAlarm(id: string, input: UpdateAlarmInput) {
+		error = null;
+		try {
+			const updateData: Partial<LocalAlarm> = {};
+			if (input.label !== undefined) updateData.label = input.label ?? null;
+			if (input.time !== undefined) updateData.time = input.time;
+			if (input.enabled !== undefined) updateData.enabled = input.enabled;
+			if (input.repeatDays !== undefined) updateData.repeatDays = input.repeatDays ?? null;
+			if (input.snoozeMinutes !== undefined) updateData.snoozeMinutes = input.snoozeMinutes ?? null;
+			if (input.sound !== undefined) updateData.sound = input.sound ?? null;
+			if (input.vibrate !== undefined) updateData.vibrate = input.vibrate ?? null;
+
+			const updated = await alarmCollection.update(id, updateData);
+			if (updated) {
+				return { success: true, data: toAlarm(updated) };
+			}
+			return { success: false, error: 'Alarm not found' };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update alarm';
+			console.error('Failed to update alarm:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Toggle alarm enabled state.
+	 */
+	async toggleAlarm(id: string, currentAlarms: Alarm[]) {
+		const alarm = currentAlarms.find((a) => a.id === id);
+		if (!alarm) return { success: false, error: 'Alarm not found' };
+
+		return this.updateAlarm(id, { enabled: !alarm.enabled });
+	},
+
+	/**
+	 * Delete an alarm -- removes from IndexedDB instantly.
+	 */
+	async deleteAlarm(id: string) {
+		error = null;
+		try {
+			await alarmCollection.delete(id);
+			return { success: true };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete alarm';
+			console.error('Failed to delete alarm:', e);
+			return { success: false, error: error };
+		}
+	},
+};
--- a/apps-archived/clock/apps/web/src/lib/stores/app-onboarding.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/app-onboarding.svelte.ts
@ -0,0 +1,82 @@
+import { createAppOnboardingStore, type AppOnboardingStep } from '@manacore/shared-app-onboarding';
+import { userSettings } from './user-settings.svelte';
+
+/**
+ * Clock-specific onboarding steps
+ */
+const clockOnboardingSteps: AppOnboardingStep[] = [
+	{
+		id: 'features',
+		type: 'info',
+		question: 'Willkommen bei Clock!',
+		description: 'Das kann Clock für dich tun:',
+		emoji: '🕐',
+		gradient: { from: 'blue-500', to: 'blue-700' },
+		bullets: [
+			'Flexible Timer & Stoppuhr',
+			'Pomodoro-Technik für produktives Arbeiten',
+			'Voreingestellte Timer-Dauern',
+			'Minimalistisches Design',
+		],
+	},
+	{
+		id: 'defaultTimer',
+		type: 'select',
+		question: 'Welche Timer-Dauer nutzt du am häufigsten?',
+		description: 'Du kannst Timer jederzeit individuell einstellen.',
+		emoji: '⏱️',
+		gradient: { from: 'blue-500', to: 'blue-700' },
+		options: [
+			{
+				id: '5',
+				label: '5 Minuten',
+				description: 'Für kurze Pausen',
+				emoji: '⚡',
+			},
+			{
+				id: '15',
+				label: '15 Minuten',
+				description: 'Für konzentrierte Einheiten',
+				emoji: '🎯',
+			},
+			{
+				id: '25',
+				label: '25 Minuten',
+				description: 'Pomodoro-Technik (Empfohlen)',
+				emoji: '🍅',
+			},
+			{
+				id: '45',
+				label: '45 Minuten',
+				description: 'Für längere Arbeitsphasen',
+				emoji: '🧘',
+			},
+		],
+		defaultValue: '25',
+	},
+	{
+		id: 'welcome',
+		type: 'info',
+		question: 'Deine Uhr ist bereit!',
+		description: 'Hier sind einige Tipps:',
+		emoji: '🎉',
+		gradient: { from: 'primary', to: 'primary/70' },
+		bullets: [
+			'Nutze die Stoppuhr für freie Zeitmessung',
+			'Stelle Wecker für wichtige Erinnerungen',
+			'Die Weltuhr zeigt mehrere Zeitzonen gleichzeitig',
+			'Drücke Cmd/Ctrl+K für die Schnellsuche',
+		],
+	},
+];
+
+/**
+ * Clock app onboarding store
+ */
+export const clockOnboarding = createAppOnboardingStore({
+	appId: 'clock',
+	steps: clockOnboardingSteps,
+	userSettings,
+	onComplete: async () => {},
+	onSkip: async () => {},
+});
--- a/apps-archived/clock/apps/web/src/lib/stores/auth.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/auth.svelte.ts
@ -0,0 +1,9 @@
+/**
+ * Auth Store — uses centralized Mana auth factory.
+ */
+
+import { createManaAuthStore } from '@manacore/shared-auth-stores';
+
+export const authStore = createManaAuthStore({
+	devBackendPort: 3017,
+});
--- a/apps-archived/clock/apps/web/src/lib/stores/navigation.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/navigation.ts
@ -0,0 +1,5 @@
+import { createSimpleNavigationStores } from '@manacore/shared-stores';
+
+export const { isNavCollapsed } = createSimpleNavigationStores({
+	storageKey: 'clock',
+});
--- a/apps-archived/clock/apps/web/src/lib/stores/session-alarms.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/session-alarms.svelte.ts
@ -0,0 +1,150 @@
+/**
+ * Session Alarms Store - Manages alarms in sessionStorage for guest users
+ * This allows users to try the app without signing in.
+ * Data is stored in sessionStorage (lost when tab closes).
+ */
+
+import type { Alarm, CreateAlarmInput, UpdateAlarmInput } from '@clock/shared';
+
+const STORAGE_KEY = 'clock-session-alarms';
+
+// State
+let alarms = $state<Alarm[]>([]);
+
+// Generate session ID
+function generateSessionId(): string {
+	return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// Load from sessionStorage
+function loadFromStorage(): void {
+	if (typeof window === 'undefined') return;
+
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			alarms = JSON.parse(stored);
+		}
+	} catch (e) {
+		console.error('Failed to load session alarms:', e);
+	}
+}
+
+// Save to sessionStorage
+function saveToStorage(): void {
+	if (typeof window === 'undefined') return;
+
+	try {
+		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(alarms));
+	} catch (e) {
+		console.error('Failed to save session alarms:', e);
+	}
+}
+
+// Initialize on load
+if (typeof window !== 'undefined') {
+	loadFromStorage();
+}
+
+export const sessionAlarmsStore = {
+	// Getters
+	get alarms() {
+		return alarms;
+	},
+	get enabledAlarms() {
+		return alarms.filter((a) => a.enabled);
+	},
+
+	/**
+	 * Create a new session alarm
+	 */
+	createAlarm(input: CreateAlarmInput): Alarm {
+		const now = new Date().toISOString();
+		const alarm: Alarm = {
+			id: generateSessionId(),
+			userId: 'guest',
+			label: input.label || null,
+			time: input.time,
+			enabled: input.enabled ?? true,
+			repeatDays: input.repeatDays || null,
+			snoozeMinutes: input.snoozeMinutes || null,
+			sound: input.sound || null,
+			vibrate: input.vibrate ?? null,
+			createdAt: now,
+			updatedAt: now,
+		};
+
+		alarms = [...alarms, alarm];
+		saveToStorage();
+
+		return alarm;
+	},
+
+	/**
+	 * Update a session alarm
+	 */
+	updateAlarm(id: string, input: UpdateAlarmInput): Alarm | null {
+		const index = alarms.findIndex((a) => a.id === id);
+		if (index === -1) return null;
+
+		const updated: Alarm = {
+			...alarms[index],
+			...input,
+			updatedAt: new Date().toISOString(),
+		};
+
+		alarms = alarms.map((a) => (a.id === id ? updated : a));
+		saveToStorage();
+
+		return updated;
+	},
+
+	/**
+	 * Toggle alarm enabled state
+	 */
+	toggleAlarm(id: string): Alarm | null {
+		const alarm = alarms.find((a) => a.id === id);
+		if (!alarm) return null;
+
+		return this.updateAlarm(id, { enabled: !alarm.enabled });
+	},
+
+	/**
+	 * Delete a session alarm
+	 */
+	deleteAlarm(id: string): void {
+		alarms = alarms.filter((a) => a.id !== id);
+		saveToStorage();
+	},
+
+	/**
+	 * Check if ID is a session alarm
+	 */
+	isSessionAlarm(id: string): boolean {
+		return id.startsWith('session_');
+	},
+
+	/**
+	 * Get all alarms for migration
+	 */
+	getAllAlarms(): Alarm[] {
+		return [...alarms];
+	},
+
+	/**
+	 * Clear all session data
+	 */
+	clear(): void {
+		alarms = [];
+		if (typeof window !== 'undefined') {
+			sessionStorage.removeItem(STORAGE_KEY);
+		}
+	},
+
+	/**
+	 * Get count of session alarms
+	 */
+	get count(): number {
+		return alarms.length;
+	},
+};
--- a/apps-archived/clock/apps/web/src/lib/stores/session-timers.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/session-timers.svelte.ts
@ -0,0 +1,214 @@
+/**
+ * Session Timers Store - Manages timers in sessionStorage for guest users
+ * This allows users to try the app without signing in.
+ * Data is stored in sessionStorage (lost when tab closes).
+ */
+
+import type { Timer, CreateTimerInput, UpdateTimerInput, TimerStatus } from '@clock/shared';
+
+const STORAGE_KEY = 'clock-session-timers';
+
+// State
+let timers = $state<Timer[]>([]);
+
+// Generate session ID
+function generateSessionId(): string {
+	return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// Load from sessionStorage
+function loadFromStorage(): void {
+	if (typeof window === 'undefined') return;
+
+	try {
+		const stored = sessionStorage.getItem(STORAGE_KEY);
+		if (stored) {
+			timers = JSON.parse(stored);
+		}
+	} catch (e) {
+		console.error('Failed to load session timers:', e);
+	}
+}
+
+// Save to sessionStorage
+function saveToStorage(): void {
+	if (typeof window === 'undefined') return;
+
+	try {
+		sessionStorage.setItem(STORAGE_KEY, JSON.stringify(timers));
+	} catch (e) {
+		console.error('Failed to save session timers:', e);
+	}
+}
+
+// Initialize on load
+if (typeof window !== 'undefined') {
+	loadFromStorage();
+}
+
+export const sessionTimersStore = {
+	// Getters
+	get timers() {
+		return timers;
+	},
+	get activeTimers() {
+		return timers.filter((t) => t.status === 'running' || t.status === 'paused');
+	},
+
+	/**
+	 * Create a new session timer
+	 */
+	createTimer(input: CreateTimerInput): Timer {
+		const now = new Date().toISOString();
+		const timer: Timer = {
+			id: generateSessionId(),
+			userId: 'guest',
+			label: input.label || null,
+			durationSeconds: input.durationSeconds,
+			remainingSeconds: input.durationSeconds,
+			status: 'idle' as TimerStatus,
+			startedAt: null,
+			pausedAt: null,
+			sound: input.sound || null,
+			createdAt: now,
+			updatedAt: now,
+		};
+
+		timers = [...timers, timer];
+		saveToStorage();
+
+		return timer;
+	},
+
+	/**
+	 * Update a session timer
+	 */
+	updateTimer(id: string, input: UpdateTimerInput): Timer | null {
+		const index = timers.findIndex((t) => t.id === id);
+		if (index === -1) return null;
+
+		const updated: Timer = {
+			...timers[index],
+			...input,
+			updatedAt: new Date().toISOString(),
+		};
+
+		timers = timers.map((t) => (t.id === id ? updated : t));
+		saveToStorage();
+
+		return updated;
+	},
+
+	/**
+	 * Start a timer
+	 */
+	startTimer(id: string): Timer | null {
+		const timer = timers.find((t) => t.id === id);
+		if (!timer) return null;
+
+		const now = new Date().toISOString();
+		const updated: Timer = {
+			...timer,
+			status: 'running',
+			startedAt: now,
+			pausedAt: null,
+			updatedAt: now,
+		};
+
+		timers = timers.map((t) => (t.id === id ? updated : t));
+		saveToStorage();
+
+		return updated;
+	},
+
+	/**
+	 * Pause a timer
+	 */
+	pauseTimer(id: string): Timer | null {
+		const timer = timers.find((t) => t.id === id);
+		if (!timer) return null;
+
+		const now = new Date().toISOString();
+		const updated: Timer = {
+			...timer,
+			status: 'paused',
+			pausedAt: now,
+			updatedAt: now,
+		};
+
+		timers = timers.map((t) => (t.id === id ? updated : t));
+		saveToStorage();
+
+		return updated;
+	},
+
+	/**
+	 * Reset a timer
+	 */
+	resetTimer(id: string): Timer | null {
+		const timer = timers.find((t) => t.id === id);
+		if (!timer) return null;
+
+		const now = new Date().toISOString();
+		const updated: Timer = {
+			...timer,
+			status: 'idle',
+			remainingSeconds: timer.durationSeconds,
+			startedAt: null,
+			pausedAt: null,
+			updatedAt: now,
+		};
+
+		timers = timers.map((t) => (t.id === id ? updated : t));
+		saveToStorage();
+
+		return updated;
+	},
+
+	/**
+	 * Update local timer state (for countdown display)
+	 */
+	updateLocalState(id: string, updates: Partial<Timer>): void {
+		timers = timers.map((t) => (t.id === id ? { ...t, ...updates } : t));
+		saveToStorage();
+	},
+
+	/**
+	 * Delete a session timer
+	 */
+	deleteTimer(id: string): void {
+		timers = timers.filter((t) => t.id !== id);
+		saveToStorage();
+	},
+
+	/**
+	 * Check if ID is a session timer
+	 */
+	isSessionTimer(id: string): boolean {
+		return id.startsWith('session_');
+	},
+
+	/**
+	 * Get all timers for migration
+	 */
+	getAllTimers(): Timer[] {
+		return [...timers];
+	},
+
+	/**
+	 * Clear all session data
+	 */
+	clear(): void {
+		timers = [];
+		if (typeof window !== 'undefined') {
+			sessionStorage.removeItem(STORAGE_KEY);
+		}
+	},
+
+	/**
+	 * Get count of session timers
+	 */
+	get count(): number {
+		return timers.length;
+	},
+};
--- a/apps-archived/clock/apps/web/src/lib/stores/stopwatch.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/stopwatch.svelte.ts
@ -0,0 +1,231 @@
+/**
+ * Stopwatch Store - Manages stopwatch state using Svelte 5 runes
+ * Stopwatches are local-only (no backend sync)
+ */
+
+export interface Lap {
+	number: number;
+	time: number; // milliseconds since start
+	delta: number; // milliseconds since last lap
+}
+
+export interface Stopwatch {
+	id: string;
+	label: string;
+	startTime: number | null; // timestamp when started
+	elapsedTime: number; // accumulated milliseconds when paused
+	status: 'idle' | 'running' | 'paused';
+	laps: Lap[];
+	color: string;
+}
+
+export const STOPWATCH_COLORS = [
+	'#3B82F6', // blue
+	'#10B981', // green
+	'#F59E0B', // amber
+	'#EF4444', // red
+	'#8B5CF6', // violet
+	'#EC4899', // pink
+	'#14B8A6', // teal
+	'#F97316', // orange
+];
+
+// State
+let stopwatches = $state<Stopwatch[]>([]);
+let focusedId = $state<string | null>(null);
+let colorIndex = 0;
+
+// Tick interval for updating display
+let tickInterval: ReturnType<typeof setInterval> | null = null;
+
+function getNextColor(): string {
+	const color = STOPWATCH_COLORS[colorIndex % STOPWATCH_COLORS.length];
+	colorIndex++;
+	return color;
+}
+
+function startTicking() {
+	if (tickInterval) return;
+	tickInterval = setInterval(() => {
+		// Force reactivity update by reassigning
+		stopwatches = [...stopwatches];
+	}, 100);
+}
+
+function stopTickingIfNoRunning() {
+	const hasRunning = stopwatches.some((sw) => sw.status === 'running');
+	if (!hasRunning && tickInterval) {
+		clearInterval(tickInterval);
+		tickInterval = null;
+	}
+}
+
+export const stopwatchesStore = {
+	// Getters
+	get stopwatches() {
+		return stopwatches;
+	},
+	get focusedId() {
+		return focusedId;
+	},
+	get focusedStopwatch() {
+		return stopwatches.find((sw) => sw.id === focusedId) || null;
+	},
+
+	/**
+	 * Create a new stopwatch
+	 */
+	create(label?: string): string {
+		const id = crypto.randomUUID();
+		const newStopwatch: Stopwatch = {
+			id,
+			label: label || `Stopwatch ${stopwatches.length + 1}`,
+			startTime: null,
+			elapsedTime: 0,
+			status: 'idle',
+			laps: [],
+			color: getNextColor(),
+		};
+		stopwatches = [...stopwatches, newStopwatch];
+		if (!focusedId) {
+			focusedId = id;
+		}
+		return id;
+	},
+
+	/**
+	 * Start a stopwatch
+	 */
+	start(id: string) {
+		stopwatches = stopwatches.map((sw) => {
+			if (sw.id !== id) return sw;
+			return {
+				...sw,
+				startTime: Date.now(),
+				status: 'running' as const,
+			};
+		});
+		startTicking();
+	},
+
+	/**
+	 * Pause a stopwatch
+	 */
+	pause(id: string) {
+		stopwatches = stopwatches.map((sw) => {
+			if (sw.id !== id || sw.status !== 'running') return sw;
+			const elapsed = sw.startTime ? Date.now() - sw.startTime : 0;
+			return {
+				...sw,
+				startTime: null,
+				elapsedTime: sw.elapsedTime + elapsed,
+				status: 'paused' as const,
+			};
+		});
+		stopTickingIfNoRunning();
+	},
+
+	/**
+	 * Reset a stopwatch
+	 */
+	reset(id: string) {
+		stopwatches = stopwatches.map((sw) => {
+			if (sw.id !== id) return sw;
+			return {
+				...sw,
+				startTime: null,
+				elapsedTime: 0,
+				status: 'idle' as const,
+				laps: [],
+			};
+		});
+		stopTickingIfNoRunning();
+	},
+
+	/**
+	 * Add a lap to a stopwatch
+	 */
+	addLap(id: string) {
+		stopwatches = stopwatches.map((sw) => {
+			if (sw.id !== id || sw.status !== 'running') return sw;
+			const currentTime = this.getElapsed(sw);
+			const lastLap = sw.laps[sw.laps.length - 1];
+			const delta = lastLap ? currentTime - lastLap.time : currentTime;
+			const newLap: Lap = {
+				number: sw.laps.length + 1,
+				time: currentTime,
+				delta,
+			};
+			return {
+				...sw,
+				laps: [...sw.laps, newLap],
+			};
+		});
+	},
+
+	/**
+	 * Delete a stopwatch
+	 */
+	delete(id: string) {
+		stopwatches = stopwatches.filter((sw) => sw.id !== id);
+		if (focusedId === id) {
+			focusedId = stopwatches[0]?.id || null;
+		}
+		stopTickingIfNoRunning();
+	},
+
+	/**
+	 * Set focused stopwatch
+	 */
+	setFocused(id: string | null) {
+		focusedId = id;
+	},
+
+	/**
+	 * Update stopwatch label
+	 */
+	updateLabel(id: string, label: string) {
+		stopwatches = stopwatches.map((sw) => (sw.id === id ? { ...sw, label } : sw));
+	},
+
+	/**
+	 * Get elapsed time for a stopwatch
+	 */
+	getElapsed(sw: Stopwatch): number {
+		if (sw.status === 'running' && sw.startTime) {
+			return sw.elapsedTime + (Date.now() - sw.startTime);
+		}
+		return sw.elapsedTime;
+	},
+};
+
+/**
+ * Format time in milliseconds to display string
+ */
+export function formatTime(ms: number): string {
+	const totalSeconds = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const seconds = totalSeconds % 60;
+	const centiseconds = Math.floor((ms % 1000) / 10);
+
+	if (hours > 0) {
+		return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${centiseconds.toString().padStart(2, '0')}`;
+	}
+	return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${centiseconds.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Format lap time (delta) for display
+ */
+export function formatLapTime(ms: number): string {
+	const totalSeconds = Math.floor(ms / 1000);
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	const centiseconds = Math.floor((ms % 1000) / 10);
+
+	if (minutes > 0) {
+		return `+${minutes}:${seconds.toString().padStart(2, '0')}.${centiseconds.toString().padStart(2, '0')}`;
+	}
+	return `+${seconds}.${centiseconds.toString().padStart(2, '0')}`;
+}
--- a/apps-archived/clock/apps/web/src/lib/stores/tags.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/tags.svelte.ts
@ -0,0 +1,13 @@
+/**
+ * Tag Store — Local-First via Shared Tag Store
+ * Tags are stored in shared IndexedDB ('manacore-tags'), accessible across all apps.
+ * Use context ('tags') for reads, tagMutations for writes.
+ */
+export {
+	tagMutations,
+	useAllTags,
+	getTagById,
+	getTagsByIds,
+	getTagColor,
+	getTagsByGroup,
+} from '@manacore/shared-stores';
--- a/apps-archived/clock/apps/web/src/lib/stores/theme.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/theme.svelte.ts
@ -0,0 +1,7 @@
+import { createThemeStore } from '@manacore/shared-theme';
+
+// Create theme store with Clock's styling
+export const theme = createThemeStore({
+	appId: 'clock',
+	defaultVariant: 'lume',
+});
--- a/apps-archived/clock/apps/web/src/lib/stores/timers.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/timers.svelte.ts
@ -0,0 +1,191 @@
+/**
+ * Timers Store — Mutation-Only Service
+ *
+ * All reads are handled by useLiveQuery() hooks in queries.ts.
+ * This store only provides write operations (create, update, delete, start, pause, reset).
+ * IndexedDB writes automatically trigger UI updates via Dexie liveQuery.
+ */
+
+import { timerCollection, type LocalTimer } from '$lib/data/local-store';
+import { toTimer } from '$lib/data/queries';
+import type { CreateTimerInput, UpdateTimerInput } from '@clock/shared';
+import { ClockEvents } from '@manacore/shared-utils/analytics';
+
+let error = $state<string | null>(null);
+
+export const timersStore = {
+	get error() {
+		return error;
+	},
+
+	/**
+	 * Create a new timer -- writes to IndexedDB instantly.
+	 */
+	async createTimer(input: CreateTimerInput) {
+		error = null;
+		try {
+			const newLocal: LocalTimer = {
+				id: crypto.randomUUID(),
+				label: input.label ?? null,
+				durationSeconds: input.durationSeconds,
+				remainingSeconds: null,
+				status: 'idle',
+				startedAt: null,
+				pausedAt: null,
+				sound: input.sound ?? null,
+			};
+
+			const inserted = await timerCollection.insert(newLocal);
+			return { success: true, data: toTimer(inserted) };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to create timer';
+			console.error('Failed to create timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Update a timer -- writes to IndexedDB instantly.
+	 */
+	async updateTimer(id: string, input: UpdateTimerInput) {
+		error = null;
+		try {
+			const updateData: Partial<LocalTimer> = {};
+			if (input.label !== undefined) updateData.label = input.label ?? null;
+			if (input.durationSeconds !== undefined) updateData.durationSeconds = input.durationSeconds;
+			if (input.sound !== undefined) updateData.sound = input.sound ?? null;
+
+			const updated = await timerCollection.update(id, updateData);
+			if (updated) {
+				return { success: true, data: toTimer(updated) };
+			}
+			return { success: false, error: 'Timer not found' };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to update timer';
+			console.error('Failed to update timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Start a timer -- sets status to running with current timestamp.
+	 */
+	async startTimer(id: string) {
+		error = null;
+		try {
+			const existing = await timerCollection.get(id);
+			if (!existing) return { success: false, error: 'Timer not found' };
+
+			const updateData: Partial<LocalTimer> = {
+				status: 'running',
+				startedAt: new Date().toISOString(),
+				pausedAt: null,
+			};
+
+			// If resuming from pause, keep remaining seconds
+			if (existing.status !== 'paused') {
+				updateData.remainingSeconds = existing.durationSeconds;
+			}
+
+			const updated = await timerCollection.update(id, updateData);
+			if (updated) {
+				const updatedTimer = toTimer(updated);
+				ClockEvents.timerStarted(
+					(updatedTimer as any).type as 'pomodoro' | 'stopwatch' | 'countdown'
+				);
+				return { success: true, data: updatedTimer };
+			}
+			return { success: false, error: 'Timer not found' };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to start timer';
+			console.error('Failed to start timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Pause a timer -- calculates remaining seconds and saves.
+	 */
+	async pauseTimer(id: string) {
+		error = null;
+		try {
+			const existing = await timerCollection.get(id);
+			if (!existing) return { success: false, error: 'Timer not found' };
+
+			// Calculate remaining seconds
+			let remaining = existing.remainingSeconds ?? existing.durationSeconds;
+			if (existing.startedAt) {
+				const elapsed = (Date.now() - new Date(existing.startedAt).getTime()) / 1000;
+				remaining = Math.max(0, remaining - elapsed);
+			}
+
+			const updateData: Partial<LocalTimer> = {
+				status: 'paused',
+				pausedAt: new Date().toISOString(),
+				remainingSeconds: Math.round(remaining),
+				startedAt: null,
+			};
+
+			const updated = await timerCollection.update(id, updateData);
+			if (updated) {
+				return { success: true, data: toTimer(updated) };
+			}
+			return { success: false, error: 'Timer not found' };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to pause timer';
+			console.error('Failed to pause timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Reset a timer -- back to idle with full duration.
+	 */
+	async resetTimer(id: string) {
+		error = null;
+		try {
+			const updateData: Partial<LocalTimer> = {
+				status: 'idle',
+				remainingSeconds: null,
+				startedAt: null,
+				pausedAt: null,
+			};
+
+			const updated = await timerCollection.update(id, updateData);
+			if (updated) {
+				return { success: true, data: toTimer(updated) };
+			}
+			return { success: false, error: 'Timer not found' };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reset timer';
+			console.error('Failed to reset timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Delete a timer -- removes from IndexedDB instantly.
+	 */
+	async deleteTimer(id: string) {
+		error = null;
+		try {
+			await timerCollection.delete(id);
+			return { success: true };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to delete timer';
+			console.error('Failed to delete timer:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Update remaining seconds in IndexedDB (for countdown display).
+	 */
+	async updateLocalTimer(id: string, remainingSeconds: number) {
+		try {
+			await timerCollection.update(id, { remainingSeconds });
+		} catch (e) {
+			console.error('Failed to update local timer:', e);
+		}
+	},
+};
--- a/apps-archived/clock/apps/web/src/lib/stores/user-settings.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/user-settings.svelte.ts
@ -0,0 +1,28 @@
+/**
+ * User Settings Store for Clock
+ *
+ * This store syncs settings with mana-core-auth and provides:
+ * - Global settings that apply to all apps
+ * - Per-app overrides for customization
+ * - localStorage caching for offline support
+ */
+
+import { browser } from '$app/environment';
+import { createUserSettingsStore } from '@manacore/shared-theme';
+import { authStore } from './auth.svelte';
+
+// Get auth URL dynamically at runtime
+function getAuthUrl(): string {
+	if (browser && typeof window !== 'undefined') {
+		const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+			.__PUBLIC_MANA_CORE_AUTH_URL__;
+		if (injectedUrl) return injectedUrl;
+	}
+	return import.meta.env.DEV ? 'http://localhost:3001' : '';
+}
+
+export const userSettings = createUserSettingsStore({
+	appId: 'clock',
+	authUrl: getAuthUrl,
+	getAccessToken: () => authStore.getAccessToken(),
+});
--- a/apps-archived/clock/apps/web/src/lib/stores/world-clocks.svelte.ts
+++ b/apps-archived/clock/apps/web/src/lib/stores/world-clocks.svelte.ts
@ -0,0 +1,74 @@
+/**
+ * World Clocks Store — Mutation-Only Service
+ *
+ * All reads are handled by useLiveQuery() hooks in queries.ts.
+ * This store only provides write operations (add, remove, reorder).
+ * IndexedDB writes automatically trigger UI updates via Dexie liveQuery.
+ */
+
+import { worldClockCollection, type LocalWorldClock } from '$lib/data/local-store';
+import type { CreateWorldClockInput, WorldClock } from '@clock/shared';
+
+let error = $state<string | null>(null);
+
+export const worldClocksStore = {
+	get error() {
+		return error;
+	},
+
+	/**
+	 * Add a new world clock -- writes to IndexedDB instantly.
+	 */
+	async addWorldClock(input: CreateWorldClockInput, currentCount: number = 0) {
+		error = null;
+		try {
+			const newLocal: LocalWorldClock = {
+				id: crypto.randomUUID(),
+				timezone: input.timezone,
+				cityName: input.cityName,
+				sortOrder: currentCount,
+			};
+
+			await worldClockCollection.insert(newLocal);
+			return { success: true };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to add world clock';
+			console.error('Failed to add world clock:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Remove a world clock -- removes from IndexedDB instantly.
+	 */
+	async removeWorldClock(id: string) {
+		error = null;
+		try {
+			await worldClockCollection.delete(id);
+			return { success: true };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to remove world clock';
+			console.error('Failed to remove world clock:', e);
+			return { success: false, error: error };
+		}
+	},
+
+	/**
+	 * Reorder world clocks -- updates sortOrder in IndexedDB.
+	 */
+	async reorder(ids: string[]) {
+		error = null;
+		try {
+			for (let i = 0; i < ids.length; i++) {
+				await worldClockCollection.update(ids[i], {
+					sortOrder: i,
+				} as Partial<LocalWorldClock>);
+			}
+			return { success: true };
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to reorder world clocks';
+			console.error('Failed to reorder world clocks:', e);
+			return { success: false, error: error };
+		}
+	},
+};
--- a/apps-archived/clock/apps/web/src/lib/version.ts
+++ b/apps-archived/clock/apps/web/src/lib/version.ts
@ -0,0 +1,4 @@
+export const APP_VERSION = '0.2.0';
+export const BUILD_TIME: string =
+	typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : new Date().toISOString();
+export const BUILD_HASH: string = typeof __BUILD_HASH__ !== 'undefined' ? __BUILD_HASH__ : 'dev';
--- a/apps-archived/clock/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/+layout.svelte
@ -0,0 +1,465 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { locale } from 'svelte-i18n';
+	import { PillNavigation, CommandBar, TagStrip } from '@manacore/shared-ui';
+	import { SyncIndicator } from '@manacore/shared-ui';
+	import type {
+		PillNavItem,
+		PillDropdownItem,
+		CommandBarItem,
+		QuickAction,
+		SpotlightAction,
+	} from '@manacore/shared-ui';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { userSettings } from '$lib/stores/user-settings.svelte';
+	import { useAllAlarms, useAllTimers, useAllWorldClocks } from '$lib/data/queries';
+	import {
+		THEME_DEFINITIONS,
+		DEFAULT_THEME_VARIANTS,
+		EXTENDED_THEME_VARIANTS,
+	} from '@manacore/shared-theme';
+	import type { ThemeVariant } from '@manacore/shared-theme';
+	import { filterHiddenNavItems } from '@manacore/shared-theme';
+	import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation';
+	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
+	import { getPillAppItems, getManaApp } from '@manacore/shared-branding';
+	import { setLocale, supportedLocales } from '$lib/i18n';
+	import { clockOnboarding } from '$lib/stores/app-onboarding.svelte';
+	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { SessionExpiredBanner, AuthGate, GuestWelcomeModal } from '@manacore/shared-auth-ui';
+	import { shouldShowGuestWelcome } from '@manacore/shared-auth-ui';
+	import { clockStore } from '$lib/data/local-store';
+	import {
+		tagLocalStore,
+		tagMutations,
+		useAllTags as useAllSharedTags,
+	} from '@manacore/shared-stores';
+
+	// Live queries — auto-update when IndexedDB changes (local writes, sync, other tabs)
+	const allAlarms = useAllAlarms();
+	const allTimers = useAllTimers();
+	const allWorldClocks = useAllWorldClocks();
+	const allTags = useAllSharedTags();
+
+	// Provide data to child components via Svelte context
+	setContext('alarms', allAlarms);
+	setContext('timers', allTimers);
+	setContext('worldClocks', allWorldClocks);
+	setContext('tags', allTags);
+
+	// Guest welcome modal state
+	let showGuestWelcome = $state(false);
+
+	function initGuestWelcome() {
+		if (!authStore.isAuthenticated && shouldShowGuestWelcome('clock')) {
+			showGuestWelcome = true;
+		}
+	}
+
+	// App switcher items
+	let appItems = $derived(getPillAppItems('clock', undefined, undefined, authStore.user?.tier));
+
+	let { children } = $props();
+
+	// CommandBar state
+	let commandBarOpen = $state(false);
+
+	// CommandBar quick actions
+	const commandBarQuickActions: QuickAction[] = [
+		{
+			id: 'alarm',
+			label: 'Neuen Wecker erstellen',
+			icon: 'bell',
+			href: '/alarms?new=true',
+			shortcut: 'A',
+		},
+		{
+			id: 'timer',
+			label: 'Neuen Timer starten',
+			icon: 'timer',
+			href: '/timers?new=true',
+			shortcut: 'T',
+		},
+		{ id: 'stopwatch', label: 'Stoppuhr', icon: 'stopwatch', href: '/stopwatch' },
+		{ id: 'pomodoro', label: 'Pomodoro starten', icon: 'target', href: '/pomodoro' },
+		{ id: 'worldclock', label: 'Weltzeituhr', icon: 'globe', href: '/world-clock' },
+		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
+	];
+
+	// CommandBar search - search alarms and timers using live query data
+	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+		if (!query.trim()) return [];
+
+		const queryLower = query.toLowerCase();
+		const results: CommandBarItem[] = [];
+
+		// Search alarms (from live query)
+		const matchingAlarms = allAlarms.value
+			.filter((alarm) => alarm.label?.toLowerCase().includes(queryLower))
+			.slice(0, 5)
+			.map((alarm) => ({
+				id: `alarm-${alarm.id}`,
+				title: alarm.label || 'Wecker',
+				subtitle: `${alarm.time.slice(0, 5)} ${alarm.enabled ? '(aktiv)' : '(inaktiv)'}`,
+			}));
+		results.push(...matchingAlarms);
+
+		// Search timers (from live query)
+		const matchingTimers = allTimers.value
+			.filter((timer) => timer.label?.toLowerCase().includes(queryLower))
+			.slice(0, 5)
+			.map((timer) => {
+				const mins = Math.floor(timer.durationSeconds / 60);
+				const secs = timer.durationSeconds % 60;
+				return {
+					id: `timer-${timer.id}`,
+					title: timer.label || 'Timer',
+					subtitle: `${mins}:${secs.toString().padStart(2, '0')} ${timer.status === 'running' ? '(läuft)' : ''}`,
+				};
+			});
+		results.push(...matchingTimers);
+
+		return results.slice(0, 10);
+	}
+
+	function handleCommandBarSelect(item: CommandBarItem) {
+		if (item.id.startsWith('alarm-')) {
+			goto('/alarms');
+		} else if (item.id.startsWith('timer-')) {
+			goto('/timers');
+		}
+	}
+
+	let isCollapsed = $state(false);
+
+	// Use theme store's isDark directly
+	let isDark = $derived(theme.isDark);
+
+	// Get pinned themes from user settings (extended themes only)
+	let pinnedThemes = $derived<ThemeVariant[]>(
+		(userSettings.theme?.pinnedThemes || []).filter((t): t is ThemeVariant =>
+			EXTENDED_THEME_VARIANTS.includes(t as ThemeVariant)
+		)
+	);
+
+	// Visible themes in PillNav: default + pinned extended
+	let visibleThemes = $derived<ThemeVariant[]>([...DEFAULT_THEME_VARIANTS, ...pinnedThemes]);
+
+	// Theme variant dropdown items (with SSR fallback)
+	let themeVariantItems = $derived<PillDropdownItem[]>([
+		...visibleThemes.map((variant) => ({
+			id: variant,
+			label: THEME_DEFINITIONS[variant]?.label || variant,
+			icon: THEME_DEFINITIONS[variant]?.icon || '🎨',
+			onClick: () => theme.setVariant(variant),
+			active: (theme.variant || 'lume') === variant,
+		})),
+		{
+			id: 'all-themes',
+			label: 'Alle Themes',
+			icon: 'palette',
+			onClick: () => goto('/themes'),
+			active: false,
+		},
+	]);
+
+	// Current theme variant label (with SSR fallback)
+	let currentThemeVariantLabel = $derived(
+		THEME_DEFINITIONS[theme.variant]?.label || THEME_DEFINITIONS.lume?.label || 'Lume'
+	);
+
+	// Language selector items
+	let currentLocale = $derived($locale || 'de');
+	function handleLocaleChange(newLocale: string) {
+		setLocale(newLocale as any);
+	}
+	let languageItems = $derived(
+		getLanguageDropdownItems(supportedLocales, currentLocale, handleLocaleChange)
+	);
+	let currentLanguageLabel = $derived(getCurrentLanguageLabel(currentLocale));
+
+	// User email for user dropdown
+	// User email for user dropdown — empty string for guests so PillNav shows login button
+	let userEmail = $derived(authStore.isAuthenticated ? authStore.user?.email || 'Menü' : '');
+
+	// Spotlight actions for PillNavigation
+	const spotlightActions: SpotlightAction[] = [
+		{
+			id: 'new-alarm',
+			label: 'Neuer Alarm',
+			icon: 'plus',
+			category: 'Erstellen',
+			onExecute: () => goto('/alarms'),
+		},
+		{
+			id: 'new-timer',
+			label: 'Neuer Timer',
+			icon: 'plus',
+			category: 'Erstellen',
+			onExecute: () => goto('/timers'),
+		},
+		{
+			id: 'world-clock',
+			label: 'Weltuhren',
+			category: 'Navigation',
+			onExecute: () => goto('/world-clock'),
+		},
+		{
+			id: 'settings',
+			label: 'Einstellungen',
+			category: 'Navigation',
+			onExecute: () => goto('/settings'),
+		},
+	];
+
+	// TagStrip visibility
+	let isTagStripVisible = $state(false);
+	function handleTagStripToggle() {
+		isTagStripVisible = !isTagStripVisible;
+	}
+
+	// Base navigation items for Clock
+	const baseNavItems: PillNavItem[] = [
+		{ href: '/', label: 'Übersicht', icon: 'home' },
+		{ href: '/alarms', label: 'Wecker', icon: 'bell' },
+		{ href: '/timers', label: 'Timer', icon: 'timer' },
+		{ href: '/stopwatch', label: 'Stoppuhr', icon: 'stopwatch' },
+		{ href: '/pomodoro', label: 'Pomodoro', icon: 'target' },
+		{ href: '/world-clock', label: 'Weltzeituhr', icon: 'globe' },
+		{ href: '/life', label: 'Lebensuhr', icon: 'heart' },
+		{ href: '/settings', label: 'Einstellungen', icon: 'settings' },
+		{
+			href: '/',
+			label: 'Tags',
+			icon: 'tag',
+			onClick: handleTagStripToggle,
+			active: isTagStripVisible,
+		},
+	];
+
+	// Navigation items filtered by visibility settings
+	const navItems = $derived(
+		filterHiddenNavItems('clock', baseNavItems, userSettings.nav?.hiddenNavItems || {})
+	);
+
+	// Navigation shortcuts (Ctrl+1-9) - use base items for consistent shortcuts
+	const navRoutes = baseNavItems.map((item) => item.href);
+
+	function handleKeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement;
+
+		// Cmd/Ctrl+K to open command bar (works even in inputs)
+		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			event.preventDefault();
+			commandBarOpen = true;
+			return;
+		}
+
+		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+			const num = parseInt(event.key);
+			if (num >= 1 && num <= navRoutes.length) {
+				event.preventDefault();
+				const route = navRoutes[num - 1];
+				if (route) {
+					goto(route);
+				}
+			}
+		}
+	}
+
+	function handleCollapsedChange(collapsed: boolean) {
+		isCollapsed = collapsed;
+		collapsedStore.set(collapsed);
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('clock-nav-collapsed', String(collapsed));
+		}
+	}
+
+	function handleToggleTheme() {
+		theme.toggleMode();
+	}
+
+	function handleThemeModeChange(mode: 'light' | 'dark' | 'system') {
+		theme.setMode(mode);
+	}
+
+	async function handleLogout() {
+		await authStore.signOut();
+		goto('/login');
+	}
+
+	async function handleAuthReady() {
+		// Initialize local-first databases (opens IndexedDB, seeds guest data)
+		await Promise.all([clockStore.initialize(), tagLocalStore.initialize()]);
+
+		// If authenticated, start syncing to server
+		if (authStore.isAuthenticated) {
+			const getToken = () => authStore.getValidToken();
+			clockStore.startSync(getToken);
+			tagMutations.startSync(getToken);
+		}
+
+		// Initialize collapsed state from localStorage
+		const savedCollapsed = localStorage.getItem('clock-nav-collapsed');
+		if (savedCollapsed === 'true') {
+			isCollapsed = true;
+			collapsedStore.set(true);
+		}
+
+		// Show guest welcome modal on first visit
+		initGuestWelcome();
+
+		// Load user settings (requires auth)
+		if (authStore.isAuthenticated) {
+			await userSettings.load();
+		}
+
+		// Redirect to start page if on root and a custom start page is set
+		const currentPath = window.location.pathname;
+		if (currentPath === '/' && userSettings.startPage && userSettings.startPage !== '/') {
+			goto(userSettings.startPage, { replaceState: true });
+		}
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<AuthGate
+	{authStore}
+	{goto}
+	allowGuest={true}
+	onReady={handleAuthReady}
+	requiredTier={getManaApp('clock')?.requiredTier}
+	appName={getManaApp('clock')?.name}
+>
+	<div class="layout-container">
+		<PillNavigation
+			items={navItems}
+			currentPath={$page.url.pathname}
+			appName="Clock"
+			homeRoute="/"
+			onToggleTheme={handleToggleTheme}
+			{isDark}
+			{isCollapsed}
+			onCollapsedChange={handleCollapsedChange}
+			showThemeToggle={true}
+			showThemeVariants={true}
+			{themeVariantItems}
+			{currentThemeVariantLabel}
+			themeMode={theme.mode}
+			onThemeModeChange={handleThemeModeChange}
+			showLanguageSwitcher={true}
+			{languageItems}
+			{currentLanguageLabel}
+			showLogout={authStore.isAuthenticated}
+			onLogout={handleLogout}
+			loginHref="/login"
+			primaryColor="#f59e0b"
+			showAppSwitcher={true}
+			{appItems}
+			{userEmail}
+			settingsHref="/settings"
+			manaHref="/mana"
+			profileHref="/profile"
+			themesHref="/themes"
+			helpHref="/help"
+			allAppsHref="/apps"
+			{spotlightActions}
+		/>
+
+		<!-- TagStrip (above PillNav, toggled via Tags pill) -->
+		{#if isTagStripVisible}
+			<TagStrip
+				tags={allTags.value.map((t) => ({
+					id: t.id,
+					name: t.name,
+					color: t.color || '#3b82f6',
+				}))}
+				selectedIds={[]}
+				onToggle={() => {}}
+				onClear={() => {}}
+				managementHref="/tags"
+			/>
+		{/if}
+
+		<main class="main-content bg-background">
+			<div class="content-wrapper">
+				{@render children()}
+			</div>
+		</main>
+
+		<!-- Global Command Bar (Cmd/K) -->
+		<CommandBar
+			bind:open={commandBarOpen}
+			onClose={() => (commandBarOpen = false)}
+			onSearch={handleCommandBarSearch}
+			onSelect={handleCommandBarSelect}
+			quickActions={commandBarQuickActions}
+			placeholder="Schnellzugriff..."
+			emptyText="Keine Ergebnisse"
+			searchingText="Suche..."
+		/>
+	</div>
+
+	<!-- Onboarding Modal -->
+	{#if clockOnboarding.shouldShow}
+		<MiniOnboardingModal store={clockOnboarding} appName="Uhr" appEmoji="⏰" />
+	{/if}
+
+	<!-- Guest Welcome Modal -->
+	<GuestWelcomeModal
+		appId="clock"
+		visible={showGuestWelcome}
+		onClose={() => (showGuestWelcome = false)}
+		onLogin={() => goto('/login')}
+		onRegister={() => goto('/register')}
+		locale={($locale || 'de') === 'de' ? 'de' : 'en'}
+	/>
+
+	{#if authStore.isAuthenticated}
+		<SessionExpiredBanner locale={$locale || 'de'} loginHref="/login" />
+	{/if}
+	<SyncIndicator />
+</AuthGate>
+
+<style>
+	.layout-container {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	.main-content {
+		position: relative;
+		z-index: 0;
+		padding-bottom: 100px;
+	}
+
+	.content-wrapper {
+		max-width: 100%;
+		margin-left: auto;
+		margin-right: auto;
+		padding: 1rem;
+		position: relative;
+		z-index: 0;
+	}
+
+	@media (min-width: 640px) {
+		.content-wrapper {
+			padding: 1.5rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.content-wrapper {
+			padding: 2rem;
+		}
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/routes/(app)/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/+page.svelte
@ -0,0 +1,115 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { Clock, Bell, Timer, Hourglass, Globe } from '@manacore/shared-icons';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { AppLoadingSkeleton } from '$lib/components/skeletons';
+
+	let isLoading = $state(true);
+
+	onMount(async () => {
+		// No auth redirect - guest mode allowed
+		isLoading = false;
+	});
+
+	const quickLinks = [
+		{
+			href: '/world-clock',
+			icon: Globe,
+			label: 'Weltzeituhr',
+			description: 'Zeitzonen im Blick',
+			color: 'bg-blue-500',
+		},
+		{
+			href: '/alarms',
+			icon: Bell,
+			label: 'Wecker',
+			description: 'Alarme verwalten',
+			color: 'bg-amber-500',
+		},
+		{
+			href: '/timers',
+			icon: Timer,
+			label: 'Timer',
+			description: 'Countdowns starten',
+			color: 'bg-green-500',
+		},
+		{
+			href: '/stopwatch',
+			icon: Hourglass,
+			label: 'Stoppuhr',
+			description: 'Zeit messen',
+			color: 'bg-purple-500',
+		},
+	];
+</script>
+
+<svelte:head>
+	<title>Clock - Dashboard</title>
+</svelte:head>
+
+{#if isLoading}
+	<AppLoadingSkeleton />
+{:else}
+	<div class="dashboard">
+		<header class="mb-8">
+			<h1 class="text-2xl font-bold text-foreground">Clock</h1>
+			<p class="text-muted-foreground text-sm mt-1">Dein Zeit-Management Hub</p>
+		</header>
+
+		<!-- Current Time Display -->
+		<div class="current-time-card mb-8 p-6 rounded-xl bg-card border border-border">
+			<div class="flex items-center gap-4">
+				<div class="p-3 rounded-full bg-primary/10">
+					<Clock size={32} class="text-primary" />
+				</div>
+				<div>
+					<div class="text-4xl font-bold text-foreground tabular-nums">
+						{new Date().toLocaleTimeString('de-DE', {
+							hour: '2-digit',
+							minute: '2-digit',
+							second: '2-digit',
+						})}
+					</div>
+					<div class="text-muted-foreground">
+						{new Date().toLocaleDateString('de-DE', {
+							weekday: 'long',
+							year: 'numeric',
+							month: 'long',
+							day: 'numeric',
+						})}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Quick Links Grid -->
+		<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+			{#each quickLinks as link}
+				<a
+					href={link.href}
+					class="quick-link p-4 rounded-xl bg-card border border-border hover:border-primary/50 transition-all hover:shadow-lg group"
+				>
+					<div class="flex flex-col items-center text-center gap-3">
+						<div
+							class="{link.color} p-3 rounded-full text-white group-hover:scale-110 transition-transform"
+						>
+							<link.icon size={24} />
+						</div>
+						<div>
+							<div class="font-medium text-foreground">{link.label}</div>
+							<div class="text-xs text-muted-foreground">{link.description}</div>
+						</div>
+					</div>
+				</a>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.dashboard {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/routes/(app)/alarms/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/alarms/+page.svelte
@ -0,0 +1,323 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { PageHeader, toast } from '@manacore/shared-ui';
+	import { alarmsStore } from '$lib/stores/alarms.svelte';
+	import type { Alarm } from '@clock/shared';
+	import { ALARM_SOUNDS, DEFAULT_ALARM_PRESETS } from '@clock/shared';
+
+	// Get live query data from layout context
+	const allAlarms: { readonly value: Alarm[] } = getContext('alarms');
+
+	// Quick create form (inline)
+	let newTime = $state('07:00');
+	let newLabel = $state('');
+	let newRepeatDays = $state<number[]>([]);
+	let showOptions = $state(false);
+
+	// Edit modal state
+	let showEditModal = $state(false);
+	let editingId = $state<string | null>(null);
+	let editTime = $state('07:00');
+	let editLabel = $state('');
+	let editRepeatDays = $state<number[]>([]);
+	let editSound = $state('default');
+	let editSnoozeMinutes = $state(5);
+
+	const dayNames = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
+
+	// Find existing alarm for a preset time
+	function findAlarmForPreset(presetTime: string): Alarm | undefined {
+		return allAlarms.value.find((a) => a.time.slice(0, 5) === presetTime);
+	}
+
+	// Toggle a preset alarm
+	async function togglePreset(presetTime: string, presetLabel: string) {
+		const existingAlarm = findAlarmForPreset(presetTime);
+
+		if (existingAlarm) {
+			await alarmsStore.toggleAlarm(existingAlarm.id, allAlarms.value);
+		} else {
+			const result = await alarmsStore.createAlarm({
+				time: presetTime + ':00',
+				label: presetLabel,
+				enabled: true,
+			});
+			if (result.success) {
+				toast.success('Wecker erstellt');
+			} else {
+				toast.error(result.error || 'Fehler beim Erstellen');
+			}
+		}
+	}
+
+	// Quick create new alarm
+	async function handleQuickCreate() {
+		const result = await alarmsStore.createAlarm({
+			time: newTime + ':00',
+			label: newLabel || undefined,
+			repeatDays: newRepeatDays.length > 0 ? newRepeatDays : undefined,
+			enabled: true,
+		});
+
+		if (result.success) {
+			toast.success('Wecker erstellt');
+			// Reset form
+			newTime = '07:00';
+			newLabel = '';
+			newRepeatDays = [];
+			showOptions = false;
+		} else {
+			toast.error(result.error || 'Fehler beim Erstellen');
+		}
+	}
+
+	function toggleNewDay(day: number) {
+		if (newRepeatDays.includes(day)) {
+			newRepeatDays = newRepeatDays.filter((d) => d !== day);
+		} else {
+			newRepeatDays = [...newRepeatDays, day];
+		}
+	}
+
+	function openEditModal(alarm: Alarm) {
+		editingId = alarm.id;
+		editTime = alarm.time.slice(0, 5);
+		editLabel = alarm.label || '';
+		editRepeatDays = alarm.repeatDays || [];
+		editSound = alarm.sound || 'default';
+		editSnoozeMinutes = alarm.snoozeMinutes || 5;
+		showEditModal = true;
+	}
+
+	function closeEditModal() {
+		showEditModal = false;
+		editingId = null;
+	}
+
+	function toggleEditDay(day: number) {
+		if (editRepeatDays.includes(day)) {
+			editRepeatDays = editRepeatDays.filter((d) => d !== day);
+		} else {
+			editRepeatDays = [...editRepeatDays, day];
+		}
+	}
+
+	async function handleEditSubmit() {
+		if (!editingId) return;
+
+		const result = await alarmsStore.updateAlarm(editingId, {
+			time: editTime + ':00',
+			label: editLabel || undefined,
+			repeatDays: editRepeatDays.length > 0 ? editRepeatDays : undefined,
+			sound: editSound,
+			snoozeMinutes: editSnoozeMinutes,
+		});
+
+		if (result.success) {
+			toast.success('Wecker aktualisiert');
+			closeEditModal();
+		} else {
+			toast.error(result.error || 'Fehler beim Speichern');
+		}
+	}
+
+	async function handleDelete(id: string) {
+		const result = await alarmsStore.deleteAlarm(id);
+		if (result.success) {
+			toast.success('Wecker gelöscht');
+		} else {
+			toast.error(result.error || 'Fehler beim Löschen');
+		}
+	}
+
+	async function handleToggle(id: string) {
+		await alarmsStore.toggleAlarm(id, allAlarms.value);
+	}
+
+	function getRepeatText(days: number[] | null) {
+		if (!days || days.length === 0) return 'Einmalig';
+		if (days.length === 7) return 'Täglich';
+		if (days.length === 5 && [1, 2, 3, 4, 5].every((d) => days.includes(d))) return 'Wochentags';
+		if (days.length === 2 && days.includes(0) && days.includes(6)) return 'Am Wochenende';
+		return days.map((d) => dayNames[d]).join(', ');
+	}
+</script>
+
+<PageHeader title={$_('alarm.title')} size="md" centered />
+
+<div class="space-y-4">
+	<!-- Quick Create Form -->
+	<div class="quick-create">
+		<input type="time" class="time-input-inline" bind:value={newTime} />
+		<input type="text" class="label-input" placeholder="Bezeichnung" bind:value={newLabel} />
+		<button
+			class="text-xs text-muted-foreground hover:text-foreground transition-colors px-2"
+			onclick={() => (showOptions = !showOptions)}
+			title="Wiederholung"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				class:text-primary={newRepeatDays.length > 0}
+				viewBox="0 0 20 20"
+				fill="currentColor"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</button>
+		<button class="btn btn-primary btn-sm" onclick={handleQuickCreate}> + </button>
+	</div>
+
+	{#if showOptions}
+		<div class="day-selector-compact">
+			{#each dayNames as day, i}
+				<button
+					type="button"
+					class:active={newRepeatDays.includes(i)}
+					onclick={() => toggleNewDay(i)}
+				>
+					{day}
+				</button>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Default Alarm Presets (Grid) -->
+	<div class="alarm-grid">
+		{#each DEFAULT_ALARM_PRESETS as preset}
+			{@const existingAlarm = findAlarmForPreset(preset.time)}
+			{@const isActive = existingAlarm?.enabled ?? false}
+			<div
+				class="alarm-tile"
+				class:active={isActive}
+				role="button"
+				tabindex="0"
+				onclick={() => togglePreset(preset.time, preset.label)}
+				onkeydown={(e) => e.key === 'Enter' && togglePreset(preset.time, preset.label)}
+			>
+				<div class="text-xl font-light text-foreground tabular-nums text-center">
+					{preset.time}
+				</div>
+				<div class="text-[10px] text-muted-foreground text-center truncate mt-0.5">
+					{existingAlarm?.label || preset.label}
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	<!-- Custom Alarms (Grid) -->
+	{#if allAlarms.value.filter((a) => !DEFAULT_ALARM_PRESETS.some((p) => p.time === a.time.slice(0, 5))).length > 0}
+		{@const customAlarms = allAlarms.value.filter(
+			(a) => !DEFAULT_ALARM_PRESETS.some((p) => p.time === a.time.slice(0, 5))
+		)}
+		<div class="mt-4">
+			<h2 class="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wide">
+				{$_('alarm.custom')}
+			</h2>
+			<div class="alarm-grid">
+				{#each customAlarms as alarm (alarm.id)}
+					<div
+						class="alarm-tile"
+						class:active={alarm.enabled}
+						role="button"
+						tabindex="0"
+						onclick={() => handleToggle(alarm.id)}
+						onkeydown={(e) => e.key === 'Enter' && handleToggle(alarm.id)}
+					>
+						<div class="text-xl font-light text-foreground tabular-nums text-center">
+							{alarm.time.slice(0, 5)}
+						</div>
+						<div class="text-[10px] text-muted-foreground text-center truncate mt-0.5">
+							{alarm.label || getRepeatText(alarm.repeatDays)}
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<!-- Edit Modal -->
+	{#if showEditModal}
+		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+			<div class="card w-full max-w-md">
+				<h2 class="mb-4 text-xl font-semibold">{$_('alarm.edit')}</h2>
+
+				<form
+					onsubmit={(e) => {
+						e.preventDefault();
+						handleEditSubmit();
+					}}
+				>
+					<!-- Time -->
+					<div class="mb-4">
+						<label class="mb-1 block text-sm font-medium">{$_('alarm.time')}</label>
+						<input type="time" class="input time-input" bind:value={editTime} />
+					</div>
+
+					<!-- Label -->
+					<div class="mb-4">
+						<label class="mb-1 block text-sm font-medium">{$_('alarm.label')}</label>
+						<input
+							type="text"
+							class="input"
+							placeholder="Arbeit, Sport, etc."
+							bind:value={editLabel}
+						/>
+					</div>
+
+					<!-- Repeat Days -->
+					<div class="mb-4">
+						<label class="mb-2 block text-sm font-medium">{$_('alarm.repeat')}</label>
+						<div class="day-selector">
+							{#each dayNames as day, i}
+								<button
+									type="button"
+									class:active={editRepeatDays.includes(i)}
+									onclick={() => toggleEditDay(i)}
+								>
+									{day}
+								</button>
+							{/each}
+						</div>
+					</div>
+
+					<!-- Sound -->
+					<div class="mb-4">
+						<label class="mb-1 block text-sm font-medium">{$_('alarm.sound')}</label>
+						<select class="input" bind:value={editSound}>
+							{#each ALARM_SOUNDS as sound}
+								<option value={sound.id}>{sound.nameDE}</option>
+							{/each}
+						</select>
+					</div>
+
+					<!-- Snooze -->
+					<div class="mb-6">
+						<label class="mb-1 block text-sm font-medium">{$_('alarm.snooze')}</label>
+						<select class="input" bind:value={editSnoozeMinutes}>
+							<option value={5}>5 Minuten</option>
+							<option value={10}>10 Minuten</option>
+							<option value={15}>15 Minuten</option>
+							<option value={30}>30 Minuten</option>
+						</select>
+					</div>
+
+					<!-- Actions -->
+					<div class="flex gap-3">
+						<button type="button" class="btn btn-secondary flex-1" onclick={closeEditModal}>
+							{$_('common.cancel')}
+						</button>
+						<button type="submit" class="btn btn-primary flex-1">
+							{$_('common.save')}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	{/if}
+</div>
--- a/apps-archived/clock/apps/web/src/routes/(app)/feedback/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/feedback/+page.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { FeedbackPage } from '@manacore/feedback';
+	import { createFeedbackService } from '@manacore/feedback';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	// Get auth URL dynamically at runtime
+	function getAuthUrl(): string {
+		if (browser && typeof window !== 'undefined') {
+			const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+				.__PUBLIC_MANA_CORE_AUTH_URL__;
+			return injectedUrl || 'http://localhost:3001';
+		}
+		return 'http://localhost:3001';
+	}
+
+	const feedbackService = createFeedbackService({
+		appName: 'clock',
+		apiUrl: getAuthUrl(),
+	});
+
+	async function handleSubmit(data: { type: string; message: string; email?: string }) {
+		const token = await authStore.getAccessToken();
+		return feedbackService.submit({
+			...data,
+			token: token || undefined,
+		});
+	}
+</script>
+
+<FeedbackPage appName="Clock" onSubmit={handleSubmit} userEmail={authStore.user?.email} />
--- a/apps-archived/clock/apps/web/src/routes/(app)/help/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/help/+page.svelte
@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { locale } from 'svelte-i18n';
+	import { HelpPage, getHelpTranslations } from '@manacore/help';
+	import { getClockHelpContent } from '$lib/content/help/index.js';
+
+	const content = $derived(getClockHelpContent($locale ?? 'de'));
+	const translations = $derived(
+		getHelpTranslations($locale ?? 'de', {
+			subtitle:
+				$locale === 'de'
+					? 'Finde Antworten und lerne Clock kennen'
+					: 'Find answers and learn how to use Clock',
+		})
+	);
+</script>
+
+<svelte:head>
+	<title>{translations.title} | Clock</title>
+</svelte:head>
+
+<HelpPage
+	{content}
+	appName="Clock"
+	appId="clock"
+	{translations}
+	showBackButton
+	onBack={() => goto('/')}
+	showGettingStarted={false}
+	showChangelog={false}
+	defaultSection="faq"
+/>
--- a/apps-archived/clock/apps/web/src/routes/(app)/mana/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/mana/+page.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+	import { SubscriptionPage } from '@manacore/subscriptions';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<SubscriptionPage user={authStore.user} appName="Clock" />
--- a/apps-archived/clock/apps/web/src/routes/(app)/profile/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/profile/+page.svelte
@ -0,0 +1,6 @@
+<script lang="ts">
+	import { ProfilePage } from '@manacore/shared-profile-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+</script>
+
+<ProfilePage user={authStore.user} appName="Clock" />
--- a/apps-archived/clock/apps/web/src/routes/(app)/settings/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/settings/+page.svelte
@ -0,0 +1,108 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { userSettings } from '$lib/stores/user-settings.svelte';
+	import { GlobalSettingsSection } from '@manacore/shared-ui';
+	import { APP_VERSION } from '$lib/version';
+
+	onMount(async () => {
+		await userSettings.load();
+	});
+
+	// Settings state
+	let clockFormat = $state<'24h' | '12h'>('24h');
+
+	// Load settings from localStorage
+	if (typeof localStorage !== 'undefined') {
+		const savedFormat = localStorage.getItem('clock-format');
+		if (savedFormat === '12h') {
+			clockFormat = '12h';
+		}
+	}
+
+	function setClockFormat(format: '24h' | '12h') {
+		clockFormat = format;
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('clock-format', format);
+		}
+	}
+
+	// Translation function for GlobalSettingsSection
+	function translate(key: string): string {
+		return $_?.(key) ?? key;
+	}
+</script>
+
+<div class="mx-auto max-w-2xl space-y-6">
+	<h1 class="text-2xl font-bold text-foreground">{$_('settings.title')}</h1>
+
+	<!-- Global Settings Section (synced across all apps) -->
+	<GlobalSettingsSection
+		{userSettings}
+		appId="clock"
+		title="App-Einstellungen"
+		description="Diese Einstellungen werden mit allen Mana Apps synchronisiert"
+		t={translate}
+	/>
+
+	<!-- Clock-specific Settings -->
+	<div class="card">
+		<h2 class="mb-4 text-lg font-semibold">{$_('settings.clockFormat')}</h2>
+
+		<div>
+			<label class="mb-2 block text-sm font-medium">Zeitformat</label>
+			<div class="flex gap-2">
+				<button
+					class="btn btn-sm"
+					class:btn-primary={clockFormat === '24h'}
+					class:btn-secondary={clockFormat !== '24h'}
+					onclick={() => setClockFormat('24h')}
+				>
+					{$_('settings.format24h')}
+				</button>
+				<button
+					class="btn btn-sm"
+					class:btn-primary={clockFormat === '12h'}
+					class:btn-secondary={clockFormat !== '12h'}
+					onclick={() => setClockFormat('12h')}
+				>
+					{$_('settings.format12h')}
+				</button>
+			</div>
+		</div>
+	</div>
+
+	<!-- Notifications Section -->
+	<div class="card">
+		<h2 class="mb-4 text-lg font-semibold">{$_('settings.notifications')}</h2>
+		<p class="text-sm text-muted-foreground">
+			Benachrichtigungen werden für Wecker, Timer und Pomodoro-Sitzungen verwendet.
+		</p>
+
+		<button
+			class="btn btn-secondary mt-4"
+			onclick={async () => {
+				if ('Notification' in window) {
+					const permission = await Notification.requestPermission();
+					if (permission === 'granted') {
+						new Notification('Clock', {
+							body: 'Benachrichtigungen sind jetzt aktiviert!',
+						});
+					}
+				}
+			}}
+		>
+			Benachrichtigungen aktivieren
+		</button>
+	</div>
+
+	<!-- Sounds Section -->
+	<div class="card">
+		<h2 class="mb-4 text-lg font-semibold">{$_('settings.sounds')}</h2>
+		<p class="text-sm text-muted-foreground">
+			Töne können für einzelne Wecker und Timer in deren Einstellungen angepasst werden.
+		</p>
+	</div>
+
+	<p class="mt-8 pb-4 text-center text-xs text-gray-400 dark:text-gray-600">v{APP_VERSION}</p>
+</div>
--- a/apps-archived/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/stopwatch/+page.svelte
@ -0,0 +1,466 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+	import { PageHeader } from '@manacore/shared-ui';
+	import { Clock } from '@manacore/shared-icons';
+	import {
+		stopwatchesStore,
+		formatTime,
+		formatLapTime,
+		STOPWATCH_COLORS,
+		type Stopwatch,
+	} from '$lib/stores/stopwatch.svelte';
+
+	// Edit state
+	let editingLabelId = $state<string | null>(null);
+	let editingLabelValue = $state('');
+
+	function handleCreateNew() {
+		const id = stopwatchesStore.create();
+		stopwatchesStore.start(id);
+	}
+
+	function handleFocus(id: string) {
+		stopwatchesStore.setFocused(id);
+	}
+
+	function startEditLabel(sw: Stopwatch) {
+		editingLabelId = sw.id;
+		editingLabelValue = sw.label;
+	}
+
+	function saveLabel() {
+		if (editingLabelId && editingLabelValue.trim()) {
+			stopwatchesStore.updateLabel(editingLabelId, editingLabelValue.trim());
+		}
+		editingLabelId = null;
+	}
+
+	function handleLabelKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			saveLabel();
+		} else if (e.key === 'Escape') {
+			editingLabelId = null;
+		}
+	}
+
+	// Derived states
+	let focused = $derived(stopwatchesStore.focusedStopwatch);
+	let otherStopwatches = $derived(
+		stopwatchesStore.stopwatches.filter((sw) => sw.id !== stopwatchesStore.focusedId)
+	);
+</script>
+
+<div class="flex items-center justify-between mb-6">
+	<PageHeader title={$_('stopwatch.title')} size="md" />
+	<button class="btn btn-primary btn-sm" onclick={handleCreateNew}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-4 w-4 mr-1"
+			viewBox="0 0 20 20"
+			fill="currentColor"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+		{$_('stopwatch.new')}
+	</button>
+</div>
+
+{#if stopwatchesStore.stopwatches.length === 0}
+	<!-- Empty State -->
+	<div class="flex flex-col items-center justify-center py-16 text-center">
+		<div class="w-24 h-24 mb-6 rounded-full bg-muted flex items-center justify-center">
+			<Clock size={20} class="text-muted-foreground" />
+		</div>
+		<h2 class="text-xl font-medium text-foreground mb-2">{$_('stopwatch.noStopwatches')}</h2>
+		<p class="text-muted-foreground mb-6 max-w-sm">{$_('stopwatch.noStopwatchesDescription')}</p>
+		<button class="btn btn-primary btn-lg" onclick={handleCreateNew}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-5 w-5 mr-2"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+			{$_('stopwatch.startFirst')}
+		</button>
+	</div>
+{:else}
+	<div class="space-y-4">
+		<!-- Focused Stopwatch (Large) -->
+		{#if focused}
+			{@const bestLap = stopwatchesStore.getBestLap(focused.id)}
+			{@const worstLap = stopwatchesStore.getWorstLap(focused.id)}
+			<div class="stopwatch-card-focused" style="--sw-color: {focused.color}">
+				<!-- Header with Label and Delete -->
+				<div class="flex items-center justify-between mb-4">
+					<div class="flex items-center gap-2">
+						<div
+							class="w-3 h-3 rounded-full"
+							class:animate-pulse={focused.isRunning}
+							style="background-color: {focused.color}"
+						></div>
+						{#if editingLabelId === focused.id}
+							<input
+								type="text"
+								class="bg-transparent border-b border-primary text-lg font-medium focus:outline-none"
+								bind:value={editingLabelValue}
+								onblur={saveLabel}
+								onkeydown={handleLabelKeydown}
+								autofocus
+							/>
+						{:else}
+							<button
+								class="text-lg font-medium hover:text-primary transition-colors"
+								onclick={() => startEditLabel(focused)}
+							>
+								{focused.label}
+							</button>
+						{/if}
+					</div>
+					<button
+						class="text-muted-foreground hover:text-error transition-colors p-1"
+						onclick={() => stopwatchesStore.delete(focused.id)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<!-- Time Display -->
+				<div class="flex flex-col items-center mb-6">
+					<div
+						class="digital-clock text-5xl sm:text-6xl font-light tabular-nums"
+						class:text-primary={focused.isRunning}
+					>
+						{formatTime(focused.elapsedTime)}
+					</div>
+					{#if focused.laps.length > 0}
+						<div class="text-sm text-muted-foreground mt-1">
+							{focused.laps.length}
+							{$_('stopwatch.laps')}
+						</div>
+					{/if}
+				</div>
+
+				<!-- Controls -->
+				<div class="flex justify-center gap-3 mb-6">
+					{#if focused.isRunning}
+						<button
+							class="btn btn-secondary btn-lg"
+							onclick={() => stopwatchesStore.pause(focused.id)}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5 mr-2"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							{$_('stopwatch.stop')}
+						</button>
+						<button class="btn btn-primary btn-lg" onclick={() => stopwatchesStore.lap(focused.id)}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5 mr-2"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							{$_('stopwatch.lap')}
+						</button>
+					{:else if focused.elapsedTime > 0}
+						<button
+							class="btn btn-primary btn-lg"
+							onclick={() => stopwatchesStore.start(focused.id)}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5 mr-2"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							{$_('stopwatch.continue')}
+						</button>
+						<button
+							class="btn btn-secondary btn-lg"
+							onclick={() => stopwatchesStore.reset(focused.id)}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5 mr-2"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							{$_('stopwatch.reset')}
+						</button>
+					{:else}
+						<button
+							class="btn btn-primary btn-lg"
+							onclick={() => stopwatchesStore.start(focused.id)}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5 mr-2"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							{$_('stopwatch.start')}
+						</button>
+					{/if}
+				</div>
+
+				<!-- Laps List -->
+				{#if focused.laps.length > 0}
+					<div class="border-t border-border pt-4">
+						<h3 class="text-sm font-medium text-muted-foreground mb-3">
+							{$_('stopwatch.laps')} ({focused.laps.length})
+						</h3>
+						<div class="max-h-48 overflow-y-auto space-y-1 scrollbar-thin">
+							{#each [...focused.laps].reverse() as lap (lap.number)}
+								{@const isBest = bestLap?.number === lap.number}
+								{@const isWorst = worstLap?.number === lap.number}
+								<div class="lap-item rounded-md" class:best={isBest} class:worst={isWorst}>
+									<span class="text-sm flex items-center gap-2">
+										<span class="text-muted-foreground">#{lap.number}</span>
+										{#if isBest}
+											<span class="text-xs px-1.5 py-0.5 rounded bg-success/20 text-success"
+												>{$_('stopwatch.best')}</span
+											>
+										{:else if isWorst}
+											<span class="text-xs px-1.5 py-0.5 rounded bg-error/20 text-error"
+												>{$_('stopwatch.worst')}</span
+											>
+										{/if}
+									</span>
+									<div class="text-right">
+										<span class="font-mono text-sm">{formatLapTime(lap.time)}</span>
+										<span class="font-mono text-xs text-muted-foreground ml-2">
+											{formatTime(lap.splitTime)}
+										</span>
+									</div>
+								</div>
+							{/each}
+						</div>
+						<div class="flex justify-between border-t border-border mt-3 pt-3">
+							<span class="text-sm font-medium">{$_('stopwatch.total')}</span>
+							<span class="font-mono text-sm font-medium">
+								{formatTime(focused.elapsedTime)}
+							</span>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Other Stopwatches (Compact Grid) -->
+		{#if otherStopwatches.length > 0}
+			<div>
+				<h2 class="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wide">
+					{$_('stopwatch.otherStopwatches')} ({otherStopwatches.length})
+				</h2>
+				<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+					{#each otherStopwatches as sw (sw.id)}
+						<div
+							class="stopwatch-card-compact"
+							class:running={sw.isRunning}
+							style="--sw-color: {sw.color}"
+							onclick={() => handleFocus(sw.id)}
+							onkeydown={(e) => e.key === 'Enter' && handleFocus(sw.id)}
+							role="button"
+							tabindex="0"
+						>
+							<!-- Status indicator -->
+							<div class="flex items-center justify-between mb-2">
+								<div
+									class="w-2 h-2 rounded-full"
+									class:animate-pulse={sw.isRunning}
+									style="background-color: {sw.color}"
+								></div>
+								<button
+									class="text-muted-foreground hover:text-error p-0.5 -mr-1"
+									onclick={(e) => {
+										e.stopPropagation();
+										stopwatchesStore.delete(sw.id);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-3.5 w-3.5"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+							</div>
+
+							<!-- Time -->
+							<div class="text-xl font-light tabular-nums mb-1" class:text-primary={sw.isRunning}>
+								{formatTime(sw.elapsedTime)}
+							</div>
+
+							<!-- Label -->
+							<div class="text-xs text-muted-foreground truncate mb-2">
+								{sw.label}
+							</div>
+
+							<!-- Quick actions -->
+							<div class="flex gap-1">
+								{#if sw.isRunning}
+									<button
+										class="btn btn-secondary btn-sm flex-1 text-xs"
+										onclick={(e) => {
+											e.stopPropagation();
+											stopwatchesStore.pause(sw.id);
+										}}
+									>
+										{$_('stopwatch.stop')}
+									</button>
+								{:else}
+									<button
+										class="btn btn-primary btn-sm flex-1 text-xs"
+										onclick={(e) => {
+											e.stopPropagation();
+											stopwatchesStore.start(sw.id);
+										}}
+									>
+										{sw.elapsedTime > 0 ? $_('stopwatch.continue') : $_('stopwatch.start')}
+									</button>
+								{/if}
+								{#if sw.elapsedTime > 0 && !sw.isRunning}
+									<button
+										class="btn btn-ghost btn-sm text-xs"
+										onclick={(e) => {
+											e.stopPropagation();
+											stopwatchesStore.reset(sw.id);
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-3.5 w-3.5"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+								{/if}
+							</div>
+
+							<!-- Lap badge -->
+							{#if sw.laps.length > 0}
+								<div class="absolute top-2 right-8 text-xs bg-muted px-1.5 py-0.5 rounded-full">
+									{sw.laps.length}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.stopwatch-card-focused {
+		background-color: hsl(var(--color-surface));
+		border-radius: var(--radius-lg);
+		padding: var(--spacing-lg);
+		border: 2px solid var(--sw-color, hsl(var(--color-primary)));
+		box-shadow: 0 0 20px
+			color-mix(in srgb, var(--sw-color, hsl(var(--color-primary))) 20%, transparent);
+	}
+
+	.stopwatch-card-compact {
+		position: relative;
+		background-color: hsl(var(--color-surface));
+		border-radius: var(--radius-md);
+		padding: 0.75rem;
+		border: 1px solid hsl(var(--color-border));
+		transition: all var(--transition-base);
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.stopwatch-card-compact:hover {
+		border-color: var(--sw-color, hsl(var(--color-primary)));
+		background-color: hsl(var(--color-muted) / 0.3);
+	}
+
+	.stopwatch-card-compact.running {
+		border-color: var(--sw-color, hsl(var(--color-primary)));
+		box-shadow: 0 0 10px
+			color-mix(in srgb, var(--sw-color, hsl(var(--color-primary))) 15%, transparent);
+	}
+
+	.lap-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0.5rem 0.75rem;
+		background-color: hsl(var(--color-muted) / 0.3);
+	}
+
+	.lap-item.best {
+		background-color: hsl(var(--color-success) / 0.1);
+	}
+
+	.lap-item.worst {
+		background-color: hsl(var(--color-error) / 0.1);
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/routes/(app)/tags/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/tags/+page.svelte
@ -0,0 +1,45 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { tagMutations } from '@manacore/shared-stores';
+	import type { Tag } from '@manacore/shared-tags';
+
+	// Live tags from layout context
+	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
+</script>
+
+<svelte:head>
+	<title>Tags | Clock</title>
+</svelte:head>
+
+<div class="tags-page">
+	<h1>Tags verwalten</h1>
+	<p class="text-sm text-muted-foreground mb-4">
+		Tags sind app-übergreifend — Änderungen gelten in allen ManaCore-Apps.
+	</p>
+
+	{#if tagsCtx.value.length === 0}
+		<p>Keine Tags vorhanden.</p>
+	{:else}
+		<div class="grid gap-2">
+			{#each tagsCtx.value as tag}
+				<div class="flex items-center gap-2 p-2 rounded-lg bg-card">
+					<span class="w-3 h-3 rounded-full" style="background-color: {tag.color}"></span>
+					<span>{tag.name}</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tags-page {
+		padding: 1.5rem;
+		max-width: 600px;
+		margin: 0 auto;
+	}
+	h1 {
+		font-size: 1.5rem;
+		font-weight: 700;
+		margin-bottom: 0.5rem;
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/routes/(app)/themes/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/themes/+page.svelte
@ -0,0 +1,30 @@
+<script lang="ts">
+	import { theme } from '$lib/stores/theme.svelte';
+	import { THEME_DEFINITIONS, THEME_VARIANTS } from '@manacore/shared-theme';
+</script>
+
+<div class="mx-auto max-w-4xl">
+	<h1 class="mb-6 text-2xl font-bold text-foreground">Alle Themes</h1>
+
+	<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		{#each THEME_VARIANTS as variant}
+			{@const def = THEME_DEFINITIONS[variant]}
+			<button
+				class="card text-left transition-all hover:border-primary/50"
+				class:border-primary={theme.variant === variant}
+				onclick={() => theme.setVariant(variant)}
+			>
+				<div class="flex items-center gap-3">
+					<span class="text-3xl">{def.icon}</span>
+					<div>
+						<h3 class="font-semibold">{def.label}</h3>
+						<p class="text-sm text-muted-foreground">{def.description}</p>
+					</div>
+				</div>
+				{#if theme.variant === variant}
+					<div class="mt-3 text-sm text-primary">✓ Aktiv</div>
+				{/if}
+			</button>
+		{/each}
+	</div>
+</div>
--- a/apps-archived/clock/apps/web/src/routes/(app)/timers/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/timers/+page.svelte
@ -0,0 +1,292 @@
+<script lang="ts">
+	import { getContext, onDestroy } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { browser } from '$app/environment';
+	import { PageHeader, toast } from '@manacore/shared-ui';
+	import { timersStore } from '$lib/stores/timers.svelte';
+	import { QUICK_TIMER_PRESETS, formatDuration } from '@clock/shared';
+	import type { Timer } from '@clock/shared';
+
+	// Get live query data from layout context
+	const allTimersQuery: { readonly value: Timer[] } = getContext('timers');
+
+	// Form state (inline on page)
+	let formMinutes = $state(5);
+	let formSeconds = $state(0);
+	let formLabel = $state('');
+
+	// Local timers
+	interface LocalTimer {
+		id: string;
+		label: string;
+		durationSeconds: number;
+		remainingSeconds: number;
+		status: 'idle' | 'running' | 'paused' | 'finished';
+		createdAt: Date;
+	}
+	let localTimers = $state<LocalTimer[]>([]);
+	let intervals: Map<string, ReturnType<typeof setInterval>> = new Map();
+	let allTimers = $derived([...allTimersQuery.value, ...localTimers]);
+
+	onDestroy(() => {
+		intervals.forEach((interval) => clearInterval(interval));
+	});
+
+	function startLocalCountdown(timerId: string, isLocal: boolean = false) {
+		if (intervals.has(timerId)) {
+			clearInterval(intervals.get(timerId));
+		}
+
+		const interval = setInterval(() => {
+			if (isLocal) {
+				const timer = localTimers.find((t) => t.id === timerId);
+				if (!timer || timer.status !== 'running') {
+					clearInterval(interval);
+					intervals.delete(timerId);
+					return;
+				}
+
+				const newRemaining = Math.max(0, timer.remainingSeconds - 1);
+				localTimers = localTimers.map((t) =>
+					t.id === timerId
+						? {
+								...t,
+								remainingSeconds: newRemaining,
+								status: newRemaining === 0 ? 'finished' : 'running',
+							}
+						: t
+				);
+
+				if (newRemaining === 0) {
+					clearInterval(interval);
+					intervals.delete(timerId);
+					toast.success($_('timer.finished'));
+					if (browser && 'Notification' in window && Notification.permission === 'granted') {
+						new Notification('Timer', { body: 'Timer abgelaufen!' });
+					}
+				}
+			} else {
+				const timer = allTimersQuery.value.find((t) => t.id === timerId);
+				if (!timer || timer.status !== 'running') {
+					clearInterval(interval);
+					intervals.delete(timerId);
+					return;
+				}
+
+				const newRemaining = Math.max(0, (timer.remainingSeconds || 0) - 1);
+				timersStore.updateLocalTimer(timerId, newRemaining);
+
+				if (newRemaining === 0) {
+					clearInterval(interval);
+					intervals.delete(timerId);
+					toast.success($_('timer.finished'));
+				}
+			}
+		}, 1000);
+
+		intervals.set(timerId, interval);
+	}
+
+	function createAndStartTimer() {
+		const durationSeconds = formMinutes * 60 + formSeconds;
+		if (durationSeconds <= 0) {
+			toast.error('Bitte eine gültige Zeit eingeben');
+			return;
+		}
+
+		const newTimer: LocalTimer = {
+			id: crypto.randomUUID(),
+			label: formLabel || formatDuration(durationSeconds),
+			durationSeconds,
+			remainingSeconds: durationSeconds,
+			status: 'running',
+			createdAt: new Date(),
+		};
+		localTimers = [...localTimers, newTimer];
+		startLocalCountdown(newTimer.id, true);
+		toast.success('Timer gestartet');
+		formLabel = '';
+	}
+
+	function setPreset(seconds: number) {
+		formMinutes = Math.floor(seconds / 60);
+		formSeconds = seconds % 60;
+	}
+
+	async function handleStart(id: string, isLocal: boolean) {
+		if (isLocal) {
+			localTimers = localTimers.map((t) =>
+				t.id === id ? { ...t, status: 'running' as const } : t
+			);
+			startLocalCountdown(id, true);
+		} else {
+			const result = await timersStore.startTimer(id);
+			if (result.success) startLocalCountdown(id, false);
+		}
+	}
+
+	async function handlePause(id: string, isLocal: boolean) {
+		if (intervals.has(id)) {
+			clearInterval(intervals.get(id));
+			intervals.delete(id);
+		}
+		if (isLocal) {
+			localTimers = localTimers.map((t) => (t.id === id ? { ...t, status: 'paused' as const } : t));
+		} else {
+			await timersStore.pauseTimer(id);
+		}
+	}
+
+	async function handleReset(id: string, isLocal: boolean) {
+		if (intervals.has(id)) {
+			clearInterval(intervals.get(id));
+			intervals.delete(id);
+		}
+		if (isLocal) {
+			localTimers = localTimers.map((t) =>
+				t.id === id ? { ...t, remainingSeconds: t.durationSeconds, status: 'idle' as const } : t
+			);
+		} else {
+			await timersStore.resetTimer(id);
+		}
+	}
+
+	async function handleDelete(id: string, isLocal: boolean) {
+		if (intervals.has(id)) {
+			clearInterval(intervals.get(id));
+			intervals.delete(id);
+		}
+		if (isLocal) {
+			localTimers = localTimers.filter((t) => t.id !== id);
+		} else {
+			await timersStore.deleteTimer(id);
+		}
+	}
+
+	function getTimerDisplay(timer: any) {
+		const remaining = timer.remainingSeconds ?? timer.durationSeconds;
+		return formatDuration(remaining);
+	}
+
+	function getProgress(timer: any) {
+		const remaining = timer.remainingSeconds ?? timer.durationSeconds;
+		return (remaining / timer.durationSeconds) * 100;
+	}
+
+	function isLocalTimer(timer: any): boolean {
+		return localTimers.some((t) => t.id === timer.id);
+	}
+</script>
+
+<PageHeader title={$_('timer.title')} size="md" centered />
+
+<div class="space-y-4">
+	<!-- Quick Create Form -->
+	<div class="quick-create">
+		<div class="flex items-center gap-1">
+			<input
+				type="number"
+				class="time-input-inline w-12 text-center"
+				min="0"
+				max="99"
+				bind:value={formMinutes}
+			/>
+			<span class="text-muted-foreground">:</span>
+			<input
+				type="number"
+				class="time-input-inline w-12 text-center"
+				min="0"
+				max="59"
+				bind:value={formSeconds}
+			/>
+		</div>
+		<input type="text" class="label-input" placeholder="Bezeichnung" bind:value={formLabel} />
+		<button class="btn btn-primary btn-sm" onclick={createAndStartTimer}> Start </button>
+	</div>
+
+	<!-- Quick Presets -->
+	<div class="grid grid-cols-4 sm:grid-cols-8 gap-1.5">
+		{#each QUICK_TIMER_PRESETS as preset}
+			<button class="alarm-tile text-center" onclick={() => setPreset(preset.seconds)}>
+				<span class="text-lg font-light tabular-nums">{preset.label}</span>
+			</button>
+		{/each}
+	</div>
+
+	{#if allTimers.length > 0}
+		<!-- Active Timers -->
+		<div>
+			<h2 class="text-xs font-medium text-muted-foreground mb-2 uppercase tracking-wide">
+				Aktiv ({allTimers.length})
+			</h2>
+			<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+				{#each allTimers as timer (timer.id)}
+					{@const isLocal = isLocalTimer(timer)}
+					<div class="alarm-tile" class:active={timer.status === 'running'}>
+						<div class="flex items-start justify-between mb-1">
+							<span
+								class="text-xl font-light tabular-nums"
+								class:text-primary={timer.status === 'running'}
+								class:text-green-500={timer.status === 'finished'}
+							>
+								{getTimerDisplay(timer)}
+							</span>
+							<button
+								class="text-muted-foreground hover:text-error p-0.5 -mr-1"
+								onclick={(e) => {
+									e.stopPropagation();
+									handleDelete(timer.id, isLocal);
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-3.5 w-3.5"
+									viewBox="0 0 20 20"
+									fill="currentColor"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+							</button>
+						</div>
+						<div class="text-[10px] text-muted-foreground truncate mb-2">{timer.label}</div>
+						<div class="h-1 bg-muted rounded-full overflow-hidden mb-2">
+							<div
+								class="h-full rounded-full transition-all duration-1000"
+								class:bg-primary={timer.status !== 'finished'}
+								class:bg-green-500={timer.status === 'finished'}
+								style="width: {getProgress(timer)}%"
+							></div>
+						</div>
+						<div class="flex gap-1">
+							{#if timer.status === 'running'}
+								<button
+									class="btn btn-secondary btn-sm flex-1 text-xs"
+									onclick={() => handlePause(timer.id, isLocal)}
+								>
+									Pause
+								</button>
+							{:else}
+								<button
+									class="btn btn-primary btn-sm flex-1 text-xs"
+									onclick={() => handleStart(timer.id, isLocal)}
+								>
+									{timer.status === 'finished' ? 'Neu' : 'Start'}
+								</button>
+							{/if}
+							<button
+								class="btn btn-ghost btn-sm text-xs"
+								onclick={() => handleReset(timer.id, isLocal)}
+							>
+								Reset
+							</button>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
--- a/apps-archived/clock/apps/web/src/routes/(app)/world-clock/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(app)/world-clock/+page.svelte
@ -0,0 +1,368 @@
+<script lang="ts">
+	import { getContext, onDestroy } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { PageHeader, toast } from '@manacore/shared-ui';
+	import { worldClocksStore } from '$lib/stores/world-clocks.svelte';
+	import { POPULAR_TIMEZONES } from '@clock/shared';
+	import type { WorldClock } from '@clock/shared';
+	import WorldMap from '$lib/components/WorldMap.svelte';
+	import { Monitor } from '@manacore/shared-icons';
+
+	// Get live query data from layout context
+	const allWorldClocks: { readonly value: WorldClock[] } = getContext('worldClocks');
+
+	// State
+	let showAddModal = $state(false);
+	let searchQuery = $state('');
+	let currentTime = $state(new Date());
+	let interval: ReturnType<typeof setInterval> | null = null;
+	let showMap = $state(true);
+
+	// Selected city timezones for map highlighting
+	let selectedTimezones = $derived(allWorldClocks.value.map((wc) => wc.timezone));
+
+	// Handle map city click
+	function handleMapCityClick(timezone: string, cityName: string) {
+		const alreadyAdded = allWorldClocks.value.some((wc) => wc.timezone === timezone);
+		if (alreadyAdded) {
+			toast.info(`${cityName} ist bereits hinzugefügt`);
+		} else {
+			addCity(timezone, cityName);
+		}
+	}
+
+	// Filtered timezones based on search
+	let filteredTimezones = $derived(
+		searchQuery
+			? POPULAR_TIMEZONES.filter(
+					(tz) =>
+						tz.city.toLowerCase().includes(searchQuery.toLowerCase()) ||
+						tz.timezone.toLowerCase().includes(searchQuery.toLowerCase())
+				)
+			: POPULAR_TIMEZONES
+	);
+
+	// Update time every second
+	interval = setInterval(() => {
+		currentTime = new Date();
+	}, 1000);
+
+	onDestroy(() => {
+		if (interval) {
+			clearInterval(interval);
+		}
+	});
+
+	function openAddModal() {
+		searchQuery = '';
+		showAddModal = true;
+	}
+
+	function closeAddModal() {
+		showAddModal = false;
+	}
+
+	async function addCity(timezone: string, cityName: string) {
+		const result = await worldClocksStore.addWorldClock(
+			{ timezone, cityName },
+			allWorldClocks.value.length
+		);
+
+		if (result.success) {
+			toast.success(`${cityName} hinzugefügt`);
+			closeAddModal();
+		} else {
+			toast.error(result.error || 'Fehler beim Hinzufügen');
+		}
+	}
+
+	async function removeCity(id: string) {
+		const result = await worldClocksStore.removeWorldClock(id);
+		if (result.success) {
+			toast.success('Stadt entfernt');
+		}
+	}
+
+	function getTimeForTimezone(timezone: string) {
+		try {
+			const formatter = new Intl.DateTimeFormat('de-DE', {
+				timeZone: timezone,
+				hour: '2-digit',
+				minute: '2-digit',
+				hour12: false,
+			});
+			return formatter.format(currentTime);
+		} catch {
+			return '--:--';
+		}
+	}
+
+	function getDateForTimezone(timezone: string) {
+		try {
+			const formatter = new Intl.DateTimeFormat('de-DE', {
+				timeZone: timezone,
+				weekday: 'short',
+				day: 'numeric',
+				month: 'short',
+			});
+			return formatter.format(currentTime);
+		} catch {
+			return '';
+		}
+	}
+
+	function getOffsetText(timezone: string) {
+		try {
+			// Get local offset
+			const localOffset = currentTime.getTimezoneOffset();
+
+			// Get target timezone offset
+			const targetDate = new Date(currentTime.toLocaleString('en-US', { timeZone: timezone }));
+			const localDate = new Date(currentTime.toLocaleString('en-US', { timeZone: 'UTC' }));
+			const utcDate = new Date(currentTime.toUTCString().slice(0, -4));
+
+			const targetOffset = (targetDate.getTime() - utcDate.getTime()) / (1000 * 60);
+			const diffMinutes = targetOffset + localOffset;
+			const diffHours = Math.round(diffMinutes / 60);
+
+			if (diffHours === 0) {
+				return $_('worldClock.same');
+			} else if (diffHours > 0) {
+				return `+${diffHours}h`;
+			} else {
+				return `${diffHours}h`;
+			}
+		} catch {
+			return '';
+		}
+	}
+
+	function isDaytime(timezone: string) {
+		try {
+			const formatter = new Intl.DateTimeFormat('en-US', {
+				timeZone: timezone,
+				hour: 'numeric',
+				hour12: false,
+			});
+			const hour = parseInt(formatter.format(currentTime));
+			return hour >= 6 && hour < 20;
+		} catch {
+			return true;
+		}
+	}
+</script>
+
+<PageHeader title={$_('worldClock.title')} size="md" centered>
+	{#snippet actions()}
+		<div class="flex items-center gap-2">
+			<button
+				class="btn btn-ghost btn-sm px-2"
+				onclick={() => (showMap = !showMap)}
+				title={showMap ? 'Karte ausblenden' : 'Karte anzeigen'}
+			>
+				<Monitor size={20} />
+			</button>
+			<button class="btn btn-primary btn-sm" onclick={openAddModal}>
+				+ {$_('worldClock.add')}
+			</button>
+		</div>
+	{/snippet}
+</PageHeader>
+
+<div class="world-clock-page">
+	<!-- World Map (Full Width) -->
+	{#if showMap}
+		<div class="map-section">
+			<div class="map-container">
+				<WorldMap
+					selectedCities={selectedTimezones}
+					onCityClick={handleMapCityClick}
+					{currentTime}
+				/>
+			</div>
+			<p class="text-center text-xs text-muted-foreground py-2">
+				Klicke auf eine Stadt um sie hinzuzufügen
+			</p>
+		</div>
+	{/if}
+
+	<!-- World Clock List -->
+	{#if allWorldClocks.value.length === 0}
+		<div class="card py-12 text-center">
+			<p class="text-lg text-muted-foreground">{$_('worldClock.noClocks')}</p>
+			<button class="btn btn-primary mt-4" onclick={openAddModal}>
+				{$_('worldClock.add')}
+			</button>
+		</div>
+	{:else}
+		<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+			{#each allWorldClocks.value as clock (clock.id)}
+				{@const isDay = isDaytime(clock.timezone)}
+				<div class="world-clock-card relative">
+					<!-- Delete button -->
+					<button
+						class="absolute right-3 top-3 text-muted-foreground hover:text-error p-0.5"
+						onclick={() => removeCity(clock.id)}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-3.5 w-3.5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+
+					<!-- Day/Night indicator -->
+					<div class="mb-2 flex items-center gap-2">
+						<span class="text-xs text-muted-foreground">{isDay ? 'Tag' : 'Nacht'}</span>
+						<span class="city-name">{clock.cityName}</span>
+					</div>
+
+					<!-- Time -->
+					<div class="time-display">
+						{getTimeForTimezone(clock.timezone)}
+					</div>
+
+					<!-- Date and offset -->
+					<div class="mt-2 flex items-center justify-between">
+						<span class="timezone-info">
+							{getDateForTimezone(clock.timezone)}
+						</span>
+						<span class="text-sm font-medium text-primary">
+							{getOffsetText(clock.timezone)}
+						</span>
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<!-- Add City Modal -->
+	{#if showAddModal}
+		<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+			<div class="card w-full max-w-md max-h-[80vh] flex flex-col">
+				<div class="flex items-center justify-between mb-4">
+					<h2 class="text-xl font-semibold">{$_('worldClock.add')}</h2>
+					<button class="text-muted-foreground hover:text-foreground p-0.5" onclick={closeAddModal}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				<!-- Search -->
+				<input
+					type="text"
+					class="input mb-4"
+					placeholder={$_('worldClock.search')}
+					bind:value={searchQuery}
+				/>
+
+				<!-- Timezone list -->
+				<div class="flex-1 overflow-y-auto -mx-4 px-4">
+					{#each filteredTimezones as tz}
+						{@const alreadyAdded = allWorldClocks.value.some((wc) => wc.timezone === tz.timezone)}
+						<button
+							class="flex w-full items-center justify-between rounded-lg p-3 text-left hover:bg-muted transition-colors"
+							class:opacity-50={alreadyAdded}
+							disabled={alreadyAdded}
+							onclick={() => addCity(tz.timezone, tz.city)}
+						>
+							<div>
+								<div class="font-medium">{tz.city}</div>
+								<div class="text-sm text-muted-foreground">{tz.timezone}</div>
+							</div>
+							<div class="text-right">
+								<div class="font-mono">{getTimeForTimezone(tz.timezone)}</div>
+								<div class="text-xs text-muted-foreground">{tz.region}</div>
+							</div>
+						</button>
+					{/each}
+
+					{#if filteredTimezones.length === 0}
+						<p class="py-8 text-center text-muted-foreground">
+							Keine Ergebnisse für "{searchQuery}"
+						</p>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.world-clock-page {
+		display: flex;
+		flex-direction: column;
+		min-height: calc(100vh - 180px);
+	}
+
+	.map-section {
+		display: flex;
+		flex-direction: column;
+		margin: 0 -1rem 1rem -1rem;
+		background: hsl(var(--color-card));
+		border-bottom: 1px solid hsl(var(--color-border));
+	}
+
+	.map-container {
+		width: 100%;
+		max-height: 50vh;
+		overflow: hidden;
+	}
+
+	.map-container :global(.world-map-container) {
+		border-radius: 0;
+		box-shadow: none;
+	}
+
+	@media (min-width: 768px) {
+		.map-section {
+			margin: 0 -1.5rem 1.5rem -1.5rem;
+		}
+
+		.map-container {
+			max-height: 60vh;
+		}
+	}
+
+	.world-clock-card {
+		background: hsl(var(--color-card));
+		border-radius: var(--radius-lg);
+		padding: 1rem;
+		border: 1px solid hsl(var(--color-border));
+	}
+
+	.city-name {
+		font-weight: 500;
+		color: hsl(var(--color-foreground));
+	}
+
+	.time-display {
+		font-size: 2.5rem;
+		font-weight: 300;
+		font-variant-numeric: tabular-nums;
+		color: hsl(var(--color-foreground));
+		line-height: 1;
+	}
+
+	.timezone-info {
+		font-size: 0.8125rem;
+		color: hsl(var(--color-muted-foreground));
+	}
+</style>
--- a/apps-archived/clock/apps/web/src/routes/(auth)/forgot-password/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(auth)/forgot-password/+page.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ForgotPasswordPage } from '@manacore/shared-auth-ui';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	let error = $state('');
+	let success = $state(false);
+	let loading = $state(false);
+
+	async function handleResetPassword(email: string) {
+		loading = true;
+		error = '';
+		success = false;
+
+		const result = await authStore.resetPassword(email);
+
+		if (result.success) {
+			success = true;
+		} else {
+			error = result.error || 'Passwort-Zurücksetzung fehlgeschlagen';
+		}
+
+		loading = false;
+	}
+</script>
+
+<ForgotPasswordPage
+	appName="Clock"
+	appLogo=""
+	{loading}
+	{error}
+	{success}
+	onSubmit={handleResetPassword}
+	loginHref="/login"
+/>
--- a/apps-archived/clock/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(auth)/login/+page.svelte
@ -0,0 +1,73 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { browser } from '$app/environment';
+	import { locale } from 'svelte-i18n';
+	import { LoginPage } from '@manacore/shared-auth-ui';
+	import { getLoginTranslations } from '@manacore/shared-i18n';
+	import { ClockLogo } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { APP_VERSION, BUILD_TIME } from '$lib/version';
+	import '$lib/i18n';
+
+	// Read verification status from query params (set after email verification)
+	const verified = $derived($page.url.searchParams.get('verified') === 'true');
+	const initialEmail = $derived($page.url.searchParams.get('email') || '');
+
+	// Get redirect URL from query params or sessionStorage (set by AuthGateModal in guest mode)
+	const redirectTo = $derived.by(() => {
+		const queryRedirect = $page.url.searchParams.get('redirectTo');
+		if (queryRedirect) return queryRedirect;
+
+		// Check sessionStorage for return URL (from guest mode)
+		if (browser) {
+			const sessionRedirect = sessionStorage.getItem('auth-return-url');
+			if (sessionRedirect) {
+				// Clear it after reading
+				sessionStorage.removeItem('auth-return-url');
+				return sessionRedirect;
+			}
+		}
+
+		return '/';
+	});
+
+	// Get translations based on current locale
+	const translations = $derived(getLoginTranslations($locale || 'de'));
+
+	async function handleSignIn(email: string, password: string) {
+		return authStore.signIn(email, password);
+	}
+
+	async function handleResendVerification(email: string) {
+		return authStore.resendVerificationEmail(email);
+	}
+</script>
+
+<svelte:head>
+	<title>{translations.title} | Clock</title>
+</svelte:head>
+
+<LoginPage
+	appName="Clock"
+	logo={ClockLogo}
+	primaryColor="#f59e0b"
+	onSignIn={handleSignIn}
+	onResendVerification={handleResendVerification}
+	passkeyAvailable={authStore.isPasskeyAvailable()}
+	onSignInWithPasskey={() => authStore.signInWithPasskey()}
+	onVerifyTwoFactor={(code, trust) => authStore.verifyTwoFactor(code, trust)}
+	onVerifyBackupCode={(code) => authStore.verifyBackupCode(code)}
+	onSendMagicLink={(email) => authStore.sendMagicLink(email)}
+	{goto}
+	successRedirect={redirectTo}
+	registerPath="/register"
+	forgotPasswordPath="/forgot-password"
+	lightBackground="#fffbeb"
+	darkBackground="#1c1917"
+	{translations}
+	{verified}
+	{initialEmail}
+	version={APP_VERSION}
+	buildTime={BUILD_TIME}
+/>
--- a/apps-archived/clock/apps/web/src/routes/(auth)/register/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(auth)/register/+page.svelte
@ -0,0 +1,52 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+	import { locale } from 'svelte-i18n';
+	import { RegisterPage } from '@manacore/shared-auth-ui';
+	import { getRegisterTranslations } from '@manacore/shared-i18n';
+	import { ClockLogo } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import '$lib/i18n';
+
+	// Get redirect URL from sessionStorage (set by AuthGateModal in guest mode)
+	const redirectTo = $derived.by(() => {
+		if (browser) {
+			const sessionRedirect = sessionStorage.getItem('auth-return-url');
+			if (sessionRedirect) {
+				// Clear it after reading
+				sessionStorage.removeItem('auth-return-url');
+				return sessionRedirect;
+			}
+		}
+		return '/';
+	});
+
+	// Get translations based on current locale
+	const translations = $derived(getRegisterTranslations($locale || 'de'));
+
+	async function handleSignUp(email: string, password: string) {
+		return authStore.signUp(email, password);
+	}
+
+	async function handleResendVerification(email: string) {
+		return authStore.resendVerificationEmail(email);
+	}
+</script>
+
+<svelte:head>
+	<title>{translations.title} | Clock</title>
+</svelte:head>
+
+<RegisterPage
+	appName="Clock"
+	logo={ClockLogo}
+	primaryColor="#f59e0b"
+	onSignUp={handleSignUp}
+	onResendVerification={handleResendVerification}
+	{goto}
+	successRedirect={redirectTo}
+	loginPath="/login"
+	lightBackground="#fffbeb"
+	darkBackground="#1c1917"
+	{translations}
+/>
--- a/apps-archived/clock/apps/web/src/routes/(auth)/reset-password/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/(auth)/reset-password/+page.svelte
@ -0,0 +1,174 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { ClockLogo } from '@manacore/shared-branding';
+	import { authStore } from '$lib/stores/auth.svelte';
+
+	let loading = $state(false);
+	let hasToken = $state(false);
+	let token = $state<string | null>(null);
+	let password = $state('');
+	let confirmPassword = $state('');
+	let error = $state<string | null>(null);
+	let success = $state(false);
+
+	onMount(() => {
+		token = $page.url.searchParams.get('token');
+		hasToken = !!token;
+	});
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		error = null;
+
+		if (!token) {
+			error = 'Invalid or missing token';
+			return;
+		}
+		if (password !== confirmPassword) {
+			error = 'Passwords do not match';
+			return;
+		}
+		if (password.length < 8) {
+			error = 'Password must be at least 8 characters';
+			return;
+		}
+
+		loading = true;
+		try {
+			const result = await authStore.resetPasswordWithToken(token, password);
+			if (!result.success) {
+				error = result.error || 'Failed to reset password';
+			} else {
+				success = true;
+				setTimeout(() => goto('/login'), 3000);
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'An error occurred';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Reset Password - Clock</title>
+</svelte:head>
+
+<div
+	class="flex min-h-screen flex-col bg-gradient-to-b from-amber-100 to-white dark:from-stone-900 dark:to-stone-800"
+>
+	<header class="flex items-center justify-between p-4">
+		<a href="/" class="flex items-center gap-2">
+			<ClockLogo class="h-8 w-8" />
+			<span class="text-xl font-semibold" style="color: #f59e0b">Clock</span>
+		</a>
+	</header>
+
+	<main class="flex flex-1 items-center justify-center p-4">
+		<div class="w-full max-w-md">
+			<div class="text-center mb-8">
+				<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Reset Password</h1>
+				<p class="mt-2 text-gray-600 dark:text-gray-400">
+					{#if success}Password reset successfully
+					{:else if hasToken}Enter your new password
+					{:else}Invalid or missing token{/if}
+				</p>
+			</div>
+
+			{#if success}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x2705;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							Your password has been reset successfully. You will be redirected to the login page
+							shortly.
+						</p>
+						<a
+							href="/login"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #f59e0b"
+						>
+							Go to login
+						</a>
+					</div>
+				</div>
+			{:else if hasToken}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<form onsubmit={handleSubmit}>
+						{#if error}
+							<div
+								class="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-red-900/20 dark:text-red-400"
+							>
+								{error}
+							</div>
+						{/if}
+						<div class="space-y-4">
+							<div>
+								<label
+									for="password"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>New Password</label
+								>
+								<input
+									type="password"
+									id="password"
+									autocomplete="new-password"
+									placeholder="Enter new password"
+									required
+									minlength={8}
+									bind:value={password}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+									style="--tw-ring-color: #f59e0b80; border-color: #f59e0b"
+								/>
+								<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">At least 8 characters</p>
+							</div>
+							<div>
+								<label
+									for="confirmPassword"
+									class="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-100"
+									>Confirm Password</label
+								>
+								<input
+									type="password"
+									id="confirmPassword"
+									autocomplete="new-password"
+									placeholder="Confirm password"
+									required
+									minlength={8}
+									bind:value={confirmPassword}
+									class="w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 focus:outline-none focus:ring-2 dark:border-slate-600 dark:bg-slate-700 dark:text-white dark:placeholder-gray-400"
+								/>
+							</div>
+							<button
+								type="submit"
+								disabled={loading}
+								class="w-full rounded-lg px-4 py-3 font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+								style="background-color: #f59e0b"
+							>
+								{loading ? 'Updating password...' : 'Update Password'}
+							</button>
+						</div>
+					</form>
+				</div>
+			{:else}
+				<div class="rounded-xl bg-white p-8 shadow-lg dark:bg-slate-800">
+					<div class="text-center">
+						<div class="mb-4 text-6xl">&#x26A0;&#xFE0F;</div>
+						<p class="mb-6 text-gray-600 dark:text-gray-400">
+							This password reset link is invalid or has expired.
+						</p>
+						<a
+							href="/forgot-password"
+							class="inline-block rounded-lg px-6 py-3 font-medium text-white transition-colors"
+							style="background-color: #f59e0b"
+						>
+							Request a new link
+						</a>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</main>
+</div>
--- a/apps-archived/clock/apps/web/src/routes/+layout.svelte
+++ b/apps-archived/clock/apps/web/src/routes/+layout.svelte
@ -0,0 +1,47 @@
+<script lang="ts">
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { isLoading as isLocaleLoading } from 'svelte-i18n';
+	import { theme } from '$lib/stores/theme.svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { waitLocale } from '$lib/i18n';
+	import { ToastContainer, setupGlobalErrorHandler } from '@manacore/shared-ui';
+	import { AppLoadingSkeleton } from '$lib/components/skeletons';
+
+	let { children } = $props();
+
+	let loading = $state(true);
+
+	onMount(() => {
+		// Setup global error handling
+		const cleanupErrorHandler = setupGlobalErrorHandler();
+
+		// Initialize async operations
+		const init = async () => {
+			// Wait for locale to be loaded
+			await waitLocale();
+
+			// Initialize theme
+			theme.initialize();
+
+			// Initialize auth
+			await authStore.initialize();
+
+			loading = false;
+		};
+
+		init();
+
+		return cleanupErrorHandler;
+	});
+</script>
+
+<ToastContainer />
+
+{#if $isLocaleLoading || loading}
+	<AppLoadingSkeleton />
+{:else}
+	<div class="min-h-screen bg-background text-foreground">
+		{@render children()}
+	</div>
+{/if}
--- a/apps-archived/clock/apps/web/src/routes/+layout.ts
+++ b/apps-archived/clock/apps/web/src/routes/+layout.ts
@ -0,0 +1,2 @@
+// Disable SSR — all data is local-first (IndexedDB + mana-sync)
+export const ssr = false;
--- a/apps-archived/clock/apps/web/src/routes/health/+server.ts
+++ b/apps-archived/clock/apps/web/src/routes/health/+server.ts
@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async () => {
+	return json({
+		status: 'ok',
+		service: 'clock-web',
+		timestamp: new Date().toISOString(),
+	});
+};
--- a/apps-archived/clock/apps/web/src/routes/offline/+page.svelte
+++ b/apps-archived/clock/apps/web/src/routes/offline/+page.svelte
@ -0,0 +1,9 @@
+<script lang="ts">
+	import { OfflinePage } from '@manacore/shared-ui';
+</script>
+
+<OfflinePage
+	appName="Clock"
+	offlineMessage="Die Uhr funktioniert auch offline - Timer und Stoppuhr sind verfügbar."
+	accentColor="#0891b2"
+/>
--- a/apps-archived/clock/apps/web/src/routes/offline/+page.ts
+++ b/apps-archived/clock/apps/web/src/routes/offline/+page.ts
@ -0,0 +1 @@
+export const prerender = true;
--- a/apps-archived/clock/apps/web/svelte.config.js
+++ b/apps-archived/clock/apps/web/svelte.config.js
@ -0,0 +1,21 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter({
+			out: 'build',
+		}),
+		prerender: {
+			handleHttpError: ({ path, message }) => {
+				if (path === '/favicon.png') return;
+				throw new Error(message);
+			},
+		},
+	},
+};
+
+export default config;
--- a/apps-archived/clock/apps/web/tsconfig.json
+++ b/apps-archived/clock/apps/web/tsconfig.json
@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+}
--- a/apps-archived/clock/apps/web/vite.config.ts
+++ b/apps-archived/clock/apps/web/vite.config.ts
@ -0,0 +1,33 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
+import { createPWAConfig } from '@manacore/shared-pwa';
+import { MANACORE_SHARED_PACKAGES, getBuildDefines } from '@manacore/shared-vite-config';
+
+export default defineConfig({
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA(
+			createPWAConfig({
+				name: 'Clock - Uhr & Timer',
+				shortName: 'Clock',
+				description: 'Uhr, Timer und Stoppuhr',
+				themeColor: '#06b6d4',
+				preset: 'minimal',
+			})
+		),
+	],
+	server: {
+		port: 5187,
+		strictPort: true,
+	},
+	ssr: {
+		noExternal: [...MANACORE_SHARED_PACKAGES],
+	},
+	optimizeDeps: {
+		exclude: [...MANACORE_SHARED_PACKAGES],
+	},
+	define: {
+		...getBuildDefines(),
+	},
+});
--- a/apps-archived/clock/packages/shared/package.json
+++ b/apps-archived/clock/packages/shared/package.json
@ -0,0 +1,19 @@
+{
+	"name": "@clock/shared",
+	"version": "0.2.0",
+	"private": true,
+	"type": "module",
+	"main": "./src/index.ts",
+	"exports": {
+		".": "./src/index.ts",
+		"./types": "./src/types/index.ts",
+		"./constants": "./src/constants/index.ts"
+	},
+	"scripts": {
+		"type-check": "tsc --noEmit",
+		"lint": "eslint src"
+	},
+	"devDependencies": {
+		"typescript": "^5.7.2"
+	}
+}
--- a/apps-archived/clock/packages/shared/src/constants/index.ts
+++ b/apps-archived/clock/packages/shared/src/constants/index.ts
@ -0,0 +1,151 @@
+// Popular timezones with city names and coordinates for map display
+export const POPULAR_TIMEZONES = [
+	{
+		timezone: 'America/New_York',
+		city: 'New York',
+		region: 'Americas',
+		lat: 40.7128,
+		lng: -74.006,
+	},
+	{
+		timezone: 'America/Los_Angeles',
+		city: 'Los Angeles',
+		region: 'Americas',
+		lat: 34.0522,
+		lng: -118.2437,
+	},
+	{ timezone: 'America/Chicago', city: 'Chicago', region: 'Americas', lat: 41.8781, lng: -87.6298 },
+	{ timezone: 'America/Toronto', city: 'Toronto', region: 'Americas', lat: 43.6532, lng: -79.3832 },
+	{
+		timezone: 'America/Sao_Paulo',
+		city: 'São Paulo',
+		region: 'Americas',
+		lat: -23.5505,
+		lng: -46.6333,
+	},
+	{
+		timezone: 'America/Mexico_City',
+		city: 'Mexico City',
+		region: 'Americas',
+		lat: 19.4326,
+		lng: -99.1332,
+	},
+	{
+		timezone: 'America/Buenos_Aires',
+		city: 'Buenos Aires',
+		region: 'Americas',
+		lat: -34.6037,
+		lng: -58.3816,
+	},
+	{
+		timezone: 'America/Vancouver',
+		city: 'Vancouver',
+		region: 'Americas',
+		lat: 49.2827,
+		lng: -123.1207,
+	},
+	{ timezone: 'Europe/London', city: 'London', region: 'Europe', lat: 51.5074, lng: -0.1278 },
+	{ timezone: 'Europe/Paris', city: 'Paris', region: 'Europe', lat: 48.8566, lng: 2.3522 },
+	{ timezone: 'Europe/Berlin', city: 'Berlin', region: 'Europe', lat: 52.52, lng: 13.405 },
+	{ timezone: 'Europe/Rome', city: 'Rome', region: 'Europe', lat: 41.9028, lng: 12.4964 },
+	{ timezone: 'Europe/Madrid', city: 'Madrid', region: 'Europe', lat: 40.4168, lng: -3.7038 },
+	{ timezone: 'Europe/Amsterdam', city: 'Amsterdam', region: 'Europe', lat: 52.3676, lng: 4.9041 },
+	{ timezone: 'Europe/Vienna', city: 'Vienna', region: 'Europe', lat: 48.2082, lng: 16.3738 },
+	{ timezone: 'Europe/Zurich', city: 'Zurich', region: 'Europe', lat: 47.3769, lng: 8.5417 },
+	{ timezone: 'Europe/Moscow', city: 'Moscow', region: 'Europe', lat: 55.7558, lng: 37.6173 },
+	{ timezone: 'Europe/Stockholm', city: 'Stockholm', region: 'Europe', lat: 59.3293, lng: 18.0686 },
+	{ timezone: 'Europe/Istanbul', city: 'Istanbul', region: 'Europe', lat: 41.0082, lng: 28.9784 },
+	{ timezone: 'Asia/Tokyo', city: 'Tokyo', region: 'Asia', lat: 35.6762, lng: 139.6503 },
+	{ timezone: 'Asia/Shanghai', city: 'Shanghai', region: 'Asia', lat: 31.2304, lng: 121.4737 },
+	{ timezone: 'Asia/Hong_Kong', city: 'Hong Kong', region: 'Asia', lat: 22.3193, lng: 114.1694 },
+	{ timezone: 'Asia/Singapore', city: 'Singapore', region: 'Asia', lat: 1.3521, lng: 103.8198 },
+	{ timezone: 'Asia/Seoul', city: 'Seoul', region: 'Asia', lat: 37.5665, lng: 126.978 },
+	{ timezone: 'Asia/Mumbai', city: 'Mumbai', region: 'Asia', lat: 19.076, lng: 72.8777 },
+	{ timezone: 'Asia/Dubai', city: 'Dubai', region: 'Asia', lat: 25.2048, lng: 55.2708 },
+	{ timezone: 'Asia/Bangkok', city: 'Bangkok', region: 'Asia', lat: 13.7563, lng: 100.5018 },
+	{ timezone: 'Asia/Jakarta', city: 'Jakarta', region: 'Asia', lat: -6.2088, lng: 106.8456 },
+	{ timezone: 'Australia/Sydney', city: 'Sydney', region: 'Oceania', lat: -33.8688, lng: 151.2093 },
+	{
+		timezone: 'Australia/Melbourne',
+		city: 'Melbourne',
+		region: 'Oceania',
+		lat: -37.8136,
+		lng: 144.9631,
+	},
+	{
+		timezone: 'Pacific/Auckland',
+		city: 'Auckland',
+		region: 'Oceania',
+		lat: -36.8485,
+		lng: 174.7633,
+	},
+	{ timezone: 'Africa/Cairo', city: 'Cairo', region: 'Africa', lat: 30.0444, lng: 31.2357 },
+	{
+		timezone: 'Africa/Johannesburg',
+		city: 'Johannesburg',
+		region: 'Africa',
+		lat: -26.2041,
+		lng: 28.0473,
+	},
+	{ timezone: 'Africa/Lagos', city: 'Lagos', region: 'Africa', lat: 6.5244, lng: 3.3792 },
+] as const;
+
+// Available alarm sounds
+export const ALARM_SOUNDS = [
+	{ id: 'default', name: 'Default', nameDE: 'Standard' },
+	{ id: 'gentle', name: 'Gentle', nameDE: 'Sanft' },
+	{ id: 'classic', name: 'Classic', nameDE: 'Klassisch' },
+	{ id: 'digital', name: 'Digital', nameDE: 'Digital' },
+	{ id: 'nature', name: 'Nature', nameDE: 'Natur' },
+	{ id: 'chime', name: 'Chime', nameDE: 'Glockenspiel' },
+] as const;
+
+// Timer presets
+export const QUICK_TIMER_PRESETS = [
+	{ label: '1 min', seconds: 60 },
+	{ label: '3 min', seconds: 180 },
+	{ label: '5 min', seconds: 300 },
+	{ label: '10 min', seconds: 600 },
+	{ label: '15 min', seconds: 900 },
+	{ label: '30 min', seconds: 1800 },
+	{ label: '45 min', seconds: 2700 },
+	{ label: '1 hour', seconds: 3600 },
+] as const;
+
+// Default alarm presets (like iOS Clock app)
+export const DEFAULT_ALARM_PRESETS = [
+	{ time: '06:00', label: 'Früh aufstehen', labelEN: 'Wake up early' },
+	{ time: '07:00', label: 'Aufwachen', labelEN: 'Wake up' },
+	{ time: '08:00', label: 'Morgen', labelEN: 'Morning' },
+	{ time: '12:00', label: 'Mittag', labelEN: 'Noon' },
+	{ time: '18:00', label: 'Feierabend', labelEN: 'End of work' },
+	{ time: '22:00', label: 'Schlafenszeit', labelEN: 'Bedtime' },
+] as const;
+
+// Pomodoro presets
+export const POMODORO_PRESETS = [
+	{
+		name: 'Classic Pomodoro',
+		nameDE: 'Klassischer Pomodoro',
+		workDuration: 25 * 60,
+		breakDuration: 5 * 60,
+		longBreakDuration: 15 * 60,
+		sessionsBeforeLongBreak: 4,
+	},
+	{
+		name: 'Short Focus',
+		nameDE: 'Kurzer Fokus',
+		workDuration: 15 * 60,
+		breakDuration: 3 * 60,
+		longBreakDuration: 10 * 60,
+		sessionsBeforeLongBreak: 4,
+	},
+	{
+		name: 'Deep Work',
+		nameDE: 'Tiefes Arbeiten',
+		workDuration: 50 * 60,
+		breakDuration: 10 * 60,
+		longBreakDuration: 30 * 60,
+		sessionsBeforeLongBreak: 3,
+	},
+] as const;
--- a/apps-archived/clock/packages/shared/src/index.ts
+++ b/apps-archived/clock/packages/shared/src/index.ts
@ -0,0 +1,2 @@
+export * from './types';
+export * from './constants';
--- a/apps-archived/clock/packages/shared/src/types/alarm.ts
+++ b/apps-archived/clock/packages/shared/src/types/alarm.ts
@ -0,0 +1,55 @@
+export interface Alarm {
+	id: string;
+	userId: string;
+	label: string | null;
+	time: string; // HH:MM:SS format
+	enabled: boolean;
+	repeatDays: number[] | null; // [0-6] where 0 = Sunday
+	snoozeMinutes: number | null;
+	sound: string | null;
+	vibrate: boolean | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface CreateAlarmInput {
+	label?: string;
+	time: string;
+	enabled?: boolean;
+	repeatDays?: number[];
+	snoozeMinutes?: number;
+	sound?: string;
+	vibrate?: boolean;
+}
+
+export interface UpdateAlarmInput {
+	label?: string;
+	time?: string;
+	enabled?: boolean;
+	repeatDays?: number[];
+	snoozeMinutes?: number;
+	sound?: string;
+	vibrate?: boolean;
+}
+
+export type RepeatDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export const REPEAT_DAY_LABELS = {
+	0: 'Sun',
+	1: 'Mon',
+	2: 'Tue',
+	3: 'Wed',
+	4: 'Thu',
+	5: 'Fri',
+	6: 'Sat',
+} as const;
+
+export const REPEAT_DAY_LABELS_DE = {
+	0: 'So',
+	1: 'Mo',
+	2: 'Di',
+	3: 'Mi',
+	4: 'Do',
+	5: 'Fr',
+	6: 'Sa',
+} as const;
--- a/apps-archived/clock/packages/shared/src/types/index.ts
+++ b/apps-archived/clock/packages/shared/src/types/index.ts
@ -0,0 +1,4 @@
+export * from './alarm';
+export * from './timer';
+export * from './world-clock';
+export * from './preset';
--- a/apps-archived/clock/packages/shared/src/types/preset.ts
+++ b/apps-archived/clock/packages/shared/src/types/preset.ts
@ -0,0 +1,42 @@
+export type PresetType = 'timer' | 'pomodoro';
+
+export interface PresetSettings {
+	// For pomodoro presets
+	workDuration?: number;
+	breakDuration?: number;
+	longBreakDuration?: number;
+	sessionsBeforeLongBreak?: number;
+	// For timer presets
+	sound?: string;
+}
+
+export interface Preset {
+	id: string;
+	userId: string;
+	type: PresetType;
+	name: string;
+	durationSeconds: number;
+	settings: PresetSettings | null;
+	createdAt: string;
+}
+
+export interface CreatePresetInput {
+	type: PresetType;
+	name: string;
+	durationSeconds: number;
+	settings?: PresetSettings;
+}
+
+export interface UpdatePresetInput {
+	name?: string;
+	durationSeconds?: number;
+	settings?: PresetSettings;
+}
+
+// Default pomodoro settings
+export const DEFAULT_POMODORO_SETTINGS: PresetSettings = {
+	workDuration: 25 * 60, // 25 minutes
+	breakDuration: 5 * 60, // 5 minutes
+	longBreakDuration: 15 * 60, // 15 minutes
+	sessionsBeforeLongBreak: 4,
+};
--- a/apps-archived/clock/packages/shared/src/types/timer.ts
+++ b/apps-archived/clock/packages/shared/src/types/timer.ts
@ -0,0 +1,49 @@
+export type TimerStatus = 'idle' | 'running' | 'paused' | 'finished';
+
+export interface Timer {
+	id: string;
+	userId: string;
+	label: string | null;
+	durationSeconds: number;
+	remainingSeconds: number | null;
+	status: TimerStatus;
+	startedAt: string | null;
+	pausedAt: string | null;
+	sound: string | null;
+	createdAt: string;
+	updatedAt: string;
+}
+
+export interface CreateTimerInput {
+	label?: string;
+	durationSeconds: number;
+	sound?: string;
+}
+
+export interface UpdateTimerInput {
+	label?: string;
+	durationSeconds?: number;
+	sound?: string;
+}
+
+export function formatDuration(seconds: number): string {
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor((seconds % 3600) / 60);
+	const secs = seconds % 60;
+
+	if (hours > 0) {
+		return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+	}
+	return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+
+export function parseDuration(formatted: string): number {
+	const parts = formatted.split(':').map(Number);
+	if (parts.length === 3) {
+		return parts[0] * 3600 + parts[1] * 60 + parts[2];
+	}
+	if (parts.length === 2) {
+		return parts[0] * 60 + parts[1];
+	}
+	return parts[0];
+}
--- a/apps-archived/clock/packages/shared/src/types/world-clock.ts
+++ b/apps-archived/clock/packages/shared/src/types/world-clock.ts
@ -0,0 +1,18 @@
+export interface WorldClock {
+	id: string;
+	userId: string;
+	timezone: string; // IANA timezone e.g. 'America/New_York'
+	cityName: string;
+	sortOrder: number;
+	createdAt: string;
+}
+
+export interface CreateWorldClockInput {
+	timezone: string;
+	cityName: string;
+}
+
+export interface TimezoneInfo {
+	timezone: string;
+	city: string;
+}
--- a/apps-archived/clock/packages/shared/tsconfig.json
+++ b/apps-archived/clock/packages/shared/tsconfig.json
@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"target": "ES2021",
+		"module": "ESNext",
+		"moduleResolution": "bundler",
+		"strict": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"outDir": "./dist",
+		"rootDir": "./src"
+	},
+	"include": ["src/**/*"],
+	"exclude": ["node_modules", "dist"]
+}