Add vapor shell preset selection flow for host apps

demo/web/static/js/app.js

@@ -1,2 +1,66 @@
-document.documentElement.classList.add("js");
-document.documentElement.setAttribute("data-theme-mode", "auto");
+(() => {
+  const root = document.documentElement;
+  const storageKey = "vapor_shell";
+  const queryKey = "vapor_shell";
+  const fallbackPreset = "miami-sunset";
+  const allowed = new Set([
+    "miami-sunset",
+    "neon-grid",
+    "laser-flamingo",
+    "synth-lagoon",
+    "mall-soft",
+    "hologram-sky",
+    "peach-drive",
+    "ultraviolet-plaza",
+    "cyber-mint",
+  ]);
+
+  const normalizePreset = (value) => {
+    const trimmed = (value || "").trim().toLowerCase();
+    if (!trimmed || !allowed.has(trimmed)) {
+      return "";
+    }
+    return trimmed;
+  };
+
+  const setPreset = (value) => {
+    const preset = normalizePreset(value);
+    if (!preset) {
+      return false;
+    }
+    root.setAttribute("data-vapor-shell", preset);
+    return true;
+  };
+
+  root.classList.add("js");
+  root.setAttribute("data-theme-mode", "auto");
+
+  const url = new URL(window.location.href);
+  const fromQuery = normalizePreset(url.searchParams.get(queryKey));
+  if (fromQuery) {
+    setPreset(fromQuery);
+    try {
+      window.localStorage.setItem(storageKey, fromQuery);
+    } catch (_err) {
+      // Keep behavior deterministic even when storage is blocked.
+    }
+    return;
+  }
+
+  const fromMarkup = normalizePreset(root.getAttribute("data-vapor-shell"));
+  if (fromMarkup) {
+    return;
+  }
+
+  try {
+    const fromStorage = normalizePreset(window.localStorage.getItem(storageKey));
+    if (fromStorage) {
+      setPreset(fromStorage);
+      return;
+    }
+  } catch (_err) {
+    // Fallback handled below.
+  }
+
+  setPreset(fallbackPreset);
+})();