+
+ Network
+Optimize connection and online routing.
+
+
+
+
+
+
+ Status
+Applying Nebula profile
+Welcome to Tauri
+ + + + + -
-
- 
-
-
- 
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/home/home.js b/src/views/home/home.js
new file mode 100644
index 0000000..41ba7c7
--- /dev/null
+++ b/src/views/home/home.js
@@ -0,0 +1,132 @@
+const HOME_TEMPLATE = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const createHomeView = ({ state, renderView, openPowerMenu }) => ({
+ id: "home",
+ render: () => HOME_TEMPLATE,
+ mount: () => {
+ const rail = document.querySelector("[data-home-rail]");
+ const background = document.querySelector("#nebula-background");
+ if (!rail) {
+ return;
+ }
+
+ const focusTile = (tile) => {
+ if (!tile) {
+ return;
+ }
+
+ const targetScroll = tile.offsetLeft - rail.clientWidth * 0.22;
+ rail.scrollTo({
+ left: Math.max(0, targetScroll),
+ behavior: "smooth",
+ });
+
+ const focusColumn = Number(tile.dataset.col ?? 0);
+ document.documentElement.style.setProperty("--nebula-focus-strength", "1");
+ document.documentElement.style.setProperty("--nebula-accent-line-x", `${20 + focusColumn * 112}px`);
+ rail.style.setProperty("--home-parallax-x", `${focusColumn * -10}px`);
+ background?.style.setProperty("--bg-parallax-x", `${focusColumn * -6}px`);
+ };
+
+ rail.addEventListener("focusin", (event) => {
+ const tile = event.target.closest("[data-focusable='true']");
+ focusTile(tile);
+ if (tile) {
+ window.dispatchEvent(
+ new CustomEvent("nebula-ui-hook", {
+ detail: { type: "focus", target: tile.dataset.target },
+ }),
+ );
+ }
+ });
+ },
+ getNavigationContract: () => {
+ const root = document.querySelector("[data-home-rail]");
+ return {
+ focusRoot: root,
+ defaultFocus: root?.querySelector("[data-target='library']") ?? null,
+ layout: { type: "grid", cols: 4, rows: 1 },
+ hintsTemplate: "#global-hints-template",
+ nebulaNavigation: state.nebula.navigation,
+ onAccept: (element) => {
+ if (!element) {
+ return;
+ }
+ const target = element.dataset.target;
+ if (target === "power") {
+ openPowerMenu();
+ return;
+ }
+ state.activeView = target;
+ renderView(target);
+ },
+ onBack: () => {
+ state.locked = true;
+ state.activeView = "lock";
+ renderView("lock");
+ },
+ onMenu: () => {},
+ };
+ },
+});
diff --git a/src/views/library/library.css b/src/views/library/library.css
new file mode 100644
index 0000000..a7ade77
--- /dev/null
+++ b/src/views/library/library.css
@@ -0,0 +1,10 @@
+.stub-view {
+ justify-content: center;
+}
+
+.stub-panel {
+ max-width: 720px;
+ display: flex;
+ flex-direction: column;
+ gap: var(--nebula-spacing-md);
+}
diff --git a/src/views/library/library.html b/src/views/library/library.html
new file mode 100644
index 0000000..53d1747
--- /dev/null
+++ b/src/views/library/library.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/library/library.js b/src/views/library/library.js
new file mode 100644
index 0000000..b0d92ad
--- /dev/null
+++ b/src/views/library/library.js
@@ -0,0 +1,48 @@
+const LIBRARY_TEMPLATE = `
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const createLibraryView = ({ state, renderView }) => ({
+ id: "library",
+ render: () => LIBRARY_TEMPLATE,
+ getNavigationContract: () => {
+ const root = document.querySelector("[data-focus-root]");
+ return {
+ focusRoot: root,
+ defaultFocus: root?.querySelector("[data-action='back']") ?? null,
+ layout: { type: "list", rows: 1 },
+ hintsTemplate: "#minimal-hints-template",
+ nebulaNavigation: state.nebula.navigation,
+ onAccept: () => {
+ state.activeView = "home";
+ renderView("home");
+ },
+ onBack: () => {
+ state.activeView = "home";
+ renderView("home");
+ },
+ onMenu: () => {},
+ };
+ },
+});
diff --git a/src/views/lock/lock.css b/src/views/lock/lock.css
new file mode 100644
index 0000000..c7b4691
--- /dev/null
+++ b/src/views/lock/lock.css
@@ -0,0 +1,233 @@
+.lock-view {
+ justify-content: center;
+ align-items: center;
+ background: radial-gradient(circle at 55% 48%, rgba(79, 216, 255, 0.1), transparent 62%);
+}
+
+.lock-layout {
+ width: min(1240px, 96vw);
+ min-height: min(720px, 82vh);
+ display: grid;
+ grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px);
+ gap: clamp(24px, 4vw, 58px);
+ background:
+ linear-gradient(165deg, rgba(56, 82, 128, 0.18), rgba(19, 30, 56, 0.74)),
+ radial-gradient(circle at 65% 35%, rgba(79, 216, 255, 0.08), transparent 52%),
+ rgba(13, 18, 31, 0.78);
+ border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ box-shadow:
+ 0 24px 62px rgba(0, 0, 0, 0.38),
+ inset 0 1px 0 rgba(255, 255, 255, 0.12);
+ backdrop-filter: blur(14px);
+ padding: clamp(28px, 4vw, 48px);
+}
+
+.lock-view.is-success .lock-layout {
+ box-shadow:
+ 0 0 0 1px rgba(79, 216, 255, 0.3),
+ 0 24px 62px rgba(0, 0, 0, 0.38),
+ 0 0 48px rgba(79, 216, 255, 0.24);
+}
+
+.lock-left {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: var(--nebula-spacing-lg);
+}
+
+.lock-user {
+ display: inline-flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.lock-avatar {
+ width: 42px;
+ height: 42px;
+ border-radius: 999px;
+ border: 2px solid rgba(79, 216, 255, 0.44);
+ background:
+ radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), transparent 45%),
+ linear-gradient(145deg, rgba(112, 189, 255, 0.66), rgba(66, 78, 142, 0.8));
+}
+
+.lock-username {
+ margin: 0;
+ font-weight: 640;
+ font-size: 18px;
+}
+
+.lock-title {
+ margin: 0;
+ font-size: clamp(36px, 5vw, 52px);
+ font-weight: 540;
+ letter-spacing: -0.01em;
+}
+
+.lock-copy {
+ margin: 0;
+ color: var(--nebula-color-muted);
+ font-size: 20px;
+ line-height: 1.45;
+ max-width: 540px;
+}
+
+.lock-dots {
+ display: flex;
+ align-items: center;
+ gap: clamp(14px, 1.6vw, 22px);
+ min-height: 30px;
+ transition: transform var(--nebula-duration-fast) var(--nebula-ease-console);
+}
+
+.lock-dot {
+ width: 22px;
+ height: 22px;
+ border-radius: 999px;
+ border: 2px solid rgba(191, 206, 230, 0.38);
+ background: rgba(255, 255, 255, 0.05);
+ opacity: 0.75;
+ transform: scale(0.92);
+ transition:
+ transform var(--nebula-duration-fast) var(--nebula-ease-console),
+ border-color var(--nebula-duration-fast) var(--nebula-ease-console),
+ background-color var(--nebula-duration-fast) var(--nebula-ease-console),
+ box-shadow var(--nebula-duration-fast) var(--nebula-ease-console);
+}
+
+.lock-dot.active {
+ border-color: rgba(79, 216, 255, 0.72);
+ box-shadow: 0 0 16px rgba(79, 216, 255, 0.34);
+}
+
+.lock-dot.filled {
+ background: rgba(215, 230, 255, 0.9);
+ border-color: rgba(215, 230, 255, 0.95);
+ transform: scale(1);
+ animation: dotFill var(--nebula-duration-fast) var(--nebula-ease-console);
+}
+
+.lock-dots.is-success .lock-dot.filled {
+ border-color: rgba(79, 216, 255, 0.95);
+ background: rgba(79, 216, 255, 0.9);
+ box-shadow: 0 0 20px rgba(79, 216, 255, 0.58);
+}
+
+.lock-dots.is-error .lock-dot {
+ border-color: color-mix(in srgb, var(--nebula-color-danger) 72%, rgba(255, 255, 255, 0.3));
+ box-shadow: 0 0 20px color-mix(in srgb, var(--nebula-color-danger) 38%, transparent);
+}
+
+.lock-dots.is-shaking {
+ animation: dotsShake 420ms var(--nebula-ease-console);
+}
+
+.lock-status {
+ margin: 0;
+ min-height: 24px;
+ font-size: 16px;
+ color: var(--nebula-color-muted);
+}
+
+.lock-status.is-danger {
+ color: var(--nebula-color-danger);
+}
+
+.lock-right {
+ align-self: center;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(96px, 1fr));
+ gap: clamp(10px, 1.4vw, 18px);
+ justify-items: center;
+ background: rgba(15, 24, 45, 0.6);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.lock-num {
+ width: clamp(82px, 7.3vw, 112px);
+ height: clamp(82px, 7.3vw, 112px);
+ border: none;
+ border-radius: 18px;
+ font-size: clamp(42px, 3.8vw, 68px);
+ font-weight: 330;
+ line-height: 1;
+ color: color-mix(in srgb, var(--nebula-color-text) 95%, rgba(215, 230, 255, 0.94));
+ background:
+ radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.12), transparent 55%),
+ linear-gradient(162deg, rgba(61, 90, 140, 0.18), rgba(15, 23, 43, 0.6));
+ box-shadow:
+ 0 10px 22px rgba(0, 0, 0, 0.24),
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
+ transition:
+ transform var(--nebula-duration-nav) var(--nebula-ease-console),
+ box-shadow var(--nebula-duration-nav) var(--nebula-ease-console),
+ border-color var(--nebula-duration-nav) var(--nebula-ease-console);
+ display: inline-flex;
+ align-items: baseline;
+ justify-content: center;
+ gap: 8px;
+}
+
+.lock-num.is-zero {
+ grid-column: 2;
+}
+
+.lock-num.is-focused {
+ transform: scale(1.1);
+ box-shadow:
+ 0 0 0 2px rgba(79, 216, 255, 0.5),
+ 0 0 28px rgba(79, 216, 255, 0.36),
+ 0 12px 30px rgba(0, 0, 0, 0.28);
+}
+
+.lock-map {
+ font-size: 13px;
+ font-weight: 650;
+ letter-spacing: 0.02em;
+ color: color-mix(in srgb, var(--nebula-color-muted) 80%, #fff);
+ transform: translateY(-8px);
+}
+
+.lock-num.is-focused .lock-map {
+ color: color-mix(in srgb, var(--nebula-color-accent) 85%, #fff);
+}
+
+@keyframes dotFill {
+ 0% {
+ opacity: 0.35;
+ transform: scale(0.62);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes dotsShake {
+ 0% {
+ transform: translateX(0);
+ }
+
+ 20% {
+ transform: translateX(-9px);
+ }
+
+ 40% {
+ transform: translateX(8px);
+ }
+
+ 60% {
+ transform: translateX(-6px);
+ }
+
+ 80% {
+ transform: translateX(4px);
+ }
+
+ 100% {
+ transform: translateX(0);
+ }
+}
diff --git a/src/views/lock/lock.html b/src/views/lock/lock.html
new file mode 100644
index 0000000..0db89fc
--- /dev/null
+++ b/src/views/lock/lock.html
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/lock/lock.js b/src/views/lock/lock.js
new file mode 100644
index 0000000..2667328
--- /dev/null
+++ b/src/views/lock/lock.js
@@ -0,0 +1,385 @@
+const LOCK_TEMPLATE = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+export const createLockView = ({ state, renderView }) => {
+ const ENTRY_DEBOUNCE_MS = 120;
+ const FAIL_CLEAR_MS = 600;
+
+ let digits = [];
+ let setupDigits = [];
+ let setupPhase = "create";
+ let busy = false;
+ let lastEntryAt = 0;
+ let keyboardListener = null;
+
+ const config = () => state.passkey.getConfig();
+
+ const ACTION_TO_DIGIT = {
+ up: "1",
+ left: "2",
+ down: "3",
+ right: "4",
+ l2: "5",
+ r2: "6",
+ l1: "7",
+ r1: "8",
+ y: "9",
+ clear: "0",
+ };
+
+ const playTone = (frequency = 860, durationMs = 34, gainValue = 0.03) => {
+ const AudioContextClass = window.AudioContext ?? window.webkitAudioContext;
+ if (!AudioContextClass) {
+ return;
+ }
+
+ try {
+ const ctx = new AudioContextClass();
+ const oscillator = ctx.createOscillator();
+ const gain = ctx.createGain();
+ oscillator.type = "triangle";
+ oscillator.frequency.value = frequency;
+ gain.gain.value = gainValue;
+ oscillator.connect(gain);
+ gain.connect(ctx.destination);
+ oscillator.start();
+
+ window.setTimeout(() => {
+ oscillator.stop();
+ ctx.close();
+ }, durationMs);
+ } catch (_error) {
+ // no-op
+ }
+ };
+
+ const pulseHaptic = (ms = 10) => {
+ navigator.vibrate?.(ms);
+ };
+
+ const setStatus = (text = "", danger = false) => {
+ const status = document.querySelector("[data-status]");
+ if (!status) {
+ return;
+ }
+
+ status.textContent = text;
+ status.classList.toggle("is-danger", danger);
+ };
+
+ const updateCopy = () => {
+ const copy = document.querySelector("[data-copy]");
+ if (!copy) {
+ return;
+ }
+
+ const length = config().length;
+ if (state.passkeySetupRequired) {
+ copy.textContent = setupPhase === "confirm"
+ ? `Re-enter the same ${length}-digit passkey to confirm.`
+ : `Use Xbox passkey controls to enter your ${length}-digit passkey.`;
+ return;
+ }
+
+ if (config().requireConfirm) {
+ copy.textContent = `Use Xbox passkey controls to enter ${length} digits, then press Start.`;
+ return;
+ }
+
+ copy.textContent = `Use Xbox passkey controls to enter your ${length}-digit passkey.`;
+ };
+
+ const updateMapLabels = () => {
+ document.querySelectorAll("[data-map]").forEach((element) => {
+ const action = element.dataset.map;
+ element.textContent = state.glyphs[action] ?? action?.toUpperCase?.() ?? "";
+ });
+ };
+
+ const renderDots = (stateClass = "") => {
+ const dots = document.querySelector("[data-passkey-dots]");
+ if (!dots) {
+ return;
+ }
+
+ dots.className = `lock-dots ${stateClass}`.trim();
+ dots.innerHTML = "";
+
+ for (let index = 0; index < config().length; index += 1) {
+ const dot = document.createElement("span");
+ dot.className = "lock-dot";
+
+ if (index < digits.length) {
+ dot.classList.add("filled");
+ }
+ if (index === digits.length && digits.length < config().length) {
+ dot.classList.add("active");
+ }
+
+ dots.append(dot);
+ }
+ };
+
+ const clearDigits = () => {
+ digits = [];
+ renderDots();
+ };
+
+ const lockoutText = (remainingMs) => `Too many attempts. Retry in ${Math.ceil(remainingMs / 1000)}s.`;
+
+ const applyFailure = (text) => {
+ setStatus(text, true);
+ renderDots("is-error is-shaking");
+ playTone(220, 84, 0.05);
+
+ window.setTimeout(() => {
+ clearDigits();
+ }, FAIL_CLEAR_MS);
+ };
+
+ const applySuccess = () => {
+ const view = document.querySelector(".lock-view");
+ setStatus("", false);
+ renderDots("is-success");
+ view?.classList.add("is-success");
+ playTone(1200, 66, 0.04);
+ pulseHaptic(24);
+
+ window.setTimeout(() => {
+ state.locked = false;
+ state.activeView = "home";
+ renderView("home");
+ }, 240);
+ };
+
+ const submitDigits = async () => {
+ if (busy) {
+ return;
+ }
+
+ if (digits.length !== config().length) {
+ setStatus(`Enter ${config().length} digits.`, true);
+ return;
+ }
+
+ busy = true;
+
+ if (!config().enabled) {
+ applySuccess();
+ busy = false;
+ return;
+ }
+
+ if (state.passkeySetupRequired) {
+ if (setupPhase === "create") {
+ setupDigits = [...digits];
+ clearDigits();
+ setupPhase = "confirm";
+ updateCopy();
+ setStatus("Confirm your new passkey.");
+ busy = false;
+ return;
+ }
+
+ const same = setupDigits.length === digits.length && setupDigits.every((digit, index) => digit === digits[index]);
+ if (!same) {
+ setupPhase = "create";
+ setupDigits = [];
+ updateCopy();
+ applyFailure("Passkeys did not match. Try again.");
+ busy = false;
+ return;
+ }
+
+ await state.passkey.setSequence(setupDigits);
+ state.passkeySetupRequired = false;
+ applySuccess();
+ busy = false;
+ return;
+ }
+
+ const result = await state.passkey.verifySequence(digits);
+ if (result.ok) {
+ applySuccess();
+ busy = false;
+ return;
+ }
+
+ if (result.reason === "lockout") {
+ applyFailure(lockoutText(result.lockoutRemainingMs ?? state.passkey.getLockoutRemainingMs()));
+ busy = false;
+ return;
+ }
+
+ if (result.reason === "setup-required") {
+ state.passkeySetupRequired = true;
+ setupPhase = "create";
+ setupDigits = [];
+ updateCopy();
+ applyFailure("Passkey setup required.");
+ busy = false;
+ return;
+ }
+
+ applyFailure(`Incorrect passkey. ${result.attemptsLeft ?? 0} attempts left.`);
+ busy = false;
+ };
+
+ const pushDigit = (digit) => {
+ if (busy || state.passkey.inLockout()) {
+ if (state.passkey.inLockout()) {
+ setStatus(lockoutText(state.passkey.getLockoutRemainingMs()), true);
+ }
+ return;
+ }
+
+ const now = performance.now();
+ if (now - lastEntryAt < ENTRY_DEBOUNCE_MS) {
+ return;
+ }
+ lastEntryAt = now;
+
+ if (digits.length >= config().length) {
+ return;
+ }
+
+ digits.push(String(digit));
+ renderDots();
+ setStatus("");
+ playTone();
+ pulseHaptic(8);
+
+ if (digits.length === config().length && !config().requireConfirm) {
+ submitDigits();
+ } else if (digits.length === config().length && config().requireConfirm) {
+ setStatus("Press Start to confirm.");
+ }
+ };
+
+ const deleteLast = () => {
+ if (!digits.length || busy) {
+ return;
+ }
+ digits = digits.slice(0, -1);
+ renderDots();
+ setStatus("");
+ };
+
+ const clearAll = () => {
+ if (!digits.length || busy) {
+ return;
+ }
+ clearDigits();
+ setStatus("");
+ };
+
+ const handleNumberKey = (event) => {
+ if (!config().keyboardSupport || !state.locked) {
+ return;
+ }
+
+ const digitMatch = event.code.match(/^(Digit|Numpad)(\d)$/);
+ if (!digitMatch) {
+ return;
+ }
+
+ event.preventDefault();
+ pushDigit(digitMatch[2]);
+ };
+
+ return {
+ id: "lock",
+ render: () => LOCK_TEMPLATE,
+ mount: () => {
+ setupPhase = "create";
+ setupDigits = [];
+ clearDigits();
+ updateCopy();
+ setStatus("");
+
+ const username = document.querySelector("[data-username]");
+ if (username) {
+ username.textContent = state.profileName ?? "Nebula User";
+ }
+
+ document.documentElement.style.setProperty("--nebula-focus-strength", "1");
+ document.documentElement.dataset.animSpeed = config().animationSpeed;
+ document.documentElement.classList.toggle("high-contrast", config().highContrast);
+ updateMapLabels();
+
+ if (keyboardListener) {
+ window.removeEventListener("keydown", keyboardListener);
+ }
+ keyboardListener = handleNumberKey;
+ window.addEventListener("keydown", keyboardListener);
+ },
+ getNavigationContract: () => {
+ const root = document.querySelector("[data-focus-root]");
+ const defaultFocus = root?.querySelector("[data-digit='5']") ?? root?.querySelector("[data-digit='1']") ?? null;
+
+ return {
+ focusRoot: root,
+ defaultFocus,
+ layout: { type: "grid", cols: 3, rows: 4 },
+ hintsTemplate: "#global-hints-template",
+ nebulaNavigation: state.nebula.navigation,
+ captureDirectionalInput: true,
+ onAccept: (element) => {
+ const digit = element?.dataset.digit;
+ if (!digit) {
+ return;
+ }
+ pushDigit(digit);
+ },
+ onBack: () => {
+ deleteLast();
+ },
+ onMenu: () => {
+ if (digits.length === config().length) {
+ submitDigits();
+ }
+ return false;
+ },
+ onAction: (action) => {
+ const mappedDigit = ACTION_TO_DIGIT[action];
+ if (mappedDigit) {
+ pushDigit(mappedDigit);
+ return true;
+ }
+
+ return false;
+ },
+ };
+ },
+ };
+};
diff --git a/src/views/overlays/powerMenu.css b/src/views/overlays/powerMenu.css
new file mode 100644
index 0000000..224ff2f
--- /dev/null
+++ b/src/views/overlays/powerMenu.css
@@ -0,0 +1,34 @@
+.power-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 20;
+ display: grid;
+ place-items: center;
+ background: var(--nebula-color-overlay);
+}
+
+.power-overlay[hidden] {
+ display: none !important;
+}
+
+.power-panel {
+ width: min(520px, 92vw);
+}
+
+.power-title {
+ margin: 0 0 var(--nebula-spacing-md);
+}
+
+.power-options {
+ display: grid;
+ gap: var(--nebula-spacing-sm);
+}
+
+.power-option {
+ min-height: 62px;
+ border: none;
+ background: var(--nebula-color-panelAlt);
+ color: var(--nebula-color-text);
+ text-align: left;
+ padding: var(--nebula-spacing-md);
+}
diff --git a/src/views/overlays/powerMenu.html b/src/views/overlays/powerMenu.html
new file mode 100644
index 0000000..b13bafa
--- /dev/null
+++ b/src/views/overlays/powerMenu.html
@@ -0,0 +1,12 @@
+
diff --git a/src/views/overlays/powerMenu.js b/src/views/overlays/powerMenu.js
new file mode 100644
index 0000000..b217e96
--- /dev/null
+++ b/src/views/overlays/powerMenu.js
@@ -0,0 +1,107 @@
+const POWER_MENU_TEMPLATE = `
+
+`;
+
+const ACTION_LOG = {
+ suspend: "Suspend requested (stub)",
+ restart: "Restart requested (stub)",
+ shutdown: "Shutdown requested (stub)",
+ desktop: "Switch to Desktop requested (stub)",
+};
+
+export const createPowerMenuOverlay = ({ mountRoot }) => {
+ mountRoot.innerHTML = POWER_MENU_TEMPLATE;
+
+ const overlay = mountRoot.querySelector("[data-power-overlay]");
+ const focusables = Array.from(mountRoot.querySelectorAll("[data-focusable='true']"));
+ let focusedIndex = 0;
+ let openState = false;
+ let onClose = null;
+
+ if (overlay) {
+ overlay.hidden = true;
+ }
+
+ const focusAt = (index) => {
+ focusables.forEach((element) => {
+ element.classList.remove("is-focused");
+ element.setAttribute("aria-selected", "false");
+ });
+
+ focusedIndex = Math.max(0, Math.min(index, focusables.length - 1));
+ const target = focusables[focusedIndex];
+ target.classList.add("is-focused");
+ target.setAttribute("aria-selected", "true");
+ target.focus({ preventScroll: true });
+ };
+
+ const close = () => {
+ openState = false;
+ overlay.hidden = true;
+ onClose?.();
+ onClose = null;
+ };
+
+ const open = (options = {}) => {
+ openState = true;
+ onClose = options.onClose ?? null;
+ overlay.hidden = false;
+ focusAt(0);
+ };
+
+ const runAction = (action) => {
+ if (action === "cancel") {
+ close();
+ return;
+ }
+
+ if (ACTION_LOG[action]) {
+ console.log(`[PowerMenu] ${ACTION_LOG[action]}`);
+ close();
+ }
+ };
+
+ const handleAction = (action) => {
+ if (!openState) {
+ return;
+ }
+
+ if (action === "up") {
+ focusAt(focusedIndex - 1);
+ return;
+ }
+
+ if (action === "down") {
+ focusAt(focusedIndex + 1);
+ return;
+ }
+
+ if (action === "accept") {
+ const current = focusables[focusedIndex];
+ runAction(current?.dataset.action ?? "cancel");
+ return;
+ }
+
+ if (action === "back" || action === "menu") {
+ close();
+ }
+ };
+
+ return {
+ open,
+ close,
+ isOpen: () => openState,
+ handleAction,
+ };
+};
diff --git a/src/views/settings/settings.css b/src/views/settings/settings.css
new file mode 100644
index 0000000..6cc4074
--- /dev/null
+++ b/src/views/settings/settings.css
@@ -0,0 +1,181 @@
+.settings-view {
+ gap: var(--nebula-spacing-xl);
+}
+
+.settings-header-copy {
+ display: grid;
+ gap: var(--nebula-spacing-xs);
+ padding-left: var(--nebula-spacing-xl);
+}
+
+.settings-header-copy .muted {
+ margin: 0;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ font-size: 14px;
+ font-weight: 600;
+ opacity: 0.72;
+}
+
+.settings-header-copy .view-title {
+ font-size: clamp(32px, 3.2vw, 44px);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+}
+
+.settings-body {
+ display: grid;
+ gap: var(--nebula-spacing-lg);
+ padding: 0 var(--nebula-spacing-xl);
+}
+
+.settings-category-bar {
+ display: flex;
+ gap: 10px;
+ padding-bottom: var(--nebula-spacing-md);
+ border-bottom: 2px solid rgba(79, 216, 255, 0.15);
+ position: relative;
+}
+
+.settings-category {
+ min-height: 56px;
+ padding: 0 24px;
+ border-radius: var(--nebula-radius-sm);
+ border: none;
+ background: rgba(24, 38, 68, 0.5);
+ font-weight: 660;
+ font-size: 16px;
+ position: relative;
+ transition:
+ background-color var(--nebula-duration-nav) var(--nebula-ease-console),
+ color var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.settings-category.is-focused {
+ background: rgba(38, 58, 98, 0.7);
+}
+
+.settings-category.is-active {
+ background: rgba(50, 78, 128, 0.8);
+ color: var(--nebula-color-accent);
+}
+
+.settings-category::after {
+ content: "";
+ position: absolute;
+ left: 12px;
+ right: 12px;
+ bottom: -14px;
+ height: 3px;
+ background: linear-gradient(90deg, var(--nebula-color-accent), rgba(79, 216, 255, 0.6));
+ border-radius: 2px 2px 0 0;
+ box-shadow: 0 0 12px rgba(79, 216, 255, 0.6);
+ transform: scaleX(0);
+ transform-origin: center;
+ transition: transform var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.settings-category.is-active::after {
+ transform: scaleX(1);
+}
+
+.settings-panel {
+ display: flex;
+ flex-direction: column;
+ gap: var(--nebula-spacing-lg);
+ min-height: 440px;
+ background:
+ linear-gradient(160deg, rgba(65, 108, 189, 0.18), rgba(24, 36, 72, 0.65)),
+ radial-gradient(circle at 75% 25%, rgba(79, 216, 255, 0.08), transparent 48%),
+ var(--nebula-color-panel);
+ border-radius: var(--nebula-radius-md);
+ padding: var(--nebula-spacing-lg);
+ box-shadow:
+ 0 8px 24px rgba(2, 6, 18, 0.35),
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.settings-panel-head {
+ display: grid;
+ gap: 8px;
+ padding-bottom: var(--nebula-spacing-md);
+ border-bottom: 1px solid rgba(79, 216, 255, 0.12);
+}
+
+.settings-panel-title {
+ margin: 0;
+ font-size: 28px;
+ font-weight: 720;
+ letter-spacing: -0.01em;
+}
+
+.settings-card-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: var(--nebula-spacing-md);
+}
+
+.settings-card {
+ border: 1px solid rgba(79, 216, 255, 0.15);
+ border-radius: var(--nebula-radius-md);
+ padding: var(--nebula-spacing-lg);
+ min-height: 180px;
+ background:
+ linear-gradient(165deg, rgba(70, 108, 186, 0.28), rgba(22, 34, 68, 0.88));
+ text-align: left;
+ display: grid;
+ align-content: space-between;
+ position: relative;
+ overflow: hidden;
+ transition:
+ transform var(--nebula-duration-nav) var(--nebula-ease-console),
+ border-color var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.settings-card::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(79, 216, 255, 0.12), transparent 60%);
+ opacity: 0;
+ transition: opacity var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.settings-card.is-focused {
+ transform: scale(1.04);
+ border-color: rgba(79, 216, 255, 0.5);
+}
+
+.settings-card.is-focused::before {
+ opacity: 1;
+}
+
+.settings-card-title {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 680;
+ letter-spacing: -0.01em;
+ position: relative;
+ z-index: 1;
+}
+
+.settings-card p {
+ margin: 0;
+ position: relative;
+ z-index: 1;
+}
+
+.settings-card-info {
+ border-style: dashed;
+ opacity: 0.85;
+}
+
+.settings-card.is-disabled {
+ opacity: 0.55;
+ border-style: dashed;
+ filter: grayscale(0.15);
+}
+
+.settings-card.is-disabled.is-focused {
+ transform: none;
+}
diff --git a/src/views/settings/settings.html b/src/views/settings/settings.html
new file mode 100644
index 0000000..e36e1e0
--- /dev/null
+++ b/src/views/settings/settings.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/settings/settings.js b/src/views/settings/settings.js
new file mode 100644
index 0000000..25e4094
--- /dev/null
+++ b/src/views/settings/settings.js
@@ -0,0 +1,241 @@
+const SETTINGS_TEMPLATE = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+const CATEGORIES = {
+ network: "Network",
+ audio: "Audio",
+ display: "Display",
+ storage: "Storage",
+ system: "System",
+};
+
+export const createSettingsView = ({ state, renderView }) => {
+ const updatePasskey = (partial) => {
+ state.passkey.updateConfig(partial);
+ refreshPanel();
+ };
+
+ const refreshPanel = () => {
+ const title = document.querySelector("[data-panel-title]");
+ const copy = document.querySelector("[data-panel-copy]");
+ const passkeyEnabled = document.querySelector("[data-passkey-enabled]");
+ const passkeyLength = document.querySelector("[data-passkey-length]");
+ const passkeyConfirm = document.querySelector("[data-passkey-confirm]");
+ const passkeyKeyboard = document.querySelector("[data-passkey-keyboard]");
+ const status = document.querySelector("[data-status-note]");
+ const passkeyConfig = state.passkey.getConfig();
+
+ document.querySelectorAll(".settings-category").forEach((button) => {
+ button.classList.toggle("is-active", button.dataset.cat === state.settingsCategory);
+ });
+
+ if (title) {
+ title.textContent = CATEGORIES[state.settingsCategory] ?? "Settings";
+ }
+ if (copy) {
+ if (state.settingsCategory === "system") {
+ copy.textContent = "Configure passkey security and controller login behavior.";
+ } else {
+ copy.textContent = `Tune ${CATEGORIES[state.settingsCategory] ?? "system"} options with controller-first cards.`;
+ }
+ }
+ if (passkeyEnabled) {
+ passkeyEnabled.textContent = passkeyConfig.enabled ? "Enabled" : "Disabled";
+ }
+ if (passkeyLength) {
+ passkeyLength.textContent = `${passkeyConfig.length} digits`;
+ }
+ if (passkeyConfirm) {
+ passkeyConfirm.textContent = passkeyConfig.requireConfirm ? "Enabled" : "Disabled";
+ }
+ if (passkeyKeyboard) {
+ passkeyKeyboard.textContent = passkeyConfig.keyboardSupport ? "Enabled" : "Disabled";
+ }
+ if (status) {
+ status.textContent = state.settingsCategory === "system"
+ ? `Attempts: ${passkeyConfig.maxAttempts}, cooldown: ${passkeyConfig.cooldownSeconds}s`
+ : `${CATEGORIES[state.settingsCategory] ?? "System"} profile synced`;
+ }
+
+ document.querySelectorAll("[data-toggle^='passkey']").forEach((button) => {
+ button.classList.toggle("is-disabled", state.settingsCategory !== "system");
+ button.setAttribute("aria-disabled", state.settingsCategory === "system" ? "false" : "true");
+ });
+ };
+
+ const toggleCurrent = (suffix = "") => {
+ const key = suffix ? `${state.settingsCategory}_${suffix}` : state.settingsCategory;
+ state.settingsValues[key] = !Boolean(state.settingsValues[key]);
+ refreshPanel();
+ };
+
+ return {
+ id: "settings",
+ render: () => SETTINGS_TEMPLATE,
+ mount: () => {
+ const root = document.querySelector("[data-focus-root]");
+ root?.addEventListener("focusin", (event) => {
+ const focused = event.target.closest("[data-focusable='true']");
+ const col = Number(focused?.dataset.col ?? 0);
+ document.documentElement.style.setProperty("--nebula-accent-line-x", `${24 + col * 110}px`);
+ });
+ refreshPanel();
+ document.documentElement.style.setProperty("--nebula-focus-strength", "1");
+ },
+ getNavigationContract: () => {
+ const root = document.querySelector("[data-focus-root]");
+ return {
+ focusRoot: root,
+ defaultFocus: root?.querySelector("[data-cat='network']") ?? null,
+ layout: { type: "grid", cols: 5, rows: 2 },
+ hintsTemplate: "#global-hints-template",
+ nebulaNavigation: state.nebula.navigation,
+ onAccept: (element) => {
+ if (!element) {
+ return;
+ }
+
+ const category = element.dataset.cat;
+ const toggle = element.dataset.toggle;
+
+ if (category) {
+ state.settingsCategory = category;
+ refreshPanel();
+ return;
+ }
+
+ if (toggle === "primary") {
+ toggleCurrent();
+ return;
+ }
+
+ if (toggle === "secondary") {
+ toggleCurrent("secondary");
+ return;
+ }
+
+ if (state.settingsCategory !== "system") {
+ return;
+ }
+
+ if (toggle === "passkey-enabled") {
+ updatePasskey({ enabled: !state.passkey.getConfig().enabled });
+ return;
+ }
+
+ if (toggle === "passkey-change") {
+ state.passkeySetupRequired = true;
+ state.locked = true;
+ state.activeView = "lock";
+ renderView("lock");
+ return;
+ }
+
+ if (toggle === "passkey-length") {
+ const current = state.passkey.getConfig().length;
+ updatePasskey({ length: current >= 8 ? 4 : current + 1 });
+ return;
+ }
+
+ if (toggle === "passkey-confirm") {
+ updatePasskey({ requireConfirm: !state.passkey.getConfig().requireConfirm });
+ return;
+ }
+
+ if (toggle === "passkey-keyboard") {
+ updatePasskey({ keyboardSupport: !state.passkey.getConfig().keyboardSupport });
+ }
+ },
+ onBack: () => {
+ state.activeView = "home";
+ renderView("home");
+ },
+ onMenu: () => {},
+ onAction: (action, element) => {
+ if (state.settingsCategory !== "system") {
+ return false;
+ }
+
+ if (element?.dataset.toggle !== "passkey-length") {
+ return false;
+ }
+
+ if (action === "l1") {
+ const next = state.passkey.getConfig().length - 1;
+ updatePasskey({ length: next < 4 ? 8 : next });
+ return true;
+ }
+
+ if (action === "r1") {
+ const next = state.passkey.getConfig().length + 1;
+ updatePasskey({ length: next > 8 ? 4 : next });
+ return true;
+ }
+
+ return false;
+ },
+ };
+ },
+ };
+};
-
-
-
-
+
+
+ Select
+ Back
+ Menu
- Click on the Tauri logo to learn more about the framework
+ - - - + +
+ Open
+ Power Menu
+
+
diff --git a/src/main.js b/src/main.js
index 55d5f93..a257e09 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,155 @@
-const { invoke } = window.__TAURI__.core;
+import { createInputManager } from "./core/input.js";
+import { createNavigationManager } from "./core/nav.js";
+import { createRouter } from "./core/router.js";
+import { createAppState } from "./core/state.js";
+import { createHomeView } from "./views/home/home.js";
+import { createLibraryView } from "./views/library/library.js";
+import { createLockView } from "./views/lock/lock.js";
+import { createPowerMenuOverlay } from "./views/overlays/powerMenu.js";
+import { createSettingsView } from "./views/settings/settings.js";
-let greetInputEl;
-let greetMsgEl;
+const appRoot = document.querySelector("#app");
+const overlayRoot = document.querySelector("#overlay-root");
+const footer = document.querySelector("#app-footer");
-async function greet() {
- // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
- greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
-}
+const state = createAppState();
+const nav = createNavigationManager();
+const router = createRouter(appRoot);
+const powerMenu = createPowerMenuOverlay({ mountRoot: overlayRoot, state });
-window.addEventListener("DOMContentLoaded", () => {
- greetInputEl = document.querySelector("#greet-input");
- greetMsgEl = document.querySelector("#greet-msg");
- document.querySelector("#greet-form").addEventListener("submit", (e) => {
- e.preventDefault();
- greet();
+let currentViewContract = null;
+
+const emitUiHook = (type, payload = {}) => {
+ window.dispatchEvent(
+ new CustomEvent("nebula-ui-hook", {
+ detail: { type, ...payload },
+ }),
+ );
+};
+
+const setFooterHints = (templateId, glyphs) => {
+ const template = document.querySelector(templateId);
+ if (!template) {
+ footer.innerHTML = "";
+ return;
+ }
+ footer.innerHTML = template.innerHTML;
+ footer.querySelectorAll("[data-glyph]").forEach((element) => {
+ const action = element.dataset.glyph;
+ element.textContent = glyphs[action] ?? action;
});
-});
+};
+
+const updateClockLabels = () => {
+ const now = new Date();
+ const formattedTime = now.toLocaleTimeString([], {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+ const formattedDate = now.toLocaleDateString([], {
+ weekday: "short",
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+ document.querySelectorAll("[data-clock]").forEach((clock) => {
+ clock.textContent = formattedTime;
+ });
+ document.querySelectorAll("[data-date]").forEach((date) => {
+ date.textContent = formattedDate;
+ });
+};
+
+const renderView = (viewId) => {
+ const contract = router.navigate(viewId);
+ currentViewContract = contract;
+ if (!contract) {
+ return;
+ }
+ nav.mount(contract);
+ setFooterHints(contract.hintsTemplate ?? "#global-hints-template", state.glyphs);
+ updateClockLabels();
+};
+
+const registerViews = () => {
+ const context = { state, renderView, powerMenu, openPowerMenu };
+ router.register(createLockView(context));
+ router.register(createHomeView(context));
+ router.register(createSettingsView(context));
+ router.register(createLibraryView(context));
+};
+
+const openPowerMenu = () => {
+ powerMenu.open({
+ onClose: () => {
+ nav.mount(currentViewContract);
+ setFooterHints(currentViewContract?.hintsTemplate ?? "#global-hints-template", state.glyphs);
+ },
+ });
+};
+
+const handleAction = (action) => {
+ if (powerMenu.isOpen()) {
+ powerMenu.handleAction(action);
+ return;
+ }
+
+ if (!currentViewContract) {
+ return;
+ }
+
+ if (action === "menu") {
+ const handled = currentViewContract.onMenu?.();
+ if (handled !== false) {
+ openPowerMenu();
+ }
+ return;
+ }
+
+ if (action === "up" || action === "down" || action === "left" || action === "right") {
+ if (currentViewContract.captureDirectionalInput) {
+ const handled = currentViewContract.onAction?.(action, nav.getFocusedElement());
+ if (handled) {
+ return;
+ }
+ }
+
+ nav.move(action);
+ emitUiHook("move", { action });
+ return;
+ }
+
+ if (action === "accept") {
+ const focused = nav.getFocusedElement();
+ focused?.classList.add("is-pressed");
+ window.setTimeout(() => focused?.classList.remove("is-pressed"), 180);
+ emitUiHook("accept", { focusKey: focused?.dataset.focusKey ?? null });
+ currentViewContract.onAccept?.(focused);
+ return;
+ }
+
+ if (action === "back") {
+ emitUiHook("back");
+ currentViewContract.onBack?.();
+ return;
+ }
+
+ currentViewContract.onAction?.(action, nav.getFocusedElement());
+};
+
+const initialize = async () => {
+ await state.initializeNebulaCore();
+ registerViews();
+ renderView("lock");
+ updateClockLabels();
+ window.setInterval(updateClockLabels, 1000);
+
+ const input = createInputManager({
+ onAction: handleAction,
+ actions: ["up", "down", "left", "right", "accept", "back", "menu", "clear", "y", "l1", "r1", "l2", "r2"],
+ });
+
+ input.start();
+};
+
+initialize();
diff --git a/src/styles/base.css b/src/styles/base.css
new file mode 100644
index 0000000..e51a092
--- /dev/null
+++ b/src/styles/base.css
@@ -0,0 +1,262 @@
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: var(--nebula-color-bg);
+ color: var(--nebula-color-text);
+ font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+body {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ overflow: hidden;
+ position: relative;
+ isolation: isolate;
+}
+
+#nebula-background {
+ position: fixed;
+ inset: 0;
+ z-index: -2;
+ overflow: hidden;
+ transform: translate3d(var(--bg-parallax-x, 0px), 0, 0);
+ transition: transform var(--nebula-duration-slow) var(--nebula-ease-standard);
+}
+
+.nebula-layer {
+ position: absolute;
+ inset: -6%;
+ will-change: transform, opacity, filter;
+}
+
+.nebula-layer.gradient {
+ background:
+ radial-gradient(circle at 16% 12%, rgba(82, 116, 218, 0.26), transparent 48%),
+ radial-gradient(circle at 82% 76%, rgba(147, 79, 188, 0.22), transparent 46%),
+ radial-gradient(circle at 48% 88%, rgba(79, 216, 255, 0.14), transparent 38%),
+ linear-gradient(135deg, #050a17 0%, #090f28 24%, #0d1435 48%, #1a1542 78%, #23173c 100%);
+ animation: nebulaGradientDrift 28s var(--nebula-ease-standard) infinite alternate;
+}
+
+.nebula-layer.starfield {
+ background-image:
+ radial-gradient(circle, rgba(255, 255, 255, 0.9) 0.8px, transparent 1.6px),
+ radial-gradient(circle, rgba(79, 216, 255, 0.6) 0.6px, transparent 1.4px),
+ radial-gradient(circle, rgba(147, 79, 188, 0.5) 1px, transparent 1.8px);
+ background-size: 180px 180px, 260px 260px, 320px 320px;
+ background-position: 0 0, 140px 110px, 60px 180px;
+ opacity: 0.24;
+ animation: starfieldShift 45s linear infinite;
+}
+
+.nebula-layer.fog {
+ background:
+ radial-gradient(ellipse at 28% 72%, rgba(82, 182, 255, 0.22), transparent 52%),
+ radial-gradient(ellipse at 72% 28%, rgba(147, 77, 203, 0.22), transparent 48%),
+ radial-gradient(ellipse at 45% 50%, rgba(79, 216, 255, 0.16), transparent 46%);
+ filter: blur(52px);
+ opacity: 0.76;
+ animation: fogDrift 34s var(--nebula-ease-standard) infinite alternate;
+}
+
+.nebula-layer.vignette {
+ background: radial-gradient(circle at center, transparent 45%, rgba(2, 6, 20, 0.55) 100%);
+ inset: 0;
+}
+
+.shell-chrome {
+ position: fixed;
+ inset: 0;
+ z-index: 0;
+ pointer-events: none;
+}
+
+.shell-depth-blur {
+ position: absolute;
+ inset: 80px 40px 120px;
+ backdrop-filter: blur(calc(8px + var(--nebula-focus-strength, 0) * 6px));
+ opacity: calc(0.22 + var(--nebula-focus-strength, 0) * 0.35);
+ border-radius: 32px;
+ transition:
+ opacity var(--nebula-duration-nav) var(--nebula-ease-console),
+ backdrop-filter var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.app-shell {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ padding: 24px var(--nebula-spacing-xl) 0;
+ overflow: hidden;
+}
+
+.view {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: var(--nebula-spacing-lg);
+ opacity: 0;
+ transform: translateX(32px);
+}
+
+.view.view-entered {
+ opacity: 1;
+ transform: translateX(0);
+ transition:
+ transform var(--nebula-duration-slow) var(--nebula-ease-console),
+ opacity var(--nebula-duration-nav) var(--nebula-ease-standard);
+}
+
+.view-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.shell-topbar {
+ display: flex;
+ flex-direction: column;
+ min-height: 64px;
+ padding-bottom: var(--nebula-spacing-sm);
+ position: relative;
+}
+
+.shell-topbar-content {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.shell-brand {
+ margin: 0;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ font-size: 15px;
+ font-weight: 680;
+ color: color-mix(in srgb, var(--nebula-color-text) 92%, var(--nebula-color-accent));
+ text-shadow: 0 0 24px rgba(79, 216, 255, 0.38), 0 0 6px rgba(79, 216, 255, 0.2);
+}
+
+.shell-status {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--nebula-spacing-md);
+}
+
+.shell-time {
+ letter-spacing: 0.05em;
+ font-size: 16px;
+ font-weight: 560;
+ color: color-mix(in srgb, var(--nebula-color-text) 90%, var(--nebula-color-muted));
+}
+
+.shell-avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: var(--nebula-radius-pill);
+ border: 2px solid rgba(79, 216, 255, 0.4);
+ background:
+ radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.85), transparent 46%),
+ linear-gradient(145deg, rgba(108, 180, 255, 0.7), rgba(75, 81, 155, 0.6));
+ box-shadow:
+ 0 0 12px rgba(79, 216, 255, 0.25),
+ 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.shell-accent-line {
+ position: absolute;
+ inset: auto 0 0;
+ height: 3px;
+ overflow: hidden;
+ background: linear-gradient(90deg,
+ transparent,
+ rgba(79, 216, 255, 0.12) 25%,
+ rgba(79, 216, 255, 0.08) 75%,
+ transparent
+ );
+}
+
+.shell-accent-line::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: clamp(120px, 14vw, 200px);
+ height: 100%;
+ background: linear-gradient(90deg,
+ transparent,
+ rgba(79, 216, 255, 0.6) 30%,
+ var(--nebula-color-accent) 50%,
+ rgba(79, 216, 255, 0.6) 70%,
+ transparent
+ );
+ box-shadow: 0 0 16px rgba(79, 216, 255, 0.5);
+ transform: translateX(var(--nebula-accent-line-x, 0px));
+ transition: transform var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.view-title {
+ margin: 0;
+ font-size: var(--nebula-type-display);
+ line-height: 1.15;
+ letter-spacing: 0.01em;
+}
+
+.muted {
+ color: var(--nebula-color-muted);
+}
+
+.app-footer {
+ min-height: 56px;
+ padding: 0 var(--nebula-spacing-xl) var(--nebula-spacing-md);
+}
+
+.hint-row {
+ display: flex;
+ align-items: center;
+ gap: var(--nebula-spacing-lg);
+ color: var(--nebula-color-muted);
+}
+
+.hint {
+ display: inline-flex;
+ gap: var(--nebula-spacing-xs);
+ align-items: center;
+ font-size: 15px;
+}
+
+@keyframes nebulaGradientDrift {
+ 0% {
+ transform: translate3d(-2%, -1.5%, 0) scale(1.03) rotate(0deg);
+ }
+ 100% {
+ transform: translate3d(1.5%, 2%, 0) scale(1.05) rotate(0.5deg);
+ }
+}
+
+@keyframes starfieldShift {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ transform: translate3d(-140px, -110px, 0);
+ }
+}
+
+@keyframes fogDrift {
+ 0% {
+ transform: translate3d(-2%, 1.2%, 0) scale(1.02);
+ }
+ 100% {
+ transform: translate3d(2.2%, -1.4%, 0) scale(1.04);
+ }
+}
diff --git a/src/styles/components.css b/src/styles/components.css
new file mode 100644
index 0000000..bba1a32
--- /dev/null
+++ b/src/styles/components.css
@@ -0,0 +1,164 @@
+.panel {
+ background: var(--nebula-color-panel);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: var(--nebula-radius-md);
+ padding: var(--nebula-spacing-lg);
+ box-shadow: var(--nebula-depth-shadow);
+ backdrop-filter: blur(12px);
+}
+
+.focusable {
+ border: 1px solid transparent;
+ border-radius: var(--nebula-radius-md);
+ outline: none;
+ position: relative;
+ overflow: hidden;
+ will-change: transform, box-shadow, border-color;
+ transform: translateZ(0);
+ transition:
+ transform var(--nebula-duration-nav) var(--nebula-ease-console),
+ border-color var(--nebula-duration-nav) var(--nebula-ease-console),
+ box-shadow var(--nebula-duration-nav) var(--nebula-ease-console),
+ background-color var(--nebula-duration-nav) var(--nebula-ease-standard);
+}
+
+.focusable.is-focused {
+ border-color: rgba(79, 216, 255, 0.5);
+ box-shadow:
+ 0 0 0 2px color-mix(in srgb, var(--nebula-color-focus) 45%, transparent),
+ 0 0 28px color-mix(in srgb, var(--nebula-color-focus) 35%, transparent),
+ 0 4px 16px rgba(2, 6, 18, 0.3),
+ var(--nebula-depth-shadow-focus);
+}
+
+.focusable::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: inherit;
+ background: radial-gradient(
+ circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
+ rgba(79, 216, 255, 0.28),
+ rgba(79, 216, 255, 0.12) 40%,
+ transparent 65%
+ );
+ opacity: 0;
+ transform: scale(0.75);
+ transition:
+ opacity var(--nebula-duration-nav) var(--nebula-ease-console),
+ transform var(--nebula-duration-slow) var(--nebula-ease-console);
+ pointer-events: none;
+}
+
+.focusable.is-focused::before {
+ opacity: 1;
+ transform: scale(1.12);
+}
+
+.focusable.is-pressed {
+ animation: uiPressPulse var(--nebula-duration-fast) var(--nebula-ease-snap);
+}
+
+.tile {
+ min-height: 188px;
+ min-width: 320px;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ gap: var(--nebula-spacing-xs);
+ background:
+ linear-gradient(160deg, rgba(65, 108, 189, 0.32), rgba(24, 36, 72, 0.90)),
+ radial-gradient(circle at 75% 25%, rgba(79, 216, 255, 0.12), transparent 48%),
+ var(--nebula-color-panelAlt);
+ color: var(--nebula-color-text);
+ border-radius: var(--nebula-radius-md);
+ padding: var(--nebula-spacing-lg);
+ transform-origin: center;
+ box-shadow:
+ 0 8px 24px rgba(2, 6, 18, 0.35),
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
+ position: relative;
+ overflow: hidden;
+}
+
+.tile::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(79, 216, 255, 0.08), transparent 60%);
+ opacity: 0;
+ transition: opacity var(--nebula-duration-nav) var(--nebula-ease-console);
+ pointer-events: none;
+}
+
+.tile.is-focused::after {
+ opacity: 1;
+}
+
+.tile-icon {
+ font-size: 42px;
+ line-height: 1;
+ opacity: 0.94;
+ filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.32));
+ transition: transform var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.tile.is-focused .tile-icon {
+ transform: scale(1.08) translateY(-2px);
+}
+
+.tile-label {
+ margin: 0;
+ font-size: clamp(22px, 2vw, 28px);
+ font-weight: 720;
+ letter-spacing: -0.01em;
+ z-index: 1;
+ transition: transform var(--nebula-duration-fast) var(--nebula-ease-console);
+}
+
+.tile.is-focused .tile-label {
+ transform: translateX(3px);
+}
+
+.tile-meta {
+ margin: 0;
+ font-size: 15px;
+ color: var(--nebula-color-muted);
+ z-index: 1;
+ opacity: 0.88;
+ transition:
+ transform var(--nebula-duration-fast) var(--nebula-ease-console),
+ opacity var(--nebula-duration-fast) var(--nebula-ease-console);
+}
+
+.tile.is-focused .tile-meta {
+ transform: translateX(3px);
+ opacity: 1;
+}
+
+.tile.is-focused {
+ transform: scale(1.06) translateZ(0);
+ box-shadow:
+ 0 16px 40px rgba(2, 6, 18, 0.5),
+ 0 0 0 2px rgba(79, 216, 255, 0.15),
+ inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+.button-like {
+ background: var(--nebula-color-panelAlt);
+ color: var(--nebula-color-text);
+ padding: var(--nebula-spacing-md) var(--nebula-spacing-lg);
+ border-radius: var(--nebula-radius-sm);
+}
+
+@keyframes uiPressPulse {
+ 0% {
+ transform: scale(1);
+ }
+ 40% {
+ transform: scale(0.96);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
diff --git a/src/styles/shell-guidelines.md b/src/styles/shell-guidelines.md
new file mode 100644
index 0000000..384ac58
--- /dev/null
+++ b/src/styles/shell-guidelines.md
@@ -0,0 +1,53 @@
+# Nebula Shell UI Guidelines (Dashboard Refresh)
+
+## Layout Structure
+- Home uses a left-aligned horizontal tile rail (`.tile-rail`) with one primary row of large app tiles.
+- Top bar is shared across shell views with brand left and time/profile right.
+- Settings uses a horizontal category bar at top and card panel content below.
+- Lock screen keeps immersive centered time/date and reveals PIN panel on first input.
+
+## Animation Guidelines
+- Use cubic-bezier curves only:
+ - `--nebula-ease-console`: focus travel and panel transitions.
+ - `--nebula-ease-standard`: opacity and ambient motion.
+ - `--nebula-ease-snap`: press pulse feedback.
+- Focus transitions target `120ms–180ms` (`--nebula-duration-fast` / `--nebula-duration-nav`).
+- Use transform/opacity for movement and avoid layout-triggering transitions.
+- Page changes use `.view` to `.view-entered` slide-in transitions.
+- Press feedback uses `.is-pressed` and `uiPressPulse` keyframes.
+
+## Component Breakdown
+
+### TopBar
+- Class roots: `.shell-topbar`, `.shell-brand`, `.shell-status`, `.shell-time`, `.shell-avatar`, `.shell-accent-line`.
+- Purpose: persistent identity + status + navigation-reactive accent line.
+- Reactive token: `--nebula-accent-line-x` updates from focus manager.
+
+### TileRow
+- Class root: `.tile-rail`.
+- Purpose: horizontal app rail with controller-first left/right travel and smooth scroll.
+- Behavior: focus auto-centers via `scrollTo` and updates parallax variables.
+
+### Tile
+- Class roots: `.tile`, `.dashboard-tile`, `.tile-icon`, `.tile-label`, `.tile-meta`.
+- Focus state: `.is-focused` scales tile and adds cyan glow outline.
+- Press state: `.is-pressed` triggers pulse animation and hook events.
+
+### BackgroundLayer
+- DOM root: `#nebula-background` with `.nebula-layer` children (`gradient`, `starfield`, `fog`, `vignette`).
+- Purpose: animated nebula depth stack with subtle star motion and fog drift.
+- Parallax token: `--bg-parallax-x` supports focus-driven depth shift.
+
+### FocusManager
+- Implementation root: `src/core/nav.js`.
+- Responsibilities:
+ - Maintain focused element and directional navigation.
+ - Apply `.is-focused` state and `aria-selected`.
+ - Publish focus telemetry events (`nebula-focus-change`).
+ - Update CSS vars (`--nebula-accent-line-x`, `--nebula-focus-strength`).
+
+## UI Hook Contract (No Audio Implementation)
+- `window` `CustomEvent("nebula-ui-hook")` details:
+ - `type: "focus" | "move" | "accept" | "back"`
+ - Optional metadata (`target`, `action`, `focusKey`)
+- Intended use: external UI audio/haptics bridge without coupling shell visuals to playback.
diff --git a/src/styles/theme.css b/src/styles/theme.css
new file mode 100644
index 0000000..d2c98c5
--- /dev/null
+++ b/src/styles/theme.css
@@ -0,0 +1,41 @@
+:root {
+ --nebula-color-bg: #050a17;
+ --nebula-color-bg-deep: #0a1028;
+ --nebula-color-bg-purple: #1a1342;
+ --nebula-color-panel: rgba(18, 30, 58, 0.75);
+ --nebula-color-panelAlt: rgba(26, 43, 82, 0.88);
+ --nebula-color-text: #f2f7ff;
+ --nebula-color-muted: #a8bdd8;
+ --nebula-color-accent: #4fd8ff;
+ --nebula-color-accent-soft: rgba(79, 216, 255, 0.4);
+ --nebula-color-danger: #ff6b88;
+ --nebula-color-success: #7dff9e;
+ --nebula-color-focus: #4fd8ff;
+ --nebula-color-overlay: rgba(5, 8, 20, 0.82);
+
+ --nebula-spacing-xs: 6px;
+ --nebula-spacing-sm: 10px;
+ --nebula-spacing-md: 16px;
+ --nebula-spacing-lg: 24px;
+ --nebula-spacing-xl: 36px;
+
+ --nebula-radius-sm: 10px;
+ --nebula-radius-md: 14px;
+ --nebula-radius-lg: 20px;
+ --nebula-radius-pill: 999px;
+
+ --nebula-type-body: 18px;
+ --nebula-type-title: 24px;
+ --nebula-type-display: 34px;
+
+ --nebula-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
+ --nebula-ease-console: cubic-bezier(0.19, 0.82, 0.18, 1);
+ --nebula-ease-snap: cubic-bezier(0.32, 0.94, 0.18, 1);
+
+ --nebula-duration-fast: 120ms;
+ --nebula-duration-nav: 180ms;
+ --nebula-duration-slow: 340ms;
+
+ --nebula-depth-shadow: 0 12px 32px rgba(2, 6, 20, 0.48);
+ --nebula-depth-shadow-focus: 0 20px 48px rgba(2, 12, 38, 0.62), 0 8px 16px rgba(2, 6, 20, 0.3);
+}
diff --git a/src/views/home/home.css b/src/views/home/home.css
new file mode 100644
index 0000000..1597ce8
--- /dev/null
+++ b/src/views/home/home.css
@@ -0,0 +1,90 @@
+.home-view {
+ justify-content: flex-start;
+ gap: var(--nebula-spacing-xl);
+ padding-left: 0;
+}
+
+.home-hero {
+ display: grid;
+ gap: var(--nebula-spacing-xs);
+ padding-left: var(--nebula-spacing-xl);
+}
+
+.home-hero .muted {
+ margin: 0;
+ text-transform: uppercase;
+ letter-spacing: 0.14em;
+ font-size: 14px;
+ font-weight: 600;
+ opacity: 0.72;
+}
+
+.home-hero .view-title {
+ font-size: clamp(32px, 3.2vw, 44px);
+ font-weight: 700;
+ letter-spacing: -0.02em;
+}
+
+.tile-rail {
+ display: flex;
+ gap: var(--nebula-spacing-lg);
+ overflow-x: auto;
+ overflow-y: hidden;
+ padding: 10px var(--nebula-spacing-xl) 18px;
+ scroll-behavior: smooth;
+ scrollbar-width: none;
+ transform: translate3d(var(--home-parallax-x, 0px), 0, 0);
+ transition: transform var(--nebula-duration-slow) var(--nebula-ease-console);
+}
+
+.tile-rail::-webkit-scrollbar {
+ display: none;
+}
+
+.dashboard-tile {
+ flex: 0 0 clamp(280px, 22vw, 340px);
+ min-height: clamp(200px, 18vh, 240px);
+ position: relative;
+ overflow: visible;
+}
+
+.dashboard-tile.tile-large {
+ flex: 0 0 clamp(360px, 28vw, 440px);
+ min-height: clamp(240px, 22vh, 300px);
+}
+
+.tile-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ gap: var(--nebula-spacing-md);
+ position: relative;
+ z-index: 2;
+}
+
+.tile-text {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.tile-accent-bar {
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, var(--nebula-color-accent), transparent);
+ opacity: 0;
+ transform: scaleX(0);
+ transform-origin: left center;
+ transition:
+ opacity var(--nebula-duration-nav) var(--nebula-ease-console),
+ transform var(--nebula-duration-nav) var(--nebula-ease-console);
+}
+
+.dashboard-tile.is-focused .tile-accent-bar {
+ opacity: 1;
+ transform: scaleX(1);
+}
diff --git a/src/views/home/home.html b/src/views/home/home.html
new file mode 100644
index 0000000..ad2deec
--- /dev/null
+++ b/src/views/home/home.html
@@ -0,0 +1,60 @@
+Dashboard
+Jump back in
+Dashboard
+Jump back in
+
+
+ Nebula App
+Library
+Library integration stub for v0 shell navigation.
+
+
+ Nebula App
+Library
+Library integration stub for v0 shell navigation.
+--:--
+-- --- ----
+Press any key to unlock
+Enter Security PIN
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Default v0 PIN: 1234
+ +
+
+
+ Nebula User
+Enter your passkey
+Using your controller, enter your 6-digit passkey.
+ + +System
+Settings
+System
+Settings
+
+
+ Network
+Optimize connection and online routing.
+
+
+
+
+
+
+
+
+
+ Status
+Applying Nebula profile
+