diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/canon_dashboard_overzicht_1440_900_licht/code.html b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/canon_dashboard_overzicht_1440_900_licht/code.html
deleted file mode 100644
index a26a13a7..00000000
--- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/canon_dashboard_overzicht_1440_900_licht/code.html
+++ /dev/null
@@ -1,395 +0,0 @@
-<!DOCTYPE html>
-
-<html class="light" lang="nl"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>DockDeck — Dashboard</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<style>
-        @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
-        
-        body {
-            font-family: 'Geist', sans-serif;
-            background-color: #f8fafc; /* Light theme base */
-        }
-
-        .material-symbols-outlined {
-            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-            display: inline-block;
-            vertical-align: middle;
-        }
-
-        /* Custom Scrollbar for better aesthetic */
-        ::-webkit-scrollbar {
-            width: 6px;
-        }
-        ::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #e2e8f0;
-            border-radius: 10px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #cbd5e1;
-        }
-
-        .glass-card {
-            background: rgba(255, 255, 255, 0.8);
-            backdrop-filter: blur(8px);
-            border: 1px solid rgba(0, 0, 0, 0.05);
-        }
-
-        .app-card-hover:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 15px -3px rgba(129, 140, 248, 0.1), 0 4px 6px -4px rgba(129, 140, 248, 0.1);
-        }
-    </style>
-<script id="tailwind-config">
-        tailwind.config = {
-            darkMode: "class",
-            theme: {
-                extend: {
-                    "colors": {
-                        "surface-container-highest": "#f1f5f9",
-                        "secondary": "#10b981",
-                        "error-container": "#fee2e2",
-                        "outline-variant": "#e2e8f0",
-                        "error": "#ef4444",
-                        "surface-bright": "#ffffff",
-                        "primary": "#818cf8",
-                        "primary-container": "#e0e7ff",
-                        "outline": "#94a3b8",
-                        "surface-container": "#ffffff",
-                        "surface-variant": "#f1f5f9",
-                        "surface-container-lowest": "#ffffff",
-                        "on-secondary": "#ffffff",
-                        "on-surface": "#0f172a",
-                        "surface-dim": "#f8fafc",
-                        "on-primary": "#ffffff",
-                        "background": "#f8fafc",
-                        "surface-container-low": "#fcfcfd",
-                        "surface": "#ffffff",
-                        "on-surface-variant": "#64748b"
-                    },
-                    "borderRadius": {
-                        "DEFAULT": "0.25rem",
-                        "lg": "0.5rem",
-                        "xl": "0.75rem",
-                        "full": "9999px"
-                    },
-                    "spacing": {
-                        "margin-mobile": "1rem",
-                        "stack-lg": "2rem",
-                        "gutter": "1.5rem",
-                        "container-max": "1280px",
-                        "stack-sm": "0.5rem",
-                        "stack-md": "1rem"
-                    },
-                    "fontFamily": {
-                        "headline-md": ["Geist"],
-                        "label-caps": ["Geist"],
-                        "body-sm": ["Geist"],
-                        "body-md": ["Geist"]
-                    },
-                    "fontSize": {
-                        "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "500"}],
-                        "label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
-                        "body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
-                        "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
-                    }
-                }
-            }
-        }
-    </script>
-</head>
-<body class="bg-background text-on-surface">
-<!-- TopAppBar -->
-<header class="fixed top-0 left-0 right-0 z-50 bg-surface border-b border-outline-variant">
-<div class="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
-<div class="flex items-center gap-3">
-<!-- Logo: Geometric bridge as described -->
-<div class="w-8 h-8 flex items-center justify-center bg-primary-container rounded-lg">
-<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">badge</span>
-</div>
-<span class="font-headline-md text-headline-md font-bold text-on-surface">DockDeck</span>
-</div>
-<!-- Navigation Links -->
-<nav class="hidden md:flex gap-8">
-<a class="text-primary border-b-2 border-primary pb-1 font-body-md" href="#">Dashboard</a>
-<a class="text-on-surface-variant hover:text-on-surface transition-colors font-body-md" href="#">Favorieten</a>
-</nav>
-<div class="flex items-center gap-4">
-<!-- Search Bar -->
-<div class="relative hidden sm:block">
-<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
-<input class="pl-10 pr-4 py-1.5 bg-surface-variant border-none rounded-full text-body-sm focus:ring-2 focus:ring-primary/50 w-64 transition-all" placeholder="Zoek services..." type="text"/>
-</div>
-<!-- Action Icons -->
-<div class="flex items-center gap-2">
-<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors">
-<span class="material-symbols-outlined text-on-surface-variant">sync</span>
-</button>
-<button class="p-2 hover:bg-surface-container-highest rounded-full transition-colors">
-<span class="material-symbols-outlined text-on-surface-variant">settings</span>
-</button>
-</div>
-</div>
-</div>
-</header>
-<div class="flex pt-16 min-h-screen">
-<!-- SideNavBar -->
-<aside class="hidden md:flex flex-col w-64 bg-surface-container-low border-r border-outline-variant py-stack-md px-stack-sm fixed h-[calc(100vh-64px)] overflow-y-auto">
-<div class="px-4 mb-6">
-<h2 class="font-headline-sm text-headline-md text-on-surface">Instellingen</h2>
-<p class="text-on-surface-variant text-body-sm">DockDeck Configuratie</p>
-</div>
-<nav class="flex flex-col gap-y-1">
-<a class="flex items-center gap-3 px-4 py-2 bg-secondary-container/10 text-on-secondary-container rounded-lg font-medium transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">settings</span>
-<span class="text-body-sm">Algemeen</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">grid_view</span>
-<span class="text-body-sm">Apps</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">star</span>
-<span class="text-body-sm">Favorieten</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">category</span>
-<span class="text-body-sm">Categorieën</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">palette</span>
-<span class="text-body-sm">Weergave</span>
-</a>
-<div class="h-px bg-outline-variant my-4 mx-4"></div>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">extension</span>
-<span class="text-body-sm">Integraties</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-2 text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface rounded-lg transition-all group" href="#">
-<span class="material-symbols-outlined text-[20px]">settings_backup_restore</span>
-<span class="text-body-sm">Back-up</span>
-</a>
-</nav>
-</aside>
-<!-- Main Content -->
-<main class="flex-1 md:ml-64 p-6 md:p-10">
-<div class="max-w-6xl mx-auto space-y-12">
-<!-- Quick Launch Section -->
-<section>
-<div class="flex items-center justify-between mb-6">
-<h3 class="font-headline-md text-on-surface">Favorieten</h3>
-<button class="text-primary font-label-caps uppercase tracking-wider text-[11px] hover:underline transition-all">Bewerk Dashboard</button>
-</div>
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-<!-- Card 1: Home Assistant -->
-<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
-<div class="flex items-start justify-between mb-4">
-<div class="p-2.5 bg-primary-container/20 text-primary rounded-lg">
-<span class="material-symbols-outlined text-[24px]" style="font-variation-settings: 'FILL' 1;">home_mini</span>
-</div>
-<span class="text-[10px] bg-secondary/10 text-secondary px-2 py-0.5 rounded-full font-bold uppercase tracking-widest">Nieuw</span>
-</div>
-<h4 class="font-body-md font-semibold text-on-surface">Home Assistant</h4>
-<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
-<div class="flex items-center gap-2">
-<span class="w-2 h-2 rounded-full bg-secondary"></span>
-<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
-</div>
-</div>
-<!-- Card 2: Plex -->
-<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
-<div class="flex items-start justify-between mb-4">
-<div class="p-2.5 bg-amber-100 text-amber-600 rounded-lg">
-<span class="material-symbols-outlined text-[24px]">movie</span>
-</div>
-</div>
-<h4 class="font-body-md font-semibold text-on-surface">Plex Media Server</h4>
-<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
-<div class="flex items-center gap-2">
-<span class="w-2 h-2 rounded-full bg-secondary"></span>
-<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
-</div>
-</div>
-<!-- Card 3: Pi-Hole -->
-<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
-<div class="flex items-start justify-between mb-4">
-<div class="p-2.5 bg-rose-100 text-rose-600 rounded-lg">
-<span class="material-symbols-outlined text-[24px]">security</span>
-</div>
-</div>
-<h4 class="font-body-md font-semibold text-on-surface">Pi-hole</h4>
-<p class="text-on-surface-variant text-[12px] mb-6">Zichtbaar op netwerk</p>
-<div class="flex items-center gap-2">
-<span class="w-2 h-2 rounded-full bg-secondary"></span>
-<span class="font-status-label text-status-label text-on-surface-variant">Online</span>
-</div>
-</div>
-<!-- Card 4: Synology -->
-<div class="glass-card p-5 rounded-xl app-card-hover transition-all cursor-pointer">
-<div class="flex items-start justify-between mb-4">
-<div class="p-2.5 bg-slate-200 text-slate-700 rounded-lg">
-<span class="material-symbols-outlined text-[24px]">storage</span>
-</div>
-</div>
-<h4 class="font-body-md font-semibold text-on-surface">NAS Opslag</h4>
-<p class="text-on-surface-variant text-[12px] mb-6">Verborgen status</p>
-<div class="flex items-center gap-2">
-<span class="w-2 h-2 rounded-full bg-slate-400"></span>
-<span class="font-status-label text-status-label text-on-surface-variant">Offline</span>
-</div>
-</div>
-</div>
-</section>
-<!-- Categories: Media Section with Asymmetric Layout -->
-<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-<div class="lg:col-span-4 space-y-4">
-<div class="p-8 bg-primary rounded-3xl text-white shadow-xl shadow-primary/20 relative overflow-hidden">
-<div class="relative z-10">
-<span class="material-symbols-outlined text-[48px] mb-4">theaters</span>
-<h3 class="text-2xl font-bold mb-2">Media &amp; Entertainment</h3>
-<p class="text-primary-container text-sm leading-relaxed opacity-90">Toegang tot al je streamingdiensten en lokale media bibliotheken op één plek.</p>
-<button class="mt-6 bg-white text-primary px-6 py-2 rounded-full text-sm font-semibold hover:bg-primary-container transition-colors">Open Media Hub</button>
-</div>
-<!-- Subtle Background pattern -->
-<div class="absolute -right-10 -bottom-10 opacity-10 rotate-12">
-<span class="material-symbols-outlined text-[200px]">play_circle</span>
-</div>
-</div>
-</div>
-<div class="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
-<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
-<div class="w-12 h-12 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600">
-<span class="material-symbols-outlined">podcasts</span>
-</div>
-<div>
-<h4 class="font-body-md font-semibold">AudioBooks</h4>
-<span class="text-[11px] text-secondary font-bold">4 ACTIEF</span>
-</div>
-<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
-</div>
-<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
-<div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
-<span class="material-symbols-outlined">tv</span>
-</div>
-<div>
-<h4 class="font-body-md font-semibold">Jellyfin</h4>
-<span class="text-[11px] text-secondary font-bold">ONLINE</span>
-</div>
-<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
-</div>
-<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
-<div class="w-12 h-12 rounded-lg bg-indigo-100 flex items-center justify-center text-indigo-600">
-<span class="material-symbols-outlined">download</span>
-</div>
-<div>
-<h4 class="font-body-md font-semibold">Transmission</h4>
-<span class="text-[11px] text-secondary font-bold">12 TAKEN</span>
-</div>
-<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
-</div>
-<div class="glass-card p-4 rounded-xl flex items-center gap-4 hover:bg-white transition-all cursor-pointer border border-transparent hover:border-primary/20">
-<div class="w-12 h-12 rounded-lg bg-emerald-100 flex items-center justify-center text-emerald-600">
-<span class="material-symbols-outlined">music_note</span>
-</div>
-<div>
-<h4 class="font-body-md font-semibold">Spotify Connect</h4>
-<span class="text-[11px] text-on-surface-variant font-bold">STANDBY</span>
-</div>
-<span class="material-symbols-outlined ml-auto text-on-surface-variant">chevron_right</span>
-</div>
-</div>
-</section>
-<!-- Smart Home Bento Grid Layout -->
-<section>
-<h3 class="font-headline-md text-on-surface mb-6">Smart Home</h3>
-<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-<!-- Large Feature Card -->
-<div class="md:col-span-2 glass-card rounded-2xl overflow-hidden group">
-<div class="relative h-48 overflow-hidden">
-<div class="w-full h-full bg-cover bg-center transition-transform duration-700 group-hover:scale-105" data-alt="A bright and airy minimalist modern living room with large floor-to-ceiling windows, light wood floors, and soft lavender and blue accent lighting. The space is clean, organized, and futuristic, following a light-theme aesthetic with premium finishes and a sense of calm high-tech living." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCIR3iGyk1AyOwWKV2NXkWJ_lynZqRiC0-lykR_wOjRKOnSh-x6Or2H9k93_e01stpK7Nn0KGKURtoGPU3nI5nBzUV0yK3SnSms3XtKcIFdnIyF3Bqh3cI05XDVdrsOCu6_YVRzXhoguMwU8U3zM83eneOsMusqNmUzecJbEOUlgfhZKGCj3UthW_eKWUuiI3jTE-xa4joTQF7-LSaWmIUf3HEk8YJ_gkSe7AU7QhAJGsOFrlIvn9YUV5y0uID3TcoGrHozWBLw8kmD')"></div>
-<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
-<div class="absolute bottom-4 left-6 text-white">
-<span class="text-[10px] font-bold uppercase tracking-widest bg-primary px-2 py-1 rounded">Camera Feed</span>
-<h4 class="text-xl font-bold mt-2">Woonkamer Camera</h4>
-</div>
-</div>
-<div class="p-6 flex items-center justify-between">
-<div class="flex gap-4">
-<div class="text-center">
-<p class="text-on-surface-variant text-[10px] font-bold uppercase">Temp</p>
-<p class="text-xl font-bold">21°C</p>
-</div>
-<div class="text-center">
-<p class="text-on-surface-variant text-[10px] font-bold uppercase">Vocht</p>
-<p class="text-xl font-bold">45%</p>
-</div>
-</div>
-<button class="p-3 bg-primary text-white rounded-xl shadow-lg shadow-primary/20">
-<span class="material-symbols-outlined">videocam</span>
-</button>
-</div>
-</div>
-<!-- Stacked Small Cards -->
-<div class="space-y-6">
-<div class="glass-card p-6 rounded-2xl flex flex-col justify-between h-full">
-<div class="flex justify-between items-start">
-<span class="material-symbols-outlined text-amber-500 text-[32px]">lightbulb</span>
-<div class="w-12 h-6 bg-slate-200 rounded-full relative cursor-pointer">
-<div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all shadow-sm"></div>
-</div>
-</div>
-<div class="mt-8">
-<h4 class="font-bold text-on-surface">Verlichting</h4>
-<p class="text-on-surface-variant text-sm">8 lampen actief</p>
-</div>
-</div>
-<div class="glass-card p-6 rounded-2xl flex flex-col justify-between h-full">
-<div class="flex justify-between items-start">
-<span class="material-symbols-outlined text-blue-500 text-[32px]">thermostat</span>
-</div>
-<div class="mt-8">
-<h4 class="font-bold text-on-surface">Klimaat</h4>
-<p class="text-on-surface-variant text-sm">Verwarming uit</p>
-</div>
-</div>
-</div>
-</div>
-</section>
-</div>
-</main>
-</div>
-<!-- Micro-interaction Script -->
-<script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Simulate a simple toggle for the switch
-            const switches = document.querySelectorAll('.w-12.h-6.bg-slate-200');
-            switches.forEach(sw => {
-                sw.addEventListener('click', function() {
-                    const circle = this.querySelector('div');
-                    const isActive = circle.classList.contains('translate-x-6');
-                    
-                    if (isActive) {
-                        circle.classList.remove('translate-x-6');
-                        circle.classList.add('left-1');
-                        this.classList.remove('bg-primary');
-                        this.classList.add('bg-slate-200');
-                    } else {
-                        circle.classList.remove('left-1');
-                        circle.classList.add('translate-x-6');
-                        this.classList.remove('bg-slate-200');
-                        this.classList.add('bg-primary');
-                    }
-                });
-            });
-
-            // Basic hover lifting effect logic handled by Tailwind's transition and app-card-hover
-        });
-    </script>
-</body></html>
\ No newline at end of file
