diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_app_editor_definitief/code.html b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_app_editor_definitief/code.html
deleted file mode 100644
index eca901c7..00000000
--- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/instellingen_app_editor_definitief/code.html
+++ /dev/null
@@ -1,415 +0,0 @@
-<!DOCTYPE html>
-
-<html class="dark" lang="nl"><head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-<title>DockDeck - App Editor</title>
-<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Geist:wght@400;500;600;700;800&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"/>
-<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
-<!-- Tailwind Configuration -->
-<script id="tailwind-config">
-      tailwind.config = {
-        darkMode: "class",
-        theme: {
-          extend: {
-            "colors": {
-                    "surface-variant": "#2d3449",
-                    "on-primary": "#292b5e",
-                    "inverse-on-surface": "#283044",
-                    "surface": "#0b1326",
-                    "surface-container": "#171f33",
-                    "surface-bright": "#31394e",
-                    "on-secondary": "#003824",
-                    "on-error-container": "#ffdad6",
-                    "status-degraded": "#ffb783",
-                    "surface-glass": "rgba(15, 23, 42, 0.6)",
-                    "on-background": "#dbe2fd",
-                    "on-tertiary": "#4f2500",
-                    "status-online": "#4edea3",
-                    "inverse-surface": "#dbe2fd",
-                    "secondary-fixed": "#6ffbbe",
-                    "on-tertiary-fixed-variant": "#703700",
-                    "status-offline": "#ffb4ab",
-                    "outline-variant": "#464554",
-                    "on-primary-fixed": "#131449",
-                    "surface-container-high": "#222a3e",
-                    "primary-fixed": "#e1e0ff",
-                    "on-secondary-container": "#003e28",
-                    "outline": "#908fa0",
-                    "tertiary-fixed-dim": "#ffb783",
-                    "surface-tint": "#c0c1ff",
-                    "tertiary-fixed": "#ffdcc5",
-                    "error-container": "#93000a",
-                    "secondary": "#4edea3",
-                    "primary": "#c0c1ff",
-                    "on-surface-variant": "#c7c4d7",
-                    "on-tertiary-fixed": "#301400",
-                    "on-secondary-fixed-variant": "#005236",
-                    "error": "#ffb4ab",
-                    "surface-container-low": "#131b2e",
-                    "on-tertiary-container": "#452000",
-                    "tertiary": "#ffb783",
-                    "secondary-fixed-dim": "#4edea3",
-                    "surface-container-highest": "#2d3449",
-                    "secondary-container": "#00b47d",
-                    "primary-fixed-dim": "#c0c1ff",
-                    "on-primary-fixed-variant": "#404176",
-                    "primary-container": "#8a8cc6",
-                    "on-primary-container": "#222457",
-                    "inverse-primary": "#585990",
-                    "surface-container-lowest": "#060d20",
-                    "on-secondary-fixed": "#002114",
-                    "on-error": "#690005",
-                    "background": "#0b1326",
-                    "on-surface": "#dbe2fd",
-                    "tertiary-container": "#d97721",
-                    "surface-dim": "#0b1326"
-            },
-            "borderRadius": {
-                    "DEFAULT": "0.25rem",
-                    "lg": "0.5rem",
-                    "xl": "0.75rem",
-                    "full": "9999px"
-            },
-            "spacing": {
-                    "gutter": "24px",
-                    "stack-lg": "48px",
-                    "margin-desktop": "40px",
-                    "margin-mobile": "16px",
-                    "base": "8px",
-                    "stack-md": "24px",
-                    "container-max": "1440px",
-                    "stack-sm": "12px"
-            },
-            "fontFamily": {
-                    "label-md": ["Geist"],
-                    "headline-lg-mobile": ["Geist"],
-                    "code-sm": ["Geist"],
-                    "headline-md": ["Geist"],
-                    "display-lg": ["Geist"],
-                    "body-lg": ["Inter"],
-                    "headline-lg": ["Geist"],
-                    "body-md": ["Inter"]
-            },
-            "fontSize": {
-                    "label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.02em", "fontWeight": "500"}],
-                    "headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
-                    "code-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
-                    "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
-                    "display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
-                    "body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}],
-                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
-                    "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
-            }
-          },
-        },
-      }
-    </script>
-<style>
-        body {
-            background-color: #0b1326;
-            color: #dbe2fd;
-            overflow-x: hidden;
-        }
-        .glass-panel {
-            background: rgba(15, 23, 42, 0.6);
-            backdrop-filter: blur(12px);
-            border: 1px solid rgba(30, 41, 59, 0.5);
-        }
-        .active-dot {
-            box-shadow: 0 0 8px #4edea3;
-        }
-        .custom-scrollbar::-webkit-scrollbar {
-            width: 4px;
-        }
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: rgba(144, 143, 160, 0.2);
-            border-radius: 10px;
-        }
-        input:focus {
-            outline: none;
-            box-shadow: 0 0 0 2px rgba(192, 193, 255, 0.3);
-        }
-    </style>
-</head>
-<body class="font-body-md text-body-md min-h-screen flex">
-<!-- Sidebar Navigation Shell -->
-<nav class="hidden xl:flex fixed left-0 top-16 h-[calc(100vh-64px)] w-64 flex-col p-base gap-stack-sm bg-surface-container-low border-r border-outline-variant/10 z-40 transition-all">
-<div class="px-4 py-2">
-<h3 class="font-label-md text-label-md text-primary/60 uppercase tracking-widest">Systeem</h3>
-</div>
-<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
-<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">dashboard</span>
-<span class="font-label-md text-label-md">Dashboard</span>
-</a>
-<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
-<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">layers</span>
-<span class="font-label-md text-label-md">Containers</span>
-</a>
-<div class="mt-4 px-4 py-2 border-t border-outline-variant/10">
-<h3 class="font-label-md text-label-md text-primary/60 uppercase tracking-widest">Configuratie</h3>
-</div>
-<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg transition-all duration-200" href="#">
-<span class="material-symbols-outlined">settings</span>
-<span class="font-label-md text-label-md">Settings</span>
-</a>
-<div class="mt-auto pt-4 border-t border-outline-variant/10">
-<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:text-on-surface hover:bg-surface-bright/30 transition-all rounded-lg group" href="#">
-<span class="material-symbols-outlined group-hover:translate-x-1 duration-200">logout</span>
-<span class="font-label-md text-label-md">Logout</span>
-</a>
-</div>
-</nav>
-<!-- Top App Bar -->
-<header class="fixed top-0 w-full flex justify-between items-center h-16 px-gutter z-50 bg-surface-glass backdrop-blur-xl border-b border-outline-variant/20 shadow-sm">
-<div class="flex items-center gap-4">
-<span class="font-headline-md text-headline-md font-bold text-primary">DockDeck</span>
-<span class="text-on-surface-variant/40 hidden md:inline">/</span>
-<span class="font-label-md text-label-md text-on-surface-variant hidden md:inline">Instellingen</span>
-</div>
-<div class="flex items-center gap-3">
-<div class="relative hidden md:block">
-<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
-<input class="bg-surface-container-low text-on-surface font-label-md text-label-md px-10 py-2 rounded-full border border-outline-variant/20 focus:border-primary/50 w-64 transition-all" placeholder="Doorzoek instellingen..." type="text"/>
-</div>
-<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors active:scale-95">
-<span class="material-symbols-outlined">settings</span>
-</button>
-<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors active:scale-95">
-<span class="material-symbols-outlined">account_circle</span>
-</button>
-</div>
-</header>
-<!-- Main Content Canvas -->
-<main class="flex-1 mt-16 ml-0 xl:ml-64 p-gutter max-w-7xl mx-auto w-full transition-all">
-<!-- Setting Page Header -->
-<div class="mb-stack-lg">
-<h1 class="font-headline-lg text-headline-lg text-on-surface mb-2">Applicatie Beheer</h1>
-<p class="text-on-surface-variant max-w-2xl">Beheer hoe je containers worden weergegeven op het dashboard en configureer toegang via lokale en externe netwerken.</p>
-</div>
-<!-- App Tiles Grid (Pre-state) -->
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-gutter">
-<!-- App Card Example 1 -->
-<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer border-primary/20 bg-primary/5 ring-1 ring-primary/20">
-<div class="flex justify-between items-start">
-<div class="w-12 h-12 rounded-xl bg-primary-container flex items-center justify-center text-on-primary-container">
-<span class="material-symbols-outlined text-3xl">home_app_logo</span>
-</div>
-<div class="flex items-center gap-2">
-<span class="text-[10px] font-bold text-secondary uppercase tracking-tighter bg-secondary/10 px-2 py-0.5 rounded">Actief</span>
-<div class="w-2 h-2 rounded-full bg-secondary active-dot"></div>
-</div>
-</div>
-<div>
-<h3 class="font-headline-md text-headline-md text-on-surface">Home Assistant</h3>
-<p class="text-on-surface-variant font-label-md text-label-md">Smart Home Controller</p>
-</div>
-<div class="flex gap-2 mt-2">
-<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Automation</span>
-</div>
-<div class="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl flex items-center justify-center">
-<button class="bg-primary text-on-primary px-4 py-2 rounded-lg font-label-md flex items-center gap-2">
-<span class="material-symbols-outlined">edit</span>
-                        Bewerken
-                    </button>
-</div>
-</div>
-<!-- App Card Example 2 -->
-<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer">
-<div class="flex justify-between items-start">
-<div class="w-12 h-12 rounded-xl bg-surface-variant flex items-center justify-center text-on-surface-variant">
-<span class="material-symbols-outlined text-3xl">storage</span>
-</div>
-<div class="flex items-center gap-2">
-<div class="w-2 h-2 rounded-full bg-status-offline opacity-50"></div>
-</div>
-</div>
-<div>
-<h3 class="font-headline-md text-headline-md text-on-surface">Nextcloud</h3>
-<p class="text-on-surface-variant font-label-md text-label-md">File Storage &amp; Cloud</p>
-</div>
-<div class="flex gap-2 mt-2">
-<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Cloud</span>
-</div>
-</div>
-<!-- App Card Example 3 -->
-<div class="glass-panel p-gutter rounded-xl flex flex-col gap-4 relative group hover:-translate-y-1 transition-all cursor-pointer">
-<div class="flex justify-between items-start">
-<div class="w-12 h-12 rounded-xl bg-surface-variant flex items-center justify-center text-on-surface-variant">
-<span class="material-symbols-outlined text-3xl">terminal</span>
-</div>
-<div class="flex items-center gap-2">
-<div class="w-2 h-2 rounded-full bg-secondary active-dot"></div>
-</div>
-</div>
-<div>
-<h3 class="font-headline-md text-headline-md text-on-surface">Portainer</h3>
-<p class="text-on-surface-variant font-label-md text-label-md">Docker Management UI</p>
-</div>
-<div class="flex gap-2 mt-2">
-<span class="font-code-sm text-code-sm bg-surface-container px-2 py-1 rounded text-on-surface-variant">Tools</span>
-</div>
-</div>
-</div>
-</main>
-<!-- Side Drawer Overlay -->
-<div class="fixed inset-0 bg-surface/80 backdrop-blur-sm z-[60] transition-opacity duration-300" id="drawer-backdrop"></div>
-<!-- Side Drawer (App Editor) -->
-<aside class="fixed right-0 top-0 h-screen w-full md:w-[480px] bg-surface-container-high border-l border-outline-variant/30 z-[70] flex flex-col shadow-2xl transition-transform duration-300 translate-x-0" id="app-editor-drawer">
-<!-- Drawer Header -->
-<div class="flex items-center justify-between p-gutter border-b border-outline-variant/20 bg-surface-container-highest/30">
-<div class="flex items-center gap-4">
-<button class="p-2 text-on-surface-variant hover:bg-surface-variant/50 rounded-full transition-colors" id="close-drawer">
-<span class="material-symbols-outlined">close</span>
-</button>
-<div>
-<h2 class="font-headline-md text-headline-md text-on-surface">App Bewerken</h2>
-<p class="text-on-surface-variant font-label-md text-label-md">Home Assistant</p>
-</div>
-</div>
-<button class="bg-primary text-on-primary px-6 py-2 rounded-lg font-label-md hover:brightness-110 transition-all active:scale-95">Opslaan</button>
-</div>
-<!-- Scrollable Form Area -->
-<div class="flex-1 overflow-y-auto custom-scrollbar p-gutter space-y-stack-md">
-<!-- Basic Information Section -->
-<section class="space-y-4">
-<div class="flex items-center gap-2 mb-2">
-<span class="material-symbols-outlined text-primary text-sm">info</span>
-<h3 class="font-label-md text-label-md text-primary uppercase tracking-widest">Algemene Informatie</h3>
-</div>
-<!-- Display Name -->
-<div class="space-y-2">
-<label class="font-label-md text-label-md text-on-surface-variant block">Weergavenaam</label>
-<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all" type="text" value="Home Assistant"/>
-</div>
-<div class="grid grid-cols-2 gap-4">
-<!-- Icon Selection -->
-<div class="space-y-2">
-<label class="font-label-md text-label-md text-on-surface-variant block">Icoon</label>
-<div class="relative">
-<div class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface flex items-center justify-between cursor-pointer">
-<div class="flex items-center gap-3">
-<span class="material-symbols-outlined text-secondary">home_app_logo</span>
-<span class="font-label-md">home_app_logo</span>
-</div>
-<span class="material-symbols-outlined">expand_more</span>
-</div>
-</div>
-</div>
-<!-- Category -->
-<div class="space-y-2">
-<label class="font-label-md text-label-md text-on-surface-variant block">Categorie</label>
-<div class="relative">
-<select class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface appearance-none focus:border-primary/50 transition-all">
-<option>Automatisering</option>
-<option>Media</option>
-<option>Beheer</option>
-<option>Bestanden</option>
-</select>
-<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">expand_more</span>
-</div>
-</div>
-</div>
-<!-- Visibility Toggle -->
-<div class="flex items-center justify-between p-4 bg-surface-variant/20 rounded-xl border border-outline-variant/10">
-<div>
-<h4 class="font-label-md text-label-md text-on-surface">Zichtbaarheid</h4>
-<p class="text-[12px] text-on-surface-variant">Verberg applicatie op het hoofd-dashboard</p>
-</div>
-<label class="relative inline-flex items-center cursor-pointer">
-<input checked="" class="sr-only peer" type="checkbox" value=""/>
-<div class="w-11 h-6 bg-surface-variant peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-secondary"></div>
-</label>
-</div>
-</section>
-<!-- Network & Connectivity Section -->
-<section class="space-y-4 pt-4 border-t border-outline-variant/10">
-<div class="flex items-center gap-2 mb-2">
-<span class="material-symbols-outlined text-secondary text-sm">lan</span>
-<h3 class="font-label-md text-label-md text-secondary uppercase tracking-widest">Netwerk &amp; Connectiviteit</h3>
-</div>
-<!-- Local URL -->
-<div class="space-y-2">
-<div class="flex justify-between items-center">
-<label class="font-label-md text-label-md text-on-surface-variant">Lokale WebUI URL</label>
-<span class="text-[10px] bg-secondary/10 text-secondary border border-secondary/20 px-2 py-0.5 rounded uppercase font-bold tracking-tight">Automatisch ontdekt</span>
-</div>
-<div class="relative">
-<input class="w-full bg-surface-container-lowest/50 border border-outline-variant/20 rounded-lg px-4 py-3 text-on-surface-variant italic cursor-not-allowed" disabled="" type="text" value="http://192.168.1.50:8123"/>
-</div>
-</div>
-<!-- Local Override -->
-<div class="space-y-2">
-<label class="font-label-md text-label-md text-on-surface-variant block">Handmatige Lokale Override</label>
-<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all placeholder:text-on-surface-variant/30" placeholder="bv. http://ha.local" type="text"/>
-</div>
-<!-- External URL -->
-<div class="space-y-2">
-<div class="flex justify-between items-center">
-<label class="font-label-md text-label-md text-on-surface-variant">Externe URL</label>
-<span class="text-[10px] bg-primary/10 text-primary border border-primary/20 px-2 py-0.5 rounded uppercase font-bold tracking-tight">Via Nginx Proxy Manager</span>
-</div>
-<input class="w-full bg-surface-container-low border border-outline-variant/30 rounded-lg px-4 py-3 text-on-surface focus:border-primary/50 transition-all" type="text" value="https://hass.mijn-domein.nl"/>
-</div>
-</section>
-<!-- Reset Actions -->
-<section class="pt-6">
-<button class="w-full group flex items-center justify-center gap-2 px-4 py-4 rounded-xl border border-error/30 text-error hover:bg-error/10 transition-all duration-200">
-<span class="material-symbols-outlined text-[20px] group-active:rotate-180 transition-transform duration-300">history</span>
-<span class="font-label-md">Overrides herstellen naar standaard</span>
-</button>
-<p class="text-center text-[11px] text-on-surface-variant/50 mt-3 px-6">
-                    Dit herstelt alleen de weergave-instellingen en URL's binnen DockDeck. Dit heeft geen invloed op de draaiende Docker container.
-                </p>
-</section>
-</div>
-<!-- Drawer Footer (Mobile visual support) -->
-<div class="p-gutter border-t border-outline-variant/20 bg-surface-container-low md:hidden">
-<button class="w-full bg-primary text-on-primary py-4 rounded-xl font-bold">Opslaan</button>
-</div>
-</aside>
-<!-- Visual Polish: Light atmospheric glow behind drawer -->
-<div class="fixed top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] pointer-events-none z-[65]"></div>
-<script>
-        // Simple micro-interactions for the drawer
-        const closeBtn = document.getElementById('close-drawer');
-        const backdrop = document.getElementById('drawer-backdrop');
-        const drawer = document.getElementById('app-editor-drawer');
-
-        function hideDrawer() {
-            drawer.style.transform = 'translateX(100%)';
-            backdrop.style.opacity = '0';
-            setTimeout(() => {
-                backdrop.classList.add('hidden');
-            }, 300);
-        }
-
-        function showDrawer() {
-            backdrop.classList.remove('hidden');
-            setTimeout(() => {
-                drawer.style.transform = 'translateX(0)';
-                backdrop.style.opacity = '1';
-            }, 10);
-        }
-
-        closeBtn.addEventListener('click', hideDrawer);
-        backdrop.addEventListener('click', hideDrawer);
-
-        // Hover effect for reset button icon spin
-        const resetBtn = document.querySelector('button.text-error');
-        resetBtn.addEventListener('mousedown', () => {
-             resetBtn.querySelector('.material-symbols-outlined').style.transform = 'rotate(-180deg)';
-        });
-        resetBtn.addEventListener('mouseup', () => {
-             resetBtn.querySelector('.material-symbols-outlined').style.transform = 'rotate(0deg)';
-        });
-
-        // Initialize state
-        // showDrawer(); // Uncomment to open on load for preview
-    </script>
-</body></html>
\ No newline at end of file
