add Panic three-step flow, DESTROY_VAULT handler, Settings danger zone, panic CSS

@@ -0,0 +1,146 @@1+import { createSignal, Show, Switch, Match } from "solid-js";2+import { sendMessage } from "../App";3+4+interface PanicProps {5+  onCancel: () => void;6+  onOpenExport: () => void;7+  onDestroyed: () => void | Promise<void>;8+}9+10+export function PanicView(props: PanicProps) {11+  const [step, setStep] = createSignal<1 | 2 | 3>(1);12+  const [confirmText, setConfirmText] = createSignal("");13+  const [destroying, setDestroying] = createSignal(false);14+15+  const canDestroy = () => confirmText() === "DESTROY";16+17+  async function handleDestroy() {18+    if (destroying()) return;19+    setDestroying(true);20+    const res = await sendMessage({ type: "DESTROY_VAULT" });21+    if (!res?.ok) {22+      setDestroying(false);23+      return;24+    }25+    await props.onDestroyed();26+  }27+28+  return (29+    <Switch>30+      <Match when={step() === 1}>31+        <div class="peach-panic">32+          <h2 class="peach-panic-title">Before you destroy your vault</h2>33+          <p class="peach-panic-body">34+            Once destroyed, your vault cannot be recovered. Ever. There is no35+            undo, no support ticket, no way back.36+          </p>37+          <p class="peach-panic-body">38+            If you haven't already, export your vault now. It takes ten seconds39+            and you'll be glad you did.40+          </p>41+          <button42+            class="peach-panic-button peach-panic-button--primary"43+            onClick={() => props.onOpenExport()}44+          >45+            Export my vault first46+          </button>47+          <div class="peach-panic-divider"></div>48+          <p class="peach-panic-body">49+            I have already exported my vault or I don't want to.50+          </p>51+          <button class="peach-panic-link" onClick={() => setStep(2)}>52+            Continue to destruction →53+          </button>54+          <div class="peach-panic-actions">55+            <button56+              class="peach-panic-button peach-panic-button--ghost"57+              onClick={() => props.onCancel()}58+            >59+              Back to settings60+            </button>61+          </div>62+        </div>63+      </Match>64+65+      <Match when={step() === 2}>66+        <div class="peach-panic peach-panic-step2">67+          <span class="peach-panic-icon" aria-hidden="true">⚠</span>68+          <h2 class="peach-panic-title peach-panic-title--severe">69+            This will permanently destroy your vault.70+          </h2>71+          <p class="peach-panic-body peach-panic-body--severe">72+            Every password, card, passkey, note, and setting will be wiped from73+            this device. This cannot be undone.74+          </p>75+          <p class="peach-panic-confirm-label">Type DESTROY to confirm:</p>76+          <input77+            class="peach-panic-confirm-input"78+            classList={{ "peach-panic-confirm-input--match": canDestroy() }}79+            type="text"80+            value={confirmText()}81+            onInput={(e) => setConfirmText(e.currentTarget.value)}82+            autocomplete="off"83+            spellcheck={false}84+            autocapitalize="off"85+            aria-label="Type DESTROY to confirm"86+          />87+          <div class="peach-panic-actions">88+            <button89+              class="peach-panic-button peach-panic-button--danger"90+              disabled={!canDestroy()}91+              onClick={() => setStep(3)}92+            >93+              Yes, destroy my vault94+            </button>95+            <button96+              class="peach-panic-button peach-panic-button--ghost"97+              onClick={() => {98+                setConfirmText("");99+                props.onCancel();100+              }}101+            >102+              Cancel — keep my vault103+            </button>104+          </div>105+        </div>106+      </Match>107+108+      <Match when={step() === 3}>109+        <div class="peach-panic peach-panic-step3">110+          <div class="peach-panic-bar">THIS IS YOUR LAST CHANCE</div>111+          <p class="peach-panic-body peach-panic-body--final-intro">112+            Your vault is about to be permanently destroyed.113+          </p>114+          <p class="peach-panic-body peach-panic-body--final">115+            There is no recovery.116+            <br />117+            There is no support.118+            <br />119+            There is no undo.120+          </p>121+          <div class="peach-panic-divider"></div>122+          <div class="peach-panic-actions">123+            <button124+              class="peach-panic-final-button"125+              disabled={destroying()}126+              onClick={() => void handleDestroy()}127+            >128+              {destroying() ? "Destroying…" : "Destroy my vault forever"}129+            </button>130+            <Show when={!destroying()}>131+              <button132+                class="peach-panic-button peach-panic-button--ghost"133+                onClick={() => {134+                  setConfirmText("");135+                  setStep(1);136+                }}137+              >138+                No — take me back139+              </button>140+            </Show>141+          </div>142+        </div>143+      </Match>144+    </Switch>145+  );146+}