From debd55ffcf08e2c3211e0a3e1a68680975810d78 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sat, 21 Mar 2026 11:19:37 +0100
Subject: [PATCH] =?UTF-8?q?feat(calendar):=20implement=20UnifiedBar=20?=
 =?UTF-8?q?=E2=80=94=20replace=20standalone=20bottom=20bars=20with=20layer?=
 =?UTF-8?q?ed=20system?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces individual QuickInputBar, DateStrip, DateStripFab, CalendarToolbar, and ViewsBar
with a single UnifiedBar component. Layers stack via flexbox, child positioning overridden
to relative. Overlay menu allows toggling layer visibility. View switcher integrated into
toolbar layer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/calendar/UnifiedBar.svelte | 878 +++++++++---------
 .../apps/web/src/routes/(app)/+layout.svelte  | 171 +---
 .../(app)/unified-bar-demo/+page.svelte       | 224 +----
 3 files changed, 519 insertions(+), 754 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/UnifiedBar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/UnifiedBar.svelte
index 4e5aa9dea..353939d38 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/UnifiedBar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/UnifiedBar.svelte
@@ -1,114 +1,70 @@
 <script lang="ts">
-	import { setContext, onMount } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import { QuickInputBar } from '@manacore/shared-ui';
+	import type { QuickInputItem } from '@manacore/shared-ui';
 	import { unifiedBarStore } from '$lib/stores/unified-bar.svelte';
+	import DateStrip from './DateStrip.svelte';
+	import TagStrip from './TagStrip.svelte';
+	import CalendarToolbarContent from './CalendarToolbarContent.svelte';
+	import { viewStore } from '$lib/stores/view.svelte';
+	import type { CalendarViewType } from '@calendar/shared';
+	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import { fly, slide } from 'svelte/transition';
 
-	// Components (not yet integrated — using placeholders)
-	// import DateStrip from './DateStrip.svelte';
-	// import TagStrip from './TagStrip.svelte';
-	// import CalendarToolbar from './CalendarToolbar.svelte';
-
-	// Props
 	interface Props {
-		// QuickInputBar props
-		onSearch?: (query: string) => void;
-		onSelect?: (result: any) => void;
-		onSearchChange?: (query: string) => void;
-		onCreate?: (data: any) => void;
+		onSearch: (query: string) => Promise<QuickInputItem[]>;
+		onSelect: (item: QuickInputItem) => void;
+		onSearchChange?: (query: string, results: QuickInputItem[]) => void;
 		placeholder?: string;
 		emptyText?: string;
 		searchingText?: string;
 		createText?: string;
 		appIcon?: string;
-		bottomOffset?: string;
-		hasFabRight?: boolean;
-		hasFabLeft?: boolean;
-		defaultOptions?: any[];
-
-		// DateStrip props
-		selectedDate?: Date;
-		onDateSelect?: (date: Date) => void;
-
-		// Responsive
+		defaultOptions?: { id: string; label: string }[];
+		selectedDefaultId?: string;
+		defaultOptionLabel?: string;
+		onDefaultChange?: (id: string) => void;
+		onShowShortcuts?: () => void;
+		onShowSyntaxHelp?: () => void;
+		leftAction?: Snippet;
+		/** Show calendar-specific layers (DateStrip, TagStrip, Toolbar) */
+		showCalendarLayers?: boolean;
 		isMobile?: boolean;
-
-		// Calendar toolbar visibility
-		showCalendarToolbar?: boolean;
-		onToolbarCollapsedChange?: (collapsed: boolean) => void;
+		/** Hide the entire bar (e.g. immersive mode) */
+		hidden?: boolean;
 	}
 
 	let {
-		// QuickInputBar props
-		onSearch = () => {},
-		onSelect = () => {},
-		onSearchChange = () => {},
-		onCreate = () => {},
+		onSearch,
+		onSelect,
+		onSearchChange,
 		placeholder = 'Neuer Termin oder suchen...',
 		emptyText = 'Keine Termine gefunden',
 		searchingText = 'Suche...',
 		createText = 'Erstellen',
 		appIcon = 'calendar',
-		bottomOffset = '70px',
-		hasFabRight = false,
-		hasFabLeft = false,
-		defaultOptions = [],
-
-		// DateStrip props
-		onDateSelect = () => {},
-
-		// Responsive
+		defaultOptions,
+		selectedDefaultId,
+		defaultOptionLabel,
+		onDefaultChange,
+		onShowShortcuts,
+		onShowSyntaxHelp,
+		leftAction,
+		showCalendarLayers = false,
 		isMobile = false,
-
-		// Calendar toolbar
-		showCalendarToolbar = false,
-		onToolbarCollapsedChange = () => {},
+		hidden = false,
 	}: Props = $props();
 
-	// Local state for transitions
-	let isTransitioning = $state(false);
-	let previousMode = $state(unifiedBarStore.mode);
+	const flyConfig = { duration: 250, easing: quintOut, y: 40 };
 
-	// Computed values
-	let layerZIndices = $derived({
-		input: 80,
-		date: 85,
-		tag: 90,
-		toolbar: 95,
-		overlay: 110,
-	});
+	// View switcher
+	const views: { id: CalendarViewType; label: string; title: string }[] = [
+		{ id: 'week', label: '7', title: 'Wochenansicht' },
+		{ id: 'month', label: 'M', title: 'Monatsansicht' },
+		{ id: 'agenda', label: 'L', title: 'Agenda' },
+	];
 
-	let activeLayers = $derived(() => {
-		const layers = [];
-		if (unifiedBarStore.showQuickInput) layers.push('input');
-		if (unifiedBarStore.showDateStrip) layers.push('date');
-		if (unifiedBarStore.showTagStrip) layers.push('tag');
-		if (unifiedBarStore.showCalendarToolbar) layers.push('toolbar');
-		return layers;
-	});
-
-	// Simplified bottom offsets (using fixed values for now)
-	let layerBottomOffsets = $derived({
-		input: '0px',
-		date: '70px',
-		tag: '140px',
-		toolbar: '280px',
-	});
-
-	// Handle mode transitions
-	$effect(() => {
-		const currentMode = unifiedBarStore.mode;
-		if (currentMode !== previousMode) {
-			isTransitioning = true;
-			setTimeout(() => {
-				isTransitioning = false;
-			}, unifiedBarStore.settings.barAnimationDuration);
-			previousMode = currentMode;
-		}
-	});
-
-	// Overlay menu handlers
-	function handleOverlayToggle() {
+	function toggleOverlay() {
 		unifiedBarStore.toggleOverlay();
 	}
 
@@ -127,276 +83,388 @@
 				unifiedBarStore.collapseAll();
 				break;
 		}
-
-		// Close overlay after action
 		unifiedBarStore.set('overlayMenuOpen', false);
 	}
-
-	// Layer activation
-	function handleLayerClick(layer: string) {
-		unifiedBarStore.setActiveLayer(layer as any);
-		if (unifiedBarStore.mode === 'collapsed') {
-			unifiedBarStore.setMode('expanded');
-		}
-	}
-
-	// Context for child components
-	onMount(() => {
-		setContext('unifiedBarStore', unifiedBarStore);
-		setContext('isMobile', isMobile);
-	});
-
-	// Transition configurations
-	const slideConfig = {
-		duration: unifiedBarStore.settings.barAnimationDuration,
-		easing: quintOut,
-		y: 20,
-	};
-
-	const flyConfig = {
-		duration: unifiedBarStore.settings.barAnimationDuration,
-		easing: quintOut,
-		opacity: 0.8,
-	};
 </script>
 
 <!-- UnifiedBar Container -->
-<div
-	class="unified-bar-container"
-	class:transitioning={isTransitioning}
-	style="--animation-duration: {unifiedBarStore.settings.barAnimationDuration}ms;"
->
-	<!-- Layer 3: CalendarToolbar -->
-	{#if unifiedBarStore.showCalendarToolbar}
+<div class="unified-bar" class:hidden>
+	<!-- Layer 3: Toolbar (view switcher + calendar options) -->
+	{#if showCalendarLayers && unifiedBarStore.showCalendarToolbar}
 		<div
 			class="unified-bar-layer toolbar-layer"
-			style="z-index: {layerZIndices.toolbar}; bottom: {layerBottomOffsets.toolbar};"
-			class:active={unifiedBarStore.activeLayer === 'toolbar'}
-			transition:fly={{ ...flyConfig, y: 100 }}
+			transition:fly={flyConfig}
 			role="toolbar"
-			aria-label="Calendar toolbar"
-			onclick={() => handleLayerClick('toolbar')}
+			aria-label="Kalender-Toolbar"
 		>
-			<!-- CalendarToolbar placeholder -->
-			<div class="toolbar-placeholder">CalendarToolbar Component</div>
-		</div>
-	{/if}
-
-	<!-- Layer 2: TagStrip -->
-	{#if unifiedBarStore.showTagStrip}
-		<div
-			class="unified-bar-layer tag-strip-layer"
-			style="z-index: {layerZIndices.tag}; bottom: {layerBottomOffsets.tag};"
-			class:active={unifiedBarStore.activeLayer === 'tag'}
-			transition:fly={{ ...flyConfig, y: 50 }}
-			role="toolbar"
-			aria-label="Tag filter bar"
-			onclick={() => handleLayerClick('tag')}
-		>
-			<!-- TagStrip placeholder -->
-			<div class="tag-strip-placeholder">TagStrip Component</div>
-		</div>
-	{/if}
-
-	<!-- Layer 1: DateStrip -->
-	{#if unifiedBarStore.showDateStrip}
-		<div
-			class="unified-bar-layer date-strip-layer"
-			style="z-index: {layerZIndices.date}; bottom: {layerBottomOffsets.date};"
-			class:active={unifiedBarStore.activeLayer === 'date'}
-			transition:fly={{ ...flyConfig, y: 30 }}
-			role="toolbar"
-			aria-label="Date strip"
-			onclick={() => handleLayerClick('date')}
-		>
-			<div class="date-strip-placeholder">DateStrip Component</div>
-		</div>
-	{/if}
-
-	<!-- Layer 0: QuickInputBar -->
-	{#if unifiedBarStore.showQuickInput}
-		<div
-			class="unified-bar-layer input-layer"
-			style="z-index: {layerZIndices.input}; bottom: {layerBottomOffsets.input};"
-			class:active={unifiedBarStore.activeLayer === 'input'}
-			transition:slide={slideConfig}
-			role="toolbar"
-			aria-label="Quick input"
-			onclick={() => handleLayerClick('input')}
-		>
-			<div class="input-bar-wrapper">
-				<div class="input-bar-row">
-					<!-- QuickInputBar placeholder - will be implemented with actual component -->
-					<div class="quick-input-placeholder">
-						QuickInputBar Component
-						<button onmousedown={handleOverlayToggle}>
-							{unifiedBarStore.isOverlayOpen ? 'X' : 'Menu'}
+			<div class="toolbar-inner">
+				<div class="view-switcher">
+					{#each views as view}
+						<button
+							class="view-btn"
+							class:active={viewStore.viewType === view.id}
+							onclick={() => viewStore.setViewType(view.id)}
+							title={view.title}
+						>
+							{view.label}
 						</button>
-					</div>
+					{/each}
 				</div>
+				<span class="toolbar-sep"></span>
+				<CalendarToolbarContent />
 			</div>
 		</div>
 	{/if}
 
-	<!-- Overlay Menu -->
-	{#if unifiedBarStore.isOverlayOpen}
-		<div
-			class="unified-bar-overlay"
-			style="z-index: {layerZIndices.overlay};"
-			transition:fly={{ ...flyConfig, y: 100 }}
-			role="dialog"
-			aria-modal="true"
-			aria-label="Menu"
-		>
-			<div class="overlay-backdrop" onclick={handleOverlayToggle} />
-			<div class="overlay-content">
-				<div class="overlay-header">
-					<h3>Menü</h3>
-					<button class="close-btn" onmousedown={handleOverlayToggle}>
-						<span class="icon-x"></span>
-					</button>
-				</div>
-
-				<div class="overlay-actions">
-					<!-- Layer Toggles -->
-					<div class="action-group">
-						<h4>Ansichten</h4>
-						<button
-							class="action-btn"
-							class:active={unifiedBarStore.showDateStrip}
-							onmousedown={() => handleOverlayAction('toggle-date-strip')}
-						>
-							<span class="icon-calendar"></span>
-							Datum-Leiste
-							<span class="status">{unifiedBarStore.showDateStrip ? '✓' : ''}</span>
-						</button>
-
-						<button
-							class="action-btn"
-							class:active={unifiedBarStore.showTagStrip}
-							onmousedown={() => handleOverlayAction('toggle-tag-strip')}
-						>
-							<span class="icon-tag"></span>
-							Tag-Filter
-							<span class="status">{unifiedBarStore.showTagStrip ? '✓' : ''}</span>
-						</button>
-
-						<button
-							class="action-btn"
-							class:active={unifiedBarStore.showCalendarToolbar}
-							onmousedown={() => handleOverlayAction('toggle-toolbar')}
-						>
-							<span class="icon-toolbox"></span>
-							Kalender-Toolbar
-							<span class="status">{unifiedBarStore.showCalendarToolbar ? '✓' : ''}</span>
-						</button>
-					</div>
-
-					<!-- Quick Actions -->
-					<div class="action-group">
-						<h4>Schnellaktionen</h4>
-						<button class="action-btn" onmousedown={() => handleOverlayAction('collapse-all')}>
-							<span class="icon-minimize"></span>
-							Alle einklappen
-						</button>
-
-						<button class="action-btn" onmousedown={() => handleOverlayAction('new-event')}>
-							<span class="icon-plus"></span>
-							Neuer Termin
-						</button>
-
-						<button class="action-btn" onmousedown={() => handleOverlayAction('today')}>
-							<span class="icon-navigation"></span>
-							Heute
-						</button>
-					</div>
-				</div>
-			</div>
+	<!-- Layer 2: Tag Filter Strip -->
+	{#if showCalendarLayers && unifiedBarStore.showTagStrip}
+		<div class="unified-bar-layer tag-layer" transition:fly={flyConfig}>
+			<TagStrip />
 		</div>
 	{/if}
+
+	<!-- Layer 1: Date Strip -->
+	{#if showCalendarLayers && unifiedBarStore.showDateStrip}
+		<div class="unified-bar-layer date-layer" transition:fly={flyConfig}>
+			<DateStrip />
+		</div>
+	{/if}
+
+	<!-- Layer 0: Input Bar (always visible) -->
+	<div class="unified-bar-layer input-layer">
+		<QuickInputBar
+			{onSearch}
+			{onSelect}
+			{onSearchChange}
+			{placeholder}
+			{emptyText}
+			{searchingText}
+			{createText}
+			{appIcon}
+			bottomOffset="0px"
+			hasFabRight={showCalendarLayers}
+			{defaultOptions}
+			{selectedDefaultId}
+			{defaultOptionLabel}
+			{onDefaultChange}
+			{onShowShortcuts}
+			{onShowSyntaxHelp}
+			{leftAction}
+		/>
+
+		<!-- Layers Menu FAB (only on calendar main page) -->
+		{#if showCalendarLayers}
+			<button class="layers-fab" onclick={toggleOverlay} title="Leisten anpassen">
+				<svg
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M12 2L2 7l10 5 10-5-10-5z" />
+					<path d="M2 17l10 5 10-5" />
+					<path d="M2 12l10 5 10-5" />
+				</svg>
+			</button>
+		{/if}
+	</div>
 </div>
 
+<!-- Overlay Menu (outside container for proper z-index stacking) -->
+{#if unifiedBarStore.isOverlayOpen}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="unified-overlay" transition:fly={{ duration: 250, easing: quintOut, y: 100 }}>
+		<div class="overlay-backdrop" onclick={toggleOverlay} role="presentation"></div>
+		<div class="overlay-sheet" role="dialog" aria-label="Leisten-Menü">
+			<div class="overlay-header">
+				<h3>Leisten</h3>
+				<button class="overlay-close-btn" onclick={toggleOverlay} aria-label="Schließen">
+					<svg
+						width="18"
+						height="18"
+						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 x1="6" y1="6" x2="18" y2="18" />
+					</svg>
+				</button>
+			</div>
+
+			<div class="overlay-items">
+				<button
+					class="overlay-item"
+					class:active={unifiedBarStore.showDateStrip}
+					onclick={() => handleOverlayAction('toggle-date-strip')}
+				>
+					<span class="item-icon">📅</span>
+					<span class="item-label">Datum-Leiste</span>
+					{#if unifiedBarStore.showDateStrip}<span class="item-check">✓</span>{/if}
+				</button>
+
+				<button
+					class="overlay-item"
+					class:active={unifiedBarStore.showTagStrip}
+					onclick={() => handleOverlayAction('toggle-tag-strip')}
+				>
+					<span class="item-icon">🏷️</span>
+					<span class="item-label">Tag-Filter</span>
+					{#if unifiedBarStore.showTagStrip}<span class="item-check">✓</span>{/if}
+				</button>
+
+				<button
+					class="overlay-item"
+					class:active={unifiedBarStore.showCalendarToolbar}
+					onclick={() => handleOverlayAction('toggle-toolbar')}
+				>
+					<span class="item-icon">⚙️</span>
+					<span class="item-label">Kalender-Toolbar</span>
+					{#if unifiedBarStore.showCalendarToolbar}<span class="item-check">✓</span>{/if}
+				</button>
+
+				<div class="overlay-sep"></div>
+
+				<button class="overlay-item" onclick={() => handleOverlayAction('collapse-all')}>
+					<span class="item-icon">↓</span>
+					<span class="item-label">Alle einklappen</span>
+				</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
-	.unified-bar-container {
+	/* ===== Container ===== */
+	.unified-bar {
 		position: fixed;
-		bottom: 0;
+		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
 		left: 0;
 		right: 0;
-		z-index: 100;
+		z-index: 80;
+		display: flex;
+		flex-direction: column;
 		pointer-events: none;
 	}
 
-	.unified-bar-container.transitioning {
-		transition: all var(--animation-duration) ease;
+	.unified-bar.hidden {
+		opacity: 0;
+		pointer-events: none !important;
+		transform: translateY(100%);
+		transition:
+			opacity 0.3s ease,
+			transform 0.3s ease;
 	}
 
+	/* ===== Layers ===== */
 	.unified-bar-layer {
-		position: absolute;
-		left: 0;
-		right: 0;
 		pointer-events: auto;
-		background: color-mix(in srgb, var(--color-surface) 95%, transparent);
-		backdrop-filter: blur(20px);
-		border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
-		transition: all var(--animation-duration) ease;
-	}
-
-	.unified-bar-layer.active {
-		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
-		z-index: calc(var(--z-index) + 5) !important;
-	}
-
-	.unified-bar-layer:hover {
-		background: color-mix(in srgb, var(--color-surface) 98%, transparent);
-	}
-
-	.input-layer {
-		background: color-mix(in srgb, var(--color-surface) 90%, transparent);
-		border-top: 1px solid var(--color-border);
-	}
-
-	.input-bar-wrapper {
+		overflow: visible;
 		position: relative;
-		padding: var(--spacing-sm) var(--spacing-md);
 	}
 
-	.input-bar-row {
+	/* ===== Position overrides for embedded components ===== */
+	.input-layer :global(.quick-input-bar) {
+		position: relative !important;
+		bottom: auto !important;
+		left: auto !important;
+		right: auto !important;
+		z-index: auto !important;
+	}
+
+	.date-layer :global(.date-strip-wrapper) {
+		position: relative !important;
+		bottom: auto !important;
+		left: auto !important;
+		right: auto !important;
+		z-index: auto !important;
+	}
+
+	/* Remove toolbar-expanded offset since UnifiedBar handles stacking */
+	.date-layer :global(.date-strip-wrapper.toolbar-expanded) {
+		bottom: auto !important;
+	}
+
+	.tag-layer :global(.tag-strip-wrapper) {
+		position: relative !important;
+		bottom: auto !important;
+		left: auto !important;
+		right: auto !important;
+		z-index: auto !important;
+	}
+
+	/* ===== Input layer: FAB width constraints ===== */
+	.input-layer :global(.quick-input-bar.has-fab-right .input-container),
+	.input-layer :global(.quick-input-bar.has-fab-left .input-container) {
+		max-width: 450px;
+	}
+
+	@media (max-width: 900px) {
+		.input-layer :global(.quick-input-bar.has-fab-right .input-container) {
+			max-width: calc(100% - 140px);
+			margin-left: auto;
+			margin-right: 0;
+		}
+	}
+
+	@media (max-width: 640px) {
+		.input-layer :global(.quick-input-bar.has-fab-right .input-container) {
+			max-width: none;
+			width: 100%;
+			margin: 0;
+		}
+
+		.input-layer :global(.quick-input-bar.has-fab-right) {
+			padding-left: 1rem;
+			padding-right: calc(54px + 1rem + 8px);
+		}
+	}
+
+	/* ===== Layers FAB ===== */
+	.input-layer {
+		position: relative;
+	}
+
+	.layers-fab {
+		position: absolute;
+		/* Right of centered InputBar (450px max-width centered) */
+		left: calc(50% + 225px + 8px);
+		top: 50%;
+		transform: translateY(-50%);
+		width: 54px;
+		height: 54px;
+		border-radius: 9999px;
+		border: 1px solid hsl(var(--color-border));
+		cursor: pointer;
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-sm);
+		justify-content: center;
+		pointer-events: auto;
+		z-index: 91;
+		background: hsl(var(--color-surface) / 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
+		color: hsl(var(--color-foreground));
+		transition: all 0.2s ease;
 	}
 
-	/* Overlay Styles */
-	.unified-bar-overlay {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+	.layers-fab:hover {
+		transform: translateY(-50%) scale(1.05);
+		box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
+	}
+
+	@media (max-width: 900px) {
+		.layers-fab {
+			left: auto;
+			right: 1rem;
+		}
+	}
+
+	/* ===== Toolbar Layer ===== */
+	.toolbar-layer {
+		display: flex;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+	}
+
+	.toolbar-inner {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: hsl(var(--color-surface) / 0.85);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid hsl(var(--color-border));
+		border-radius: 9999px;
+		box-shadow:
+			0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
+			0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
 		pointer-events: auto;
+	}
+
+	.view-switcher {
+		display: flex;
+		gap: 0.25rem;
+	}
+
+	.view-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2rem;
+		height: 2rem;
+		padding: 0 0.5rem;
+		background: transparent;
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: hsl(var(--color-muted-foreground));
+		font-size: 0.875rem;
+		font-weight: 500;
+		transition: all 0.15s ease;
+	}
+
+	.view-btn:hover {
+		background: hsl(var(--color-muted) / 0.5);
+		color: hsl(var(--color-foreground));
+	}
+
+	.view-btn.active {
+		background: hsl(var(--color-primary) / 0.15);
+		color: hsl(var(--color-primary));
+	}
+
+	.toolbar-sep {
+		width: 1px;
+		height: 24px;
+		background: hsl(var(--color-border));
+		flex-shrink: 0;
+	}
+
+	@media (max-width: 640px) {
+		.toolbar-inner {
+			border-radius: 1rem;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+	}
+
+	/* ===== Overlay ===== */
+	.unified-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 200;
 		display: flex;
 		align-items: flex-end;
+		justify-content: center;
+		pointer-events: auto;
 	}
 
 	.overlay-backdrop {
 		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+		inset: 0;
 		background: rgba(0, 0, 0, 0.3);
 		backdrop-filter: blur(4px);
 	}
 
-	.overlay-content {
+	.overlay-sheet {
 		position: relative;
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
+		background: var(--color-surface, #fff);
+		border: 1px solid var(--color-border, #e5e7eb);
 		border-bottom: none;
-		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-		padding: var(--spacing-lg);
-		max-width: 100%;
-		width: 500px;
+		border-radius: 1rem 1rem 0 0;
+		padding: 1.5rem;
+		width: 100%;
+		max-width: 400px;
 		max-height: 70vh;
 		overflow-y: auto;
 		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
@@ -406,154 +474,94 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		margin-bottom: var(--spacing-lg);
-		padding-bottom: var(--spacing-md);
-		border-bottom: 1px solid var(--color-border);
+		margin-bottom: 1rem;
+		padding-bottom: 0.75rem;
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
 	}
 
 	.overlay-header h3 {
 		margin: 0;
-		font-size: 1.25rem;
+		font-size: 1.125rem;
 		font-weight: 600;
-		color: var(--color-foreground);
+		color: var(--color-foreground, #1f2937);
 	}
 
-	.close-btn {
+	.overlay-close-btn {
 		background: none;
 		border: none;
-		font-size: 1.5rem;
 		cursor: pointer;
-		padding: var(--spacing-xs);
-		border-radius: var(--radius-md);
-		color: var(--color-muted-foreground);
-		transition: all var(--transition-fast);
-	}
-
-	.close-btn:hover {
-		background: var(--color-muted);
-		color: var(--color-foreground);
-	}
-
-	.overlay-actions {
-		display: flex;
-		flex-direction: column;
-		gap: var(--spacing-lg);
-	}
-
-	.action-group h4 {
-		margin: 0 0 var(--spacing-md) 0;
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: var(--color-muted-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	.action-btn {
-		display: flex;
-		align-items: center;
-		gap: var(--spacing-md);
-		width: 100%;
-		padding: var(--spacing-md);
-		background: var(--color-background);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-md);
-		cursor: pointer;
-		transition: all var(--transition-base);
-		font-size: 0.875rem;
-		color: var(--color-foreground);
-		text-align: left;
-	}
-
-	.action-btn:hover {
-		background: var(--color-muted);
-		border-color: var(--color-primary);
-		transform: translateY(-1px);
-	}
-
-	.action-btn.active {
-		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-		border-color: var(--color-primary);
-		color: var(--color-primary);
-	}
-
-	.action-btn .status {
-		margin-left: auto;
-		font-weight: 600;
-		color: var(--color-success);
-	}
-
-	/* Icons (placeholder - replace with actual icon component) */
-	.icon-x::before {
-		content: '×';
-	}
-	.icon-calendar::before {
-		content: '📅';
-	}
-	.icon-tag::before {
-		content: '🏷️';
-	}
-	.icon-toolbox::before {
-		content: '🔧';
-	}
-	.icon-minimize::before {
-		content: '⬇️';
-	}
-	.icon-plus::before {
-		content: '+';
-	}
-	.icon-navigation::before {
-		content: '🧭';
-	}
-
-	/* Placeholder styles */
-	.quick-input-placeholder,
-	.tag-strip-placeholder,
-	.date-strip-placeholder,
-	.toolbar-placeholder {
+		padding: 0.375rem;
+		border-radius: 0.5rem;
+		color: hsl(var(--color-muted-foreground));
+		transition: all 0.15s ease;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var(--spacing-lg);
-		background: var(--color-background);
-		border: 2px dashed var(--color-border);
-		border-radius: var(--radius-md);
-		color: var(--color-muted-foreground);
-		font-size: 0.875rem;
-		font-weight: 500;
-		min-height: 60px;
 	}
 
-	.quick-input-placeholder button {
-		margin-left: var(--spacing-sm);
-		padding: var(--spacing-xs) var(--spacing-sm);
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
-		border: none;
-		border-radius: var(--radius-sm);
+	.overlay-close-btn:hover {
+		background: hsl(var(--color-muted));
+		color: hsl(var(--color-foreground));
+	}
+
+	.overlay-items {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.overlay-item {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem 1rem;
+		background: var(--color-background, #f9fafb);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: 0.75rem;
 		cursor: pointer;
-		font-size: 0.75rem;
+		transition: all 0.15s ease;
+		font-size: 0.875rem;
+		color: var(--color-foreground, #1f2937);
+		text-align: left;
+		width: 100%;
 	}
 
-	/* Responsive Design */
-	@media (max-width: 768px) {
-		.overlay-content {
-			width: 100%;
-			max-height: 80vh;
-			border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-		}
+	.overlay-item:hover {
+		background: hsl(var(--color-muted));
+		border-color: hsl(var(--color-primary));
+	}
 
-		.action-btn {
-			padding: var(--spacing-lg);
-			font-size: 1rem;
-		}
+	.overlay-item.active {
+		background: hsl(var(--color-primary) / 0.1);
+		border-color: hsl(var(--color-primary));
+		color: hsl(var(--color-primary));
+	}
 
-		.quick-input-placeholder,
-		.tag-strip-placeholder,
-		.date-strip-placeholder,
-		.toolbar-placeholder {
-			min-height: 50px;
-			font-size: 0.75rem;
+	.item-icon {
+		font-size: 1.125rem;
+		width: 1.5rem;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.item-label {
+		flex: 1;
+	}
+
+	.item-check {
+		font-weight: 600;
+		color: hsl(var(--color-success, 142 76% 36%));
+	}
+
+	.overlay-sep {
+		height: 1px;
+		background: var(--color-border, #e5e7eb);
+		margin: 0.25rem 0;
+	}
+
+	@media (max-width: 640px) {
+		.overlay-sheet {
+			max-width: 100%;
 		}
 	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index 9da550c9f..d63d4051d 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -3,12 +3,7 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import {
-		PillNavigation,
-		QuickInputBar,
-		InputBarHelpModal,
-		ImmersiveModeToggle,
-	} from '@manacore/shared-ui';
+	import { PillNavigation, InputBarHelpModal, ImmersiveModeToggle } from '@manacore/shared-ui';
 	import {
 		SplitPaneContainer,
 		setSplitPanelContext,
@@ -39,7 +34,6 @@
 	} from '@manacore/shared-theme';
 	import type { ThemeVariant } from '@manacore/shared-theme';
 	import { filterHiddenNavItems } from '@manacore/shared-theme';
-	import { isToolbarCollapsed as toolbarCollapsedStore } from '$lib/stores/navigation';
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { setLocale, supportedLocales } from '$lib/i18n';
@@ -47,11 +41,7 @@
 	import { searchStore } from '$lib/stores/search.svelte';
 	import { format } from 'date-fns';
 	import { de } from 'date-fns/locale';
-	import CalendarToolbar from '$lib/components/calendar/CalendarToolbar.svelte';
-	import CalendarToolbarContent from '$lib/components/calendar/CalendarToolbarContent.svelte';
-	import DateStrip from '$lib/components/calendar/DateStrip.svelte';
-	import DateStripFab from '$lib/components/calendar/DateStripFab.svelte';
-	import ViewsBar from '$lib/components/calendar/ViewsBar.svelte';
+	import UnifiedBar from '$lib/components/calendar/UnifiedBar.svelte';
 	import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
 	import VoiceRecordButton from '$lib/components/voice/VoiceRecordButton.svelte';
 	import VoiceRecordingModal from '$lib/components/voice/VoiceRecordingModal.svelte';
@@ -100,8 +90,6 @@
 		}
 	}
 
-	let isToolbarCollapsed = $state(true); // Default to collapsed - FAB next to InputBar
-
 	// Mobile detection for responsive layout
 	let isMobile = $state(false);
 
@@ -345,14 +333,6 @@
 		}
 	}
 
-	function handleToolbarCollapsedChange(collapsed: boolean) {
-		isToolbarCollapsed = collapsed;
-		toolbarCollapsedStore?.set(collapsed);
-		if (typeof localStorage !== 'undefined') {
-			localStorage.setItem('calendar-toolbar-collapsed', String(collapsed));
-		}
-	}
-
 	function handleToggleTheme() {
 		theme.toggleMode();
 	}
@@ -421,13 +401,6 @@
 			}
 		}
 
-		// Initialize toolbar collapsed state from localStorage (default is now collapsed)
-		const savedToolbarCollapsed = localStorage.getItem('calendar-toolbar-collapsed');
-		if (savedToolbarCollapsed === 'false') {
-			isToolbarCollapsed = false;
-			toolbarCollapsedStore?.set(false);
-		}
-
 		// Initialize mobile state
 		updateMobileState();
 	});
@@ -477,74 +450,34 @@
 				onOpenInPanel={handleOpenInPanel}
 				ariaLabel="Hauptnavigation"
 			/>
+		{/if}
 
-			<!-- Date strip (only on main calendar page) -->
-			{#if showCalendarToolbar}
-				{#if settingsStore.dateStripCollapsed}
-					<DateStripFab isToolbarExpanded={!isToolbarCollapsed} {isMobile} />
-				{:else}
-					<DateStrip isToolbarExpanded={!isToolbarCollapsed} />
+		<!-- Unified Bar: QuickInputBar + DateStrip + TagStrip + CalendarToolbar -->
+		<UnifiedBar
+			onSearch={handleSearch}
+			onSelect={handleSelect}
+			onSearchChange={handleSearchChange}
+			placeholder="Neuer Termin oder suchen..."
+			emptyText="Keine Termine gefunden"
+			searchingText="Suche..."
+			createText="Erstellen"
+			appIcon="calendar"
+			defaultOptions={calendarOptions}
+			selectedDefaultId={selectedDefaultCalendarId}
+			defaultOptionLabel="Standard-Kalender"
+			onDefaultChange={handleDefaultCalendarChange}
+			onShowShortcuts={handleShowShortcuts}
+			onShowSyntaxHelp={handleShowSyntaxHelp}
+			showCalendarLayers={showCalendarToolbar}
+			{isMobile}
+			hidden={settingsStore.immersiveModeEnabled}
+		>
+			{#snippet leftAction()}
+				{#if voiceRecordingStore.isSupported}
+					<VoiceRecordButton onResult={handleVoiceResult} size={32} />
 				{/if}
-			{/if}
-
-			<!-- Calendar toolbar (only on main calendar page) -->
-			{#if showCalendarToolbar}
-				<CalendarToolbar
-					isCollapsed={isToolbarCollapsed}
-					{isMobile}
-					bottomOffset="70px"
-					onCollapsedChange={handleToolbarCollapsedChange}
-				/>
-			{/if}
-		{/if}
-
-		<!-- Views Bar (only on main calendar page, hidden in immersive mode) -->
-		{#if showCalendarToolbar && !settingsStore.immersiveModeEnabled}
-			<ViewsBar
-				bottomOffset={isMobile
-					? '70px'
-					: showCalendarToolbar && !isToolbarCollapsed
-						? '140px'
-						: '70px'}
-			/>
-		{/if}
-
-		<!-- Global Input Bar with Voice Button (hidden via CSS in immersive mode to prevent re-mount focus) -->
-		<div class="input-bar-wrapper" class:hidden={settingsStore.immersiveModeEnabled}>
-			<div class="input-bar-row">
-				<QuickInputBar
-					onSearch={handleSearch}
-					onSelect={handleSelect}
-					onSearchChange={handleSearchChange}
-					placeholder="Neuer Termin oder suchen..."
-					emptyText="Keine Termine gefunden"
-					searchingText="Suche..."
-					createText="Erstellen"
-					appIcon="calendar"
-					bottomOffset={isMobile
-						? showCalendarToolbar
-							? 'calc(70px + 72px)'
-							: '70px'
-						: showCalendarToolbar && !isToolbarCollapsed
-							? '140px'
-							: '70px'}
-					hasFabRight={showCalendarToolbar}
-					hasFabLeft={!isMobile && showCalendarToolbar && settingsStore.dateStripCollapsed}
-					defaultOptions={calendarOptions}
-					selectedDefaultId={selectedDefaultCalendarId}
-					defaultOptionLabel="Standard-Kalender"
-					onDefaultChange={handleDefaultCalendarChange}
-					onShowShortcuts={handleShowShortcuts}
-					onShowSyntaxHelp={handleShowSyntaxHelp}
-				>
-					{#snippet leftAction()}
-						{#if voiceRecordingStore.isSupported}
-							<VoiceRecordButton onResult={handleVoiceResult} size={32} />
-						{/if}
-					{/snippet}
-				</QuickInputBar>
-			</div>
-		</div>
+			{/snippet}
+		</UnifiedBar>
 
 		<!-- Voice Recording Modal -->
 		<VoiceRecordingModal onResult={handleVoiceResult} />
@@ -612,11 +545,9 @@
 		min-height: 0;
 	}
 
-	/* Extra padding when DateStrip is at bottom (toolbar is now a FAB) */
+	/* Extra padding for UnifiedBar layers (PillNav + InputBar + DateStrip) */
 	.main-content.has-toolbar {
-		padding-bottom: calc(
-			220px + env(safe-area-inset-bottom)
-		); /* DateStrip + PillNav + QuickInputBar */
+		padding-bottom: calc(220px + env(safe-area-inset-bottom));
 	}
 
 	@media (max-width: 768px) {
@@ -716,46 +647,4 @@
 		width: 100vw;
 		max-width: 100vw;
 	}
-
-	/* Adjust InputBar when FABs are visible (toolbar FAB on right, DateStripFab on left) */
-	/* For a centered InputBar with max-width 450px, left edge is at 50% - 225px */
-	/* DateStripFab is positioned at: 50% - 225px - 8px gap - 54px fab width */
-	:global(.quick-input-bar.has-fab-right .input-container),
-	:global(.quick-input-bar.has-fab-left .input-container) {
-		max-width: 450px;
-	}
-
-	/* On smaller screens (<900px), FABs move to fixed positions (left: 1rem, right: 1rem) */
-	@media (max-width: 900px) {
-		:global(.quick-input-bar.has-fab-right .input-container) {
-			max-width: calc(100% - 140px); /* 54px FAB + padding */
-			margin-left: auto;
-			margin-right: 0;
-		}
-		:global(.quick-input-bar.has-fab-left .input-container) {
-			max-width: calc(100% - 140px); /* 54px FAB + padding */
-			margin-left: 0;
-			margin-right: auto;
-		}
-		:global(.quick-input-bar.has-fab-right.has-fab-left .input-container) {
-			max-width: calc(100% - 200px); /* Both FABs */
-			margin-left: auto;
-			margin-right: auto;
-		}
-	}
-
-	/* Mobile: InputBar in its own row (above PillNav), Settings FAB stays next to InputBar */
-	@media (max-width: 640px) {
-		/* InputBar takes all available space up to the FAB */
-		:global(.quick-input-bar.has-fab-right .input-container) {
-			max-width: none;
-			width: 100%;
-			margin: 0;
-		}
-
-		:global(.quick-input-bar.has-fab-right) {
-			padding-left: 1rem;
-			padding-right: calc(54px + 1rem + 8px); /* FAB width + margin + gap */
-		}
-	}
 </style>
diff --git a/apps/calendar/apps/web/src/routes/(app)/unified-bar-demo/+page.svelte b/apps/calendar/apps/web/src/routes/(app)/unified-bar-demo/+page.svelte
index fac7648b5..60c98d20c 100644
--- a/apps/calendar/apps/web/src/routes/(app)/unified-bar-demo/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/unified-bar-demo/+page.svelte
@@ -1,52 +1,21 @@
 <script lang="ts">
 	import UnifiedBar from '$lib/components/calendar/UnifiedBar.svelte';
-	import UnifiedBarControls from '$lib/components/calendar/UnifiedBarControls.svelte';
 	import { unifiedBarStore } from '$lib/stores/unified-bar.svelte';
 	import { onMount } from 'svelte';
+	import type { QuickInputItem } from '@manacore/shared-ui';
 
 	// Demo handlers
-	function handleSearch(query: string) {
+	async function handleSearch(query: string): Promise<QuickInputItem[]> {
 		console.log('Search:', query);
+		return [{ id: '1', title: `Ergebnis für "${query}"`, subtitle: 'Demo-Termin' }];
 	}
 
-	function handleSelect(result: any) {
-		console.log('Select:', result);
+	function handleSelect(item: QuickInputItem) {
+		console.log('Select:', item);
 	}
 
-	function handleSearchChange(query: string) {
-		console.log('Search change:', query);
-	}
-
-	function handleCreate(data: any) {
-		console.log('Create:', data);
-	}
-
-	function handleDateSelect(date: Date) {
-		console.log('Date select:', date);
-	}
-
-	function handleOverlayToggle(event: CustomEvent) {
-		console.log('Overlay toggle:', event.detail);
-	}
-
-	function handleOverlayAction(event: CustomEvent) {
-		console.log('Overlay action:', event.detail);
-	}
-
-	function handleModeChange(mode: string) {
-		console.log('Mode change:', mode);
-	}
-
-	function handleLayerChange(layer: string) {
-		console.log('Layer change:', layer);
-	}
-
-	function handleQuickAction(event: CustomEvent) {
-		console.log('Quick action:', event.detail);
-	}
-
-	function handleToolbarCollapsedChange(collapsed: boolean) {
-		console.log('Toolbar collapsed:', collapsed);
+	function handleSearchChange(query: string, results: QuickInputItem[]) {
+		console.log('Search change:', query, results);
 	}
 
 	// Initialize store on mount
@@ -62,15 +31,9 @@
 <main class="demo-container">
 	<header class="demo-header">
 		<h1>UnifiedBar Demo</h1>
-		<p>Demonstration der neuen unified bottom bar Architektur</p>
+		<p>Demonstration der unified bottom bar Architektur</p>
 	</header>
 
-	<!-- Controls for testing -->
-	<section class="controls-section">
-		<h2>UnifiedBar Controls</h2>
-		<UnifiedBarControls onModeChange={handleModeChange} onLayerChange={handleLayerChange} />
-	</section>
-
 	<!-- Main content area -->
 	<section class="content-section">
 		<div class="content-placeholder">
@@ -78,23 +41,13 @@
 			<p>Dies ist der Hauptinhaltbereich, in dem die Kalender-Ansichten angezeigt werden.</p>
 
 			<div class="info-cards">
-				<div class="info-card">
-					<h3>Aktueller Modus</h3>
-					<p><strong>{unifiedBarStore.mode}</strong></p>
-				</div>
-
-				<div class="info-card">
-					<h3>Aktiver Layer</h3>
-					<p><strong>{unifiedBarStore.activeLayer}</strong></p>
-				</div>
-
 				<div class="info-card">
 					<h3>Sichtbare Layers</h3>
 					<ul>
-						{#if unifiedBarStore.showQuickInput}<li>✓ QuickInput</li>{/if}
-						{#if unifiedBarStore.showDateStrip}<li>✓ DateStrip</li>{/if}
-						{#if unifiedBarStore.showTagStrip}<li>✓ TagStrip</li>{/if}
-						{#if unifiedBarStore.showCalendarToolbar}<li>✓ CalendarToolbar</li>{/if}
+						{#if unifiedBarStore.showQuickInput}<li>QuickInput</li>{/if}
+						{#if unifiedBarStore.showDateStrip}<li>DateStrip</li>{/if}
+						{#if unifiedBarStore.showTagStrip}<li>TagStrip</li>{/if}
+						{#if unifiedBarStore.showCalendarToolbar}<li>CalendarToolbar</li>{/if}
 					</ul>
 				</div>
 
@@ -105,10 +58,14 @@
 			</div>
 
 			<div class="demo-actions">
-				<button onmousedown={() => unifiedBarStore.setMode('collapsed')}> Zusammengklappt </button>
-				<button onmousedown={() => unifiedBarStore.setMode('expanded')}> Erweitert </button>
 				<button onmousedown={() => unifiedBarStore.toggleOverlay()}> Overlay Toggle </button>
-				<button onmousedown={() => unifiedBarStore.expandToLayer('date')}> zum Datum-Layer </button>
+				<button onmousedown={() => unifiedBarStore.expandToLayer('date')}>
+					DateStrip zeigen
+				</button>
+				<button onmousedown={() => unifiedBarStore.expandToLayer('tag')}> TagStrip zeigen </button>
+				<button onmousedown={() => unifiedBarStore.expandToLayer('toolbar')}>
+					Toolbar zeigen
+				</button>
 				<button onmousedown={() => unifiedBarStore.collapseAll()}> Alle einklappen </button>
 			</div>
 		</div>
@@ -119,67 +76,45 @@
 		onSearch={handleSearch}
 		onSelect={handleSelect}
 		onSearchChange={handleSearchChange}
-		onCreate={handleCreate}
-		onDateSelect={handleDateSelect}
-		onToolbarCollapsedChange={handleToolbarCollapsedChange}
 		placeholder="Neuer Termin oder suchen..."
 		emptyText="Keine Termine gefunden"
 		searchingText="Suche..."
 		createText="Erstellen"
 		appIcon="calendar"
 		isMobile={false}
-		showCalendarToolbar={true}
+		showCalendarLayers={true}
 	/>
-
-	<!-- Footer with info -->
-	<footer class="demo-footer">
-		<p>UnifiedBar Demo - Calendar App</p>
-		<p>Scrollen Sie, um zu sehen wie die Bars fixiert bleiben</p>
-	</footer>
 </main>
 
 <style>
 	.demo-container {
 		min-height: 100vh;
-		padding-bottom: 400px; /* Space for UnifiedBar */
+		padding-bottom: 300px;
 		background: var(--color-background);
 		color: var(--color-foreground);
 	}
 
 	.demo-header {
-		padding: var(--spacing-xl) var(--spacing-lg);
+		padding: 2rem;
 		text-align: center;
-		border-bottom: 1px solid var(--color-border);
-		background: var(--color-surface);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		background: var(--color-surface, #fff);
 	}
 
 	.demo-header h1 {
-		margin: 0 0 var(--spacing-sm) 0;
+		margin: 0 0 0.5rem 0;
 		font-size: 2rem;
 		font-weight: 700;
-		color: var(--color-primary);
+		color: hsl(var(--color-primary));
 	}
 
 	.demo-header p {
 		margin: 0;
-		color: var(--color-muted-foreground);
-		font-size: 1rem;
-	}
-
-	.controls-section {
-		padding: var(--spacing-lg);
-		border-bottom: 1px solid var(--color-border);
-		background: color-mix(in srgb, var(--color-surface) 50%, transparent);
-	}
-
-	.controls-section h2 {
-		margin: 0 0 var(--spacing-md) 0;
-		font-size: 1.25rem;
-		font-weight: 600;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.content-section {
-		padding: var(--spacing-lg);
+		padding: 2rem;
 	}
 
 	.content-placeholder {
@@ -188,53 +123,39 @@
 	}
 
 	.content-placeholder h2 {
-		margin: 0 0 var(--spacing-lg) 0;
+		margin: 0 0 1rem 0;
 		font-size: 1.5rem;
 		font-weight: 600;
 	}
 
 	.content-placeholder p {
-		margin: 0 0 var(--spacing-xl) 0;
-		color: var(--color-muted-foreground);
-		line-height: 1.6;
+		margin: 0 0 2rem 0;
+		color: hsl(var(--color-muted-foreground));
 	}
 
 	.info-cards {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-		gap: var(--spacing-lg);
-		margin-bottom: var(--spacing-xl);
+		gap: 1rem;
+		margin-bottom: 2rem;
 	}
 
 	.info-card {
-		background: var(--color-surface);
-		border: 1px solid var(--color-border);
-		border-radius: var(--radius-lg);
-		padding: var(--spacing-lg);
-		transition: all var(--transition-base);
-	}
-
-	.info-card:hover {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-		transform: translateY(-2px);
+		background: var(--color-surface, #fff);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: 0.75rem;
+		padding: 1.5rem;
 	}
 
 	.info-card h3 {
-		margin: 0 0 var(--spacing-sm) 0;
+		margin: 0 0 0.5rem 0;
 		font-size: 0.875rem;
 		font-weight: 600;
-		color: var(--color-muted-foreground);
+		color: hsl(var(--color-muted-foreground));
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
 
-	.info-card p {
-		margin: 0;
-		font-size: 1.125rem;
-		font-weight: 600;
-		color: var(--color-foreground);
-	}
-
 	.info-card ul {
 		margin: 0;
 		padding: 0;
@@ -242,82 +163,29 @@
 	}
 
 	.info-card li {
-		padding: var(--spacing-xs) 0;
-		color: var(--color-success);
+		padding: 0.25rem 0;
 		font-weight: 500;
 	}
 
 	.demo-actions {
 		display: flex;
 		flex-wrap: wrap;
-		gap: var(--spacing-md);
-		margin-top: var(--spacing-xl);
+		gap: 0.75rem;
 	}
 
 	.demo-actions button {
-		padding: var(--spacing-md) var(--spacing-lg);
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
+		padding: 0.75rem 1.25rem;
+		background: hsl(var(--color-primary));
+		color: hsl(var(--color-primary-foreground, 0 0% 100%));
 		border: none;
-		border-radius: var(--radius-md);
+		border-radius: 0.5rem;
 		cursor: pointer;
 		font-weight: 500;
-		transition: all var(--transition-base);
+		transition: all 0.15s ease;
 	}
 
 	.demo-actions button:hover {
 		filter: brightness(0.9);
 		transform: translateY(-1px);
-		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-	}
-
-	.demo-footer {
-		position: fixed;
-		bottom: 350px;
-		left: 0;
-		right: 0;
-		text-align: center;
-		padding: var(--spacing-md);
-		background: color-mix(in srgb, var(--color-surface) 80%, transparent);
-		border-top: 1px solid var(--color-border);
-		color: var(--color-muted-foreground);
-		font-size: 0.875rem;
-	}
-
-	.demo-footer p {
-		margin: 0;
-	}
-
-	/* Responsive Design */
-	@media (max-width: 768px) {
-		.demo-container {
-			padding-bottom: 500px;
-		}
-
-		.demo-header {
-			padding: var(--spacing-lg) var(--spacing-md);
-		}
-
-		.demo-header h1 {
-			font-size: 1.5rem;
-		}
-
-		.controls-section,
-		.content-section {
-			padding: var(--spacing-md);
-		}
-
-		.info-cards {
-			grid-template-columns: 1fr;
-			gap: var(--spacing-md);
-		}
-
-		.demo-actions {
-			flex-direction: column;
-		}
-
-		.demo-footer {
-			bottom: 450px;
-		}
 	}
 </style>