From aeab334bdfb3d2c594ef70974a9c37c9c7d65925 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 20 Jun 2026 11:16:00 +0000
Subject: [PATCH] Replace Memo demo with a URL-payload WebApp Shell
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Guts the notes app and turns the project into an offline-first shell that
renders self-contained HTML encoded into the URL — a successor to opening
data:text/html;base64 URLs from iOS Shortcuts, but on a real, persistent
origin.

- index.html: reads base64url HTML from the URL hash (#app= / gzip #appz=),
  decodes it (optional gzip via Compression Streams), and renders it
  full-screen in an iframe. When no payload is present, shows a builder UI
  to paste HTML and generate/copy/open a launch link. Auto-injects
  apple-mobile-web-app-capable + viewport metas. Includes a persistent-
  storage demo app.
- Hash carries the payload so it never hits the server (no length/routing
  limits) and the service worker always matches the cached shell -> any
  generated link works fully offline after first load.
- sw.js: precache shell, cache-first with ignoreSearch + navigation
  fallback so /webapp-shell/#... and ?... resolve offline; cross-origin
  requests pass through to the network.
- manifest: renamed to WebApp Shell, dark theme.
- icons: new code-bracket </> glyph (svg + regenerated pngs).
- README: usage, Shortcuts/Home Screen steps, webapp:// explanation,
  offline + security notes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RTeJvsfW1JMs5fbP7AMYEz
---
 README.md            |  77 ++++
 icon-192.png         | Bin 861 -> 1019 bytes
 icon-512.png         | Bin 3824 -> 3601 bytes
 icon.svg             |  10 +-
 index.html           | 964 +++++++++++++++----------------------------
 manifest.webmanifest |  15 +-
 sw.js                |  53 ++-
 7 files changed, 475 insertions(+), 644 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a0d4207
--- /dev/null
+++ b/README.md
@@ -0,0 +1,77 @@
+# WebApp Shell
+
+A tiny, offline-first **PWA shell** that renders self-contained HTML pages encoded
+directly into the URL. It's a successor to opening `data:text/html;base64,…` URLs
+from iOS Shortcuts — but on a real, persistent origin.
+
+**Live:** https://appshr.github.io/webapp-shell/
+
+## What it does
+
+1. Open the shell. Paste a self-contained HTML page into the builder.
+2. It encodes your HTML (base64url, optionally gzip-compressed) into a link like:
+   ```
+   https://appshr.github.io/webapp-shell/#app=<base64url>
+   https://appshr.github.io/webapp-shell/#appz=<gzip+base64url>
+   ```
+3. Opening that link renders your page full-screen inside the shell.
+
+## Why it beats raw `data:` URLs
+
+| | `data:` URL | WebApp Shell |
+|---|---|---|
+| Runs offline | yes | yes (service worker) |
+| Persistent `localStorage` / `IndexedDB` | ❌ opaque origin | ✅ real origin, survives launches |
+| Add to Home Screen (full-screen) | ❌ | ✅ |
+| Stable, shareable URL | ❌ | ✅ |
+
+## The payload lives in the URL **hash** (`#`), on purpose
+
+- The hash is **never sent to GitHub's servers**, so there are no URL-length or
+  routing limits, and the service worker always matches the cached shell —
+  meaning **any generated link works fully offline** after the first load.
+- Encoding is **base64url** (`-`/`_`, no padding) so it's URL-safe everywhere.
+- With gzip (Safari 16.4+) the link stays much shorter.
+
+## Using it from Shortcuts
+
+1. Generate a link in the builder and **Copy** it.
+2. Add an **“Open URLs”** action in Shortcuts and paste the link.
+3. Running the shortcut opens your app in Safari — offline, with its data intact.
+
+> Shortcuts opens URLs in Safari (with its minimal toolbar). iOS does **not**
+> allow Shortcuts to launch directly into a chrome-free standalone window — that's
+> an OS limitation, not something a web page can change.
+
+## True full-screen (no Safari chrome)
+
+1. Open your app link, then in Safari tap **Share → Add to Home Screen → Add**.
+2. The icon launches your app full-screen, offline, with its own storage.
+
+The shell auto-injects `apple-mobile-web-app-capable` and a `viewport` meta if your
+page is missing them, so any pasted page becomes full-screen-capable.
+
+## Why not `webapp://`?
+
+Custom URL schemes can only be claimed by **native** apps on iOS (via Info.plist).
+A web page / PWA cannot register `webapp://`, so it can never be launched that way.
+The `https://` links this tool generates do everything that scheme was meant to do.
+
+## Offline guarantee
+
+The first online load caches the shell permanently via a service worker. After that
+the shell and every link work with no network. Your app only needs the internet if
+**its own code** fetches something external — keep pages self-contained to stay 100% offline.
+
+## ⚠️ Security note
+
+Anything you load runs on the `appshr.github.io` origin with full access to its
+storage. Only open links you created or trust: a malicious page could read or wipe
+the data of your other shell apps.
+
+## Files
+
+- `index.html` — the shell (renderer + builder UI)
+- `sw.js` — service worker (offline cache)
+- `manifest.webmanifest` — PWA manifest
+- `icon.svg`, `icon-192.png`, `icon-512.png` — icons
diff --git a/icon-192.png b/icon-192.png
index bc5d3a7fc7a65b04541aa3aac4858b26996f1ee4..c07c78842d3d73f22e9338f9d5b5c6c0c795b9af 100644
GIT binary patch
literal 1019
zcma)4ZA@EL7=G{VU3;xyZ$&e@&Gqt;fXiGMFl9K~%a^PyQbP6v6EknZ@XtQHMiD5b
zw=|g*fk85mX&6Ok#y%ntKSHzN*230d(M)FI=2p_`4eC0CmXEgJE%mhgH|EXrKF@Q`
zdrtD6^R`u0mM6=%$pIi)cd)b?u_F#rigLB*xC}rtp(`yq-1y+{S>4GUx@WdHYaV;9
zzVyV2Z-0E=WLF02zs|5J_Z{v1<-z=)cf2<Bxra-&^YZhYvv<-rv8&BlcKB&a`-R=a
z)(Rc5=k!<98&sXrPF19H5qB}?bEk7ZAvh35D>Ar?Zk!uLx*Nfad?WH4(k#+7NLL{~
zh?qfKfHS*rE(fXXgrbp3#hG~cfuoQkH{E~dhLu=X9!Bpsl8|HC1ON^lYV-iyNdOv-
zY!eoM!F<8A%I#VLJer%c&^Sdn{_3MgATW-ZXY`DB{jmarv1G0gNU-M*qyU4?Lu#x~
zXcFf1B;0>Lzacu72COHtXxbvfVW&EFnvXV!yu=aFHZ5W}xRQiRUc|2+(3qCO0Ot7!
zs{cnhzIu(Jq@&BX_~mdbO|s!E%NgkJU{$eS1uHFOCr%B#=bd>(Ld1vbo5Ly)wEio4
zx`1-@v=^?me3+u#Ei9VWo+V^(Hgt0#6SC+Umv_TIS!k&fPe45}EttT4NA_`WJFjx)
zB28Aq<u|{p*<Ty)0Tg_KARzC~avqVcO3wzHGk%!0xfD!jgC8rltM-J0<wC>DD^m|U
z&pij%MK`+882v0L$q_#vFvM;sZk4biG*-_GUBKiJ=AadfEzVB0d1blvXXqbS#u%4m
zE5F{X><wmtaj)h3#gZPE4Ga8{+JTDB{C??e2L{d;CL@O9E`?)A@=0jn-6l~7dW~ja
z<K7MXsZ8^bD|c;#ua~_J`i{5mwv?l~FTJgKt0R1LU4j~*@-ce|JTJ29>lkfi{nNJL
zeb9G1e>Eh#mujA_{nQ}oKlY?!ZtrW+K>IN{vot+I#0LSe(V0U-INj!G!n(_R{V<iz
zX&_TskOG<iBfhu-8_@!??zX}Vo8#%n%*>;pgoYg-xq+@Sh-hN0=W~JV*{KD$B(XVo
zAYlo2mm20UW^g5vR%H^YY^@1;WYBt7urh1Gl0h-COlND2<WZ5DiWGJKRzeH1q7M|7
kB(+raN>Z*N`<vzaJk}W<e&?yOyoLBj>dGohhl^RuzYk-OQvd(}

literal 861
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvE4M+yv$zf+;U{>*TaSW-L^Y*59k+7qHYvB6X
zp_`dMO9}{ZC`Z297dls6`P`qCvE@&;Zx?-k`nR?Clf0O}?v5hM<Nscayu5V%za4L$
z8im(;eB1W+s(fGe&1bLpk8ahi{dzpH?diII3TL()xhmgy)28m&=O2>iAE(>&&;N+R
zVL6Z?XaBhJPmel-8&HWqL(j91#`72?&H~jk8qC7R@MY*x11r{-XINUpFy#|tz$tbI
zP0Be1%in*WT6^WaD+7lE4wS(DRbGUVg8>UVkcQ78<*WX0?)=ZfjZG)ixP)!L_F^^p
zjVObR5+3grEdOOcTYJ@iwdoW11sWJw6o8gEFfd_fMm#vUcG<t#F-~?km4Gxdw4bCx
zn7({|Re8aO*RK=<1Q-@`He3Y8c72R3+qo~-uQosMVM^FCJG{Ti_|NB8i3Mzo2DjS7
z`<s>jet*?iuw?f-IZpQ-zh5mZXlY+3$G!f`hpWvGr`nZ%&8TQyzD|z+e8sO<@(kxI
zPF}TVvU|KV{J%uS5ykNT8as|J4F7NO<Ai4Te~%qcudJ@u`J=b<m-}J<msjoQ-JG`L
zm$Jd-qVRfww1{7?`VVi-E&kg6C~Di@UxzntKOOT|@#bkzl3tVf<f^=Ef8Ea2|229l
c-`r<dmixcT^Q=HQFxxPAy85}Sb4q9e05T{=SpWb4

diff --git a/icon-512.png b/icon-512.png
index 3fe714c1cd94919877a1ec4c9e30e29df68ba67b..f4c8db5d00d188b50e543433fe142bdc0350e195 100644
GIT binary patch
literal 3601
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

literal 3824
zcmeHKeN0nV6hH5kQlLt8Q*laszz{Ye7Pkpb8MTT^`4S%zU>TH6bQp~=7ekTKK3H5~
z)0E;6H<8W>vKPOnMifHdW+GK)SoCe;rch#$?Jd)$@|1q>wJsWrf9yY!jlX{Ho_FrK
z=bn4-$?sQ}mAPhW(3~Ium?}$2#sN_76NLbO4n`HU9U%C;ELpl<(frph>s~Tn)+I|@
zD%T#LTe8t{IwE7n+i&I=Z|)h5d*~^FnFR({l>VT{HX=c~8)}^y%*vp+jN%-IC$RjH
zT&S~$A<AXClPOhMFpz29fMfo|@#M?d>QQj&j2lSFHc;(0HqzJ|U|4N#&sLv>+w-kW
zq$CSk=36y1771sHD;Uu<Vqa{U>wCnKZyqKkagcPNE0z`Tsd8ONtGgD)GOcZ-Boqdu
z-LJ7dDAj4yw7ZvsBEd${7$24yHLdPx&@cOe7GuPn;w7w5Kn(7!rp2#-dw1e~`!Gt$
zbpqV59>%6`U&QwM5&CcqDG!6@dU=ZLI+*-zb+lLr+ZwPGR|A*=ts$g57!qafNHz^2
z0<E32m<Lf;O5IMRfAbDTBZ9U@5?cz&nj8{~2W7)dlG~#4o15(_3M_Sn2kk>B6<xWJ
z(FDPuiSvm9<=)&@RV`TdbT4Hu@rcq#=SVCRlxI$+yM6-G)b0iBC6q|8eMO6cV89%M
zOCmvWSexl81Jkvnc=i*7NN^Zw5g+2mzNJMxh_~&hMJNZgv<QKC>xc-_E&xy~xEzaK
z4*|$C>Ln06%$>c^_E12yy$4Vfu6DzzFN6TG<~|JeZAXCE<+SlAd?CQ8`hRDCF3$M)
zzIFKkv!3Pig3!JYPhDS>g*U2iH{)kt<x+fTMS<$-0*Dif0e<YAG>xxBs3X^n#E}E<
zEHnzsj?F`h^gADSgo&xsI|GO+=FZ)kF6d#x;SpJ`6<X2IqZ;UMpLG7ORbwJw#^ep0
zd}3h}+M9hhurx<6Rvh;pMfIoAKaU6tW4ul9>meCytGRjA+Z#(1cvZLQoVN=K=CrJz
zbpKyeW+GeTgfW)~9=r+Qo>R?402Ml(dp)INzl+FTfIf$o-UY<SbNtIo$y}Qm9H@`o
zTbK_xcs5U*-Nb|Yj^AiLLO7n8HF%RB+_w$Us}Q2nYd)k;EtmyM9^W8^JQ(p=<f#R7
zU~Gq>`Qj3={OL0triT$iU*2pN07xFBG8h8RjxD4*04#TX4o6A#6tFx#(e9Q4HCP$R
zYEf`^_TZj4Fc~V}VzoSQ-?&Sv!@#0njeAnSG<X^JWO1-M+mi=HV|{}hM@?GUU|++d
zHsv!|FdS$j)rqimbUKNlu+_SV#QZo|M`Hf4)uJP@An3Z)b3_#fmQ5JP?tz+HwTjXB
zL8)~yiOqnnE4gi|Jh1r7zqB7hs07Eav?v(5Z{@bD6ddR0gi<(4B~;`vnm|qvG?Lf?
zP=3e#?C`1uy&d6E(eH9T9OO6J-{&BYi^E&~L~HPE*X9FJU@j-+{*YcTk-2a%$^OwO
zQdJn6h7t$N(YPTNI;5&_HjPKTynVl&k5Ya0pOf+^a0XOxPJF@;Av&VE0G1DnxuHKN
zk%nk-C~+q;-DO4kWl52&2B=_bH7VgFNJdg3EAUFKkT!Q7C<M0aG*_lUSz*2XRn*jJ
z?8Vhtpp38J)Y}xIFM=DE!PzHTE<Zw@;*z44Se+r=RgIQ48P~SEOOUa}5xKb92+rBM
z9$bCfs}L28c3x48PAjXL?bVMlI5vYQjkbP93j$3y>W-yWnczsBaj-S16%46KOFhCC
X^q%zMN0-iXN)}|RGLuiND607zB6Mxz

diff --git a/icon.svg b/icon.svg
index a575502..c4bad7c 100644
--- a/icon.svg
+++ b/icon.svg
@@ -1,6 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <rect width="100" height="100" rx="22" fill="#007aff"/>
-  <rect x="22" y="34" width="56" height="7" rx="3.5" fill="white"/>
-  <rect x="22" y="48" width="56" height="7" rx="3.5" fill="white"/>
-  <rect x="22" y="62" width="36" height="7" rx="3.5" fill="white"/>
+  <rect width="100" height="100" rx="22" fill="#0a84ff"/>
+  <g fill="none" stroke="#fff" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="38,36 26,50 38,64"/>
+    <polyline points="62,36 74,50 62,64"/>
+    <line x1="55" y1="32" x2="45" y2="68"/>
+  </g>
 </svg>
diff --git a/index.html b/index.html
index e045661..e886642 100644
--- a/index.html
+++ b/index.html
@@ -4,696 +4,416 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-  <meta name="apple-mobile-web-app-title" content="Memo">
-  <meta name="theme-color" content="#f2f2f7" media="(prefers-color-scheme: light)">
-  <meta name="theme-color" content="#1c1c1e" media="(prefers-color-scheme: dark)">
-  <title>Memo — Quick Notes</title>
+  <meta name="apple-mobile-web-app-title" content="Shell">
+  <meta name="theme-color" content="#0b0b0c">
+  <title>WebApp Shell</title>
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="apple-touch-icon" href="icon-192.png">
   <style>
     :root {
-      --bg:        #f2f2f7;
-      --surface:   #ffffff;
-      --surface2:  #e5e5ea;
-      --text:      #1c1c1e;
-      --text2:     #3c3c43cc;
-      --text3:     #8e8e93;
-      --accent:    #007aff;
-      --accent-bg: #e8f0fe;
-      --danger:    #ff3b30;
-      --shadow:    0 1px 8px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.04);
-      --nav-h:     52px;
-      --radius:    13px;
-      --st:        env(safe-area-inset-top, 0px);
-      --sb:        env(safe-area-inset-bottom, 0px);
-      --sl:        env(safe-area-inset-left, 0px);
-      --sr:        env(safe-area-inset-right, 0px);
+      --bg:      #0b0b0c;
+      --panel:   #18181b;
+      --panel2:  #232327;
+      --text:    #f4f4f5;
+      --text2:   #a1a1aa;
+      --accent:  #0a84ff;
+      --accent2: #0066d6;
+      --ok:      #30d158;
+      --warn:    #ff9f0a;
+      --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+      --sans: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+      --st: env(safe-area-inset-top, 0px);
+      --sb: env(safe-area-inset-bottom, 0px);
     }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg:        #1c1c1e;
-        --surface:   #2c2c2e;
-        --surface2:  #3a3a3c;
-        --text:      #ffffff;
-        --text2:     #ebebf599;
-        --text3:     #8e8e93;
-        --accent:    #0a84ff;
-        --accent-bg: #0a2040;
-        --shadow:    0 1px 8px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-      }
-    }
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
-    html { height: 100%; }
+    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+    html, body { height: 100%; }
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
+      font-family: var(--sans);
       background: var(--bg);
       color: var(--text);
-      min-height: 100dvh;
-      overflow-x: hidden;
-      overscroll-behavior: none;
+      -webkit-text-size-adjust: 100%;
     }
 
-    /* ── Nav ── */
-    .nav {
-      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-      height: calc(var(--nav-h) + var(--st));
-      padding-top: var(--st);
-      padding-left: calc(16px + var(--sl));
-      padding-right: calc(16px + var(--sr));
-      background: color-mix(in srgb, var(--surface) 85%, transparent);
-      backdrop-filter: saturate(180%) blur(20px);
-      -webkit-backdrop-filter: saturate(180%) blur(20px);
-      border-bottom: .5px solid var(--surface2);
-      display: flex; align-items: center; justify-content: space-between;
-    }
-    .nav-title { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
-    .nav-count  { font-size: 13px; color: var(--text3); margin-top: 1px; }
-    .nav-side   { display: flex; align-items: center; gap: 4px; }
-    .icon-btn {
-      width: 36px; height: 36px; border: none; background: none;
-      cursor: pointer; display: flex; align-items: center; justify-content: center;
-      border-radius: 50%; color: var(--accent); transition: background .12s;
-    }
-    .icon-btn:active { background: var(--surface2); }
-    .icon-btn svg { width: 20px; height: 20px; }
-
-    /* ── Main scroll area ── */
-    .main {
-      padding-top: calc(var(--nav-h) + var(--st) + 18px);
-      padding-bottom: calc(88px + var(--sb));
-      padding-left: calc(16px + var(--sl));
-      padding-right: calc(16px + var(--sr));
+    /* Splash shown until JS decides render vs builder */
+    #splash {
+      position: fixed; inset: 0; display: flex;
+      align-items: center; justify-content: center;
+      background: var(--bg); color: var(--text2); font-size: 14px;
+      z-index: 10;
     }
 
-    /* ── Notes grid ── */
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
-    }
-    @media (min-width: 480px) { .grid { grid-template-columns: repeat(3, 1fr); } }
-    @media (min-width: 700px) { .grid { grid-template-columns: repeat(4, 1fr); } }
-
-    /* ── Note card ── */
-    .card {
-      background: var(--surface);
-      border-radius: var(--radius);
-      padding: 14px 14px 12px;
-      min-height: 110px;
-      display: flex; flex-direction: column; gap: 5px;
-      box-shadow: var(--shadow);
-      cursor: pointer;
-      transition: transform .12s, box-shadow .12s;
-      position: relative; overflow: hidden;
-      user-select: none;
+    /* ── Builder ── */
+    #builder {
+      max-width: 680px; margin: 0 auto;
+      padding: calc(28px + var(--st)) 20px calc(40px + var(--sb));
     }
-    .card:active { transform: scale(.97); }
-    .card-title {
-      font-size: 14px; font-weight: 600; line-height: 1.3;
-      overflow: hidden; display: -webkit-box;
-      -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-    }
-    .card-body {
-      font-size: 12px; color: var(--text3); line-height: 1.45; flex: 1;
-      overflow: hidden; display: -webkit-box;
-      -webkit-line-clamp: 5; -webkit-box-orient: vertical;
-    }
-    .card-date { font-size: 10px; color: var(--text3); margin-top: 4px; }
-    .card-del {
-      position: absolute; top: 7px; right: 7px;
-      width: 22px; height: 22px; border: none;
-      background: var(--danger); color: #fff;
-      border-radius: 50%; font-size: 15px; line-height: 1;
-      cursor: pointer; display: none; align-items: center; justify-content: center;
-    }
-    .card.wiggle .card-del { display: flex; }
-    .card.wiggle { animation: wiggle .3s ease-in-out infinite alternate; }
-    @keyframes wiggle {
-      0%   { transform: rotate(-1.2deg); }
-      100% { transform: rotate(1.2deg); }
+    .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+    .brand img { width: 38px; height: 38px; border-radius: 9px; }
+    h1 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
+    .tagline { color: var(--text2); font-size: 14px; line-height: 1.5; margin: 8px 0 22px; }
+
+    label.field { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 8px; }
+
+    textarea {
+      width: 100%; min-height: 230px; resize: vertical;
+      background: var(--panel); color: var(--text);
+      border: 1px solid var(--panel2); border-radius: 12px;
+      padding: 14px; font-family: var(--mono); font-size: 13px; line-height: 1.5;
+      outline: none; -webkit-appearance: none;
     }
+    textarea:focus { border-color: var(--accent); }
 
-    /* ── Empty state ── */
-    .empty {
-      display: flex; flex-direction: column; align-items: center;
-      justify-content: center; gap: 10px; text-align: center;
-      padding: 60px 32px;
-    }
-    .empty svg { color: var(--text3); opacity: .35; width: 68px; height: 68px; }
-    .empty-title  { font-size: 20px; font-weight: 600; color: var(--text); }
-    .empty-sub    { font-size: 15px; color: var(--text3); line-height: 1.4; }
-
-    /* ── FAB ── */
-    .fab {
-      position: fixed;
-      bottom: calc(22px + var(--sb));
-      right: calc(22px + var(--sr));
-      width: 56px; height: 56px;
-      background: var(--accent); border: none; border-radius: 50%;
-      color: #fff; font-size: 30px; line-height: 1;
-      cursor: pointer; display: flex; align-items: center; justify-content: center;
-      box-shadow: 0 4px 18px rgba(0,122,255,.45);
-      transition: transform .12s, box-shadow .12s;
-      z-index: 50;
-    }
-    .fab:active { transform: scale(.92); box-shadow: 0 2px 8px rgba(0,122,255,.3); }
-
-    /* ── Overlay / Sheet base ── */
-    .overlay {
-      position: fixed; inset: 0; z-index: 200;
-      background: rgba(0,0,0,.45);
-      display: flex; align-items: flex-end;
-      opacity: 0; pointer-events: none;
-      transition: opacity .25s;
-    }
-    .overlay.open { opacity: 1; pointer-events: all; }
-
-    .sheet {
-      background: var(--surface);
-      border-radius: 20px 20px 0 0;
-      width: 100%;
-      transform: translateY(100%);
-      transition: transform .35s cubic-bezier(.32,.72,0,1);
-    }
-    .overlay.open .sheet { transform: translateY(0); }
-
-    .handle {
-      width: 36px; height: 4px; border-radius: 2px;
-      background: var(--surface2); margin: 10px auto;
-    }
-
-    /* ── Editor sheet ── */
-    .editor-sheet { max-height: 92dvh; display: flex; flex-direction: column; padding-bottom: var(--sb); }
-    .editor-hdr {
+    .controls {
       display: flex; align-items: center; justify-content: space-between;
-      padding: 4px 20px 10px; flex-shrink: 0;
+      gap: 12px; margin: 14px 0 4px; flex-wrap: wrap;
     }
-    .editor-hdr-title { font-size: 17px; font-weight: 600; }
-    .sheet-btn {
-      font-size: 17px; color: var(--accent); background: none;
-      border: none; cursor: pointer; padding: 4px 2px; font-family: inherit;
+    .toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); cursor: pointer; }
+    .toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
+    .meta { font-size: 12px; color: var(--text2); font-family: var(--mono); }
+    .meta.warn { color: var(--warn); }
+
+    .btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      border: none; border-radius: 11px; cursor: pointer;
+      font-family: var(--sans); font-size: 15px; font-weight: 600;
+      padding: 13px 18px; transition: opacity .12s, transform .12s;
     }
-    .sheet-btn.done { font-weight: 600; }
-    .editor-title-input {
-      width: 100%; border: none; background: none; outline: none;
-      font-size: 20px; font-weight: 700; color: var(--text);
-      padding: 0 20px 10px; font-family: inherit;
+    .btn:active { transform: scale(.97); }
+    .btn-primary { background: var(--accent); color: #fff; width: 100%; margin-top: 16px; }
+    .btn-ghost { background: var(--panel2); color: var(--text); }
+    .btn:disabled { opacity: .5; cursor: default; }
+
+    /* output */
+    #out { margin-top: 20px; display: none; }
+    #out.show { display: block; }
+    .out-label { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 8px; }
+    .url-box {
+      width: 100%; background: var(--panel); color: var(--accent);
+      border: 1px solid var(--panel2); border-radius: 11px;
+      padding: 12px; font-family: var(--mono); font-size: 12px;
+      word-break: break-all; max-height: 120px; overflow: auto; line-height: 1.5;
+      -webkit-user-select: all; user-select: all;
     }
-    .editor-title-input::placeholder { color: var(--text3); }
-    .editor-divider { height: .5px; background: var(--surface2); margin: 0 20px 10px; flex-shrink: 0; }
-    .editor-body-input {
-      width: 100%; flex: 1; border: none; background: none; outline: none; resize: none;
-      font-size: 16px; line-height: 1.55; color: var(--text);
-      padding: 0 20px 20px; font-family: inherit; min-height: 180px;
+    .out-actions { display: flex; gap: 10px; margin-top: 12px; }
+    .out-actions .btn { flex: 1; }
+    .copied { color: var(--ok); font-size: 13px; margin-top: 8px; height: 16px; transition: opacity .2s; }
+
+    /* details / help */
+    details {
+      margin-top: 26px; background: var(--panel); border: 1px solid var(--panel2);
+      border-radius: 12px; overflow: hidden;
     }
-    .editor-body-input::placeholder { color: var(--text3); }
-
-    /* ── Install sheet ── */
-    .install-sheet {
-      max-height: 92dvh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      padding-bottom: 0;
+    summary {
+      padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
+      list-style: none; display: flex; align-items: center; justify-content: space-between;
     }
-    .install-body {
-      padding: 0 24px calc(24px + var(--sb));
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-      flex: 1;
+    summary::-webkit-details-marker { display: none; }
+    summary::after { content: '+'; color: var(--text2); font-size: 18px; }
+    details[open] summary::after { content: '–'; }
+    .help { padding: 0 16px 16px; font-size: 13.5px; line-height: 1.6; color: var(--text2); }
+    .help h3 { color: var(--text); font-size: 14px; margin: 14px 0 6px; }
+    .help ol, .help ul { margin: 6px 0 6px 20px; }
+    .help li { margin: 5px 0; }
+    .help code {
+      font-family: var(--mono); font-size: 12px; background: var(--panel2);
+      padding: 2px 6px; border-radius: 5px; color: var(--text);
     }
+    .help strong { color: var(--text); }
 
-    .app-icon {
-      width: 72px; height: 72px; border-radius: 16px;
-      background: var(--accent); margin: 4px auto 18px;
-      display: flex; align-items: center; justify-content: center;
-      box-shadow: 0 6px 20px rgba(0,122,255,.35);
-    }
-    .app-icon svg { width: 42px; height: 42px; color: #fff; }
-
-    .install-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 6px; }
-    .install-sub   { font-size: 15px; color: var(--text3); text-align: center; line-height: 1.45; margin-bottom: 26px; }
-
-    .steps { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
-    .step  { display: flex; align-items: flex-start; gap: 14px; }
-    .step-ico {
-      width: 48px; height: 48px; flex-shrink: 0;
-      background: var(--accent-bg); border-radius: 12px;
-      display: flex; align-items: center; justify-content: center;
-      color: var(--accent);
-    }
-    .step-ico svg { width: 26px; height: 26px; }
-    .step-text { flex: 1; padding-top: 3px; }
-    .step-label { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
-    .step-desc  { font-size: 13px; color: var(--text3); line-height: 1.4; }
-    .step-desc strong { color: var(--text); }
-
-    .install-note {
-      font-size: 12px; color: var(--text3); text-align: center;
-      margin-bottom: 16px; line-height: 1.4;
+    .notice {
+      margin-top: 22px; padding: 13px 15px; border-radius: 11px;
+      background: rgba(255,159,10,.1); border: 1px solid rgba(255,159,10,.25);
+      font-size: 12.5px; line-height: 1.55; color: #f5c97a;
     }
 
-    .btn-primary {
-      width: 100%; padding: 15px;
-      background: var(--accent); border: none; border-radius: var(--radius);
-      color: #fff; font-size: 17px; font-weight: 600;
-      cursor: pointer; font-family: inherit;
-      transition: opacity .12s;
+    /* ── Render mode (full-bleed app frame) ── */
+    html.rendering, body.rendering { background: #000; }
+    #appframe {
+      position: fixed; inset: 0; width: 100%; height: 100%;
+      border: 0; display: block; background: #fff;
     }
-    .btn-primary:active { opacity: .8; }
-
-    /* ── Offline banner ── */
-    .offline-bar {
-      position: fixed;
-      top: calc(var(--nav-h) + var(--st) + 10px);
-      left: 50%; transform: translateX(-50%) translateY(-70px);
-      background: #1c1c1e; color: #fff;
-      font-size: 13px; padding: 8px 18px;
-      border-radius: 20px; z-index: 150;
-      transition: transform .3s cubic-bezier(.32,.72,0,1);
-      white-space: nowrap; pointer-events: none;
-    }
-    @media (prefers-color-scheme: dark) {
-      .offline-bar { background: #3a3a3c; }
-    }
-    .offline-bar.show { transform: translateX(-50%) translateY(0); }
-
-    /* ── Long-press hint ── */
-    .hint {
-      font-size: 12px; color: var(--text3); text-align: center;
-      margin-top: 16px; opacity: .7;
-    }
-
-    /* ── Standalone badge (shown only in browser) ── */
-    .pwa-badge {
-      display: none;
-      align-items: center; gap: 8px;
-      background: var(--accent); color: #fff;
-      font-size: 13px; font-weight: 500;
-      padding: 8px 14px; border-radius: 20px;
-      cursor: pointer; border: none; font-family: inherit;
-      margin-bottom: 20px;
-    }
-    .pwa-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
   </style>
 </head>
 <body>
 
-<!-- ── Navigation ── -->
-<nav class="nav" id="nav">
-  <div>
-    <div class="nav-title">Memo</div>
-    <div class="nav-count" id="navCount"></div>
+<div id="splash">Loading…</div>
+
+<main id="builder" hidden>
+  <div class="brand">
+    <img src="icon.svg" alt="" aria-hidden="true">
+    <h1>WebApp Shell</h1>
   </div>
-  <div class="nav-side">
-    <button class="icon-btn" id="installBtn" aria-label="Add to Home Screen" title="Add to Home Screen">
-      <!-- Share / install icon -->
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
-        <polyline points="16 6 12 2 8 6"/>
-        <line x1="12" y1="2" x2="12" y2="15"/>
-      </svg>
-    </button>
+  <p class="tagline">
+    Paste a self-contained HTML page below. The shell encodes it into a link that renders
+    your page full-screen on a real, persistent origin — works <strong style="color:var(--text)">fully offline</strong>
+    after the first load, and keeps <code>localStorage</code> between launches (unlike <code>data:</code> URLs).
+  </p>
+
+  <label class="field" for="html">Your HTML</label>
+  <textarea id="html" spellcheck="false" autocapitalize="off" autocomplete="off"></textarea>
+
+  <div class="controls">
+    <label class="toggle">
+      <input type="checkbox" id="gzip" checked>
+      Compress link <span id="gzipNote" style="opacity:.7"></span>
+    </label>
+    <span class="meta" id="sizeMeta"></span>
   </div>
-</nav>
-
-<!-- ── Main content ── -->
-<main class="main" id="main">
-  <!-- Install prompt banner (browser only) -->
-  <button class="pwa-badge" id="pwaBadge" aria-label="Install app">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
-      <polyline points="16 6 12 2 8 6"/>
-      <line x1="12" y1="2" x2="12" y2="15"/>
-    </svg>
-    Add Memo to Home Screen
-  </button>
-
-  <div id="notesContainer"></div>
-</main>
 
-<!-- ── FAB ── -->
-<button class="fab" id="fab" aria-label="New note">+</button>
-
-<!-- ── Editor Sheet ── -->
-<div class="overlay" id="editorOverlay" role="dialog" aria-modal="true" aria-label="Note editor">
-  <div class="sheet editor-sheet" id="editorSheet">
-    <div class="handle"></div>
-    <div class="editor-hdr">
-      <button class="sheet-btn" id="editorCancel">Cancel</button>
-      <span class="editor-hdr-title" id="editorHeading">New Note</span>
-      <button class="sheet-btn done" id="editorSave">Save</button>
+  <button class="btn btn-primary" id="gen">Generate launch link</button>
+
+  <div id="out">
+    <div class="out-label">Launch URL</div>
+    <div class="url-box" id="url"></div>
+    <div class="out-actions">
+      <button class="btn btn-ghost" id="copy">Copy link</button>
+      <button class="btn btn-primary" id="open" style="margin-top:0">Open now</button>
     </div>
-    <input  class="editor-title-input" id="editorTitle" placeholder="Title" maxlength="120" autocomplete="off" spellcheck="true">
-    <div class="editor-divider"></div>
-    <textarea class="editor-body-input" id="editorBody" placeholder="Write something…" spellcheck="true"></textarea>
+    <div class="copied" id="copied"></div>
   </div>
-</div>
-
-<!-- ── Install Sheet ── -->
-<div class="overlay" id="installOverlay" role="dialog" aria-modal="true" aria-label="Install instructions">
-  <div class="sheet install-sheet" id="installSheet">
-    <div class="handle"></div>
-    <div class="install-body">
-
-      <!-- App icon -->
-      <div class="app-icon" aria-hidden="true">
-        <svg viewBox="0 0 100 100" fill="currentColor">
-          <rect x="12" y="32" width="76" height="10" rx="5"/>
-          <rect x="12" y="50" width="76" height="10" rx="5"/>
-          <rect x="12" y="68" width="48" height="10" rx="5"/>
-        </svg>
-      </div>
-
-      <h2 class="install-title">Add to Home Screen</h2>
-      <p  class="install-sub">Use Memo like a native app — no browser chrome, works offline, saves to your Home Screen.</p>
-
-      <div class="steps">
-
-        <!-- Step 1: Open in Safari -->
-        <div class="install-step-wrap" id="safariStep">
-          <div class="step">
-            <div class="step-ico" aria-hidden="true">
-              <!-- Safari compass icon -->
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"/>
-                <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor" stroke="none"/>
-              </svg>
-            </div>
-            <div class="step-text">
-              <div class="step-label">1. Open in Safari</div>
-              <div class="step-desc">This page must be open in <strong>Safari</strong> — not Chrome or another browser.</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Step 2: Tap Share -->
-        <div class="step">
-          <div class="step-ico" aria-hidden="true">
-            <!-- Share arrow icon (matches Safari's button) -->
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
-              <polyline points="16 6 12 2 8 6"/>
-              <line x1="12" y1="2" x2="12" y2="15"/>
-            </svg>
-          </div>
-          <div class="step-text">
-            <div class="step-label">2. Tap the Share button</div>
-            <div class="step-desc">Find the <strong>Share ↑</strong> icon in Safari's toolbar — it's at the bottom of the screen on iPhone.</div>
-          </div>
-        </div>
-
-        <!-- Step 3: Add to Home Screen -->
-        <div class="step">
-          <div class="step-ico" aria-hidden="true">
-            <!-- Plus-in-square icon -->
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="3"/>
-              <line x1="12" y1="8" x2="12" y2="16"/>
-              <line x1="8"  y1="12" x2="16" y2="12"/>
-            </svg>
-          </div>
-          <div class="step-text">
-            <div class="step-label">3. "Add to Home Screen"</div>
-            <div class="step-desc">Scroll down in the Share sheet and tap <strong>"Add to Home Screen"</strong>.</div>
-          </div>
-        </div>
-
-        <!-- Step 4: Confirm -->
-        <div class="step">
-          <div class="step-ico" aria-hidden="true">
-            <!-- Checkmark icon -->
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="20 6 9 17 4 12"/>
-            </svg>
-          </div>
-          <div class="step-text">
-            <div class="step-label">4. Tap "Add"</div>
-            <div class="step-desc">Tap <strong>"Add"</strong> in the top-right corner to install Memo on your Home Screen.</div>
-          </div>
-        </div>
-
-      </div>
-
-      <p class="install-note" id="installNote">
-        Once installed, Memo opens full-screen with no browser bars and works fully offline.
-      </p>
-
-      <button class="btn-primary" id="installDismiss">Got It</button>
+
+  <details>
+    <summary>How to use it (Shortcuts &amp; Home Screen)</summary>
+    <div class="help">
+      <h3>Open from the Shortcuts app</h3>
+      <ol>
+        <li>Tap <strong>Generate launch link</strong>, then <strong>Copy link</strong>.</li>
+        <li>In Shortcuts, add an <strong>“Open URLs”</strong> action and paste the link.</li>
+        <li>Running the shortcut opens your app in Safari — it runs offline and remembers its data.</li>
+      </ol>
+      <p style="margin-top:8px">Note: Shortcuts opens links in Safari (with its minimal toolbar). That's the same
+      behavior your old <code>data:</code> URLs had. iOS does not let Shortcuts launch directly into a
+      chrome-free standalone window.</p>
+
+      <h3>True full-screen (no Safari chrome)</h3>
+      <ol>
+        <li>Tap <strong>Open now</strong> to load your app.</li>
+        <li>In Safari tap <strong>Share → Add to Home Screen → Add</strong>.</li>
+        <li>That icon launches your app full-screen, offline, with its own storage.</li>
+      </ol>
+
+      <h3>Why not <code>webapp://</code>?</h3>
+      <p>Custom URL schemes can only be registered by native apps on iOS, so a web page can't claim
+      <code>webapp://</code>. Use the <code>https://</code> link this tool generates instead — it does
+      everything the scheme was meant to do.</p>
+
+      <h3>Offline</h3>
+      <p>The first time you load the shell online, a service worker caches it permanently. After that the
+      shell and every link you generate work with no network. Your app only needs the internet if its own
+      code fetches something external (CDN scripts, APIs, etc.) — keep apps self-contained to stay 100% offline.</p>
     </div>
-  </div>
-</div>
+  </details>
 
-<!-- ── Offline banner ── -->
-<div class="offline-bar" id="offlineBar" aria-live="polite">
-  📶 You're offline — notes are saved locally
-</div>
+  <div class="notice">
+    ⚠︎ Anything you load runs on this origin (<code id="origin"></code>) with full access to its storage.
+    Only open links you created or trust — a malicious page could read or wipe the data of your other shell apps.
+  </div>
+</main>
 
 <script>
 'use strict';
 
-// ── Storage ──────────────────────────────────────────────────────────────────
-const STORE_KEY = 'memo_notes_v1';
-
-function loadNotes() {
-  try { return JSON.parse(localStorage.getItem(STORE_KEY)) || []; }
-  catch { return []; }
+/* Register the service worker as early as possible so the shell keeps working offline. */
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('./sw.js').catch(function(){});
 }
 
-function saveNotes(notes) {
-  localStorage.setItem(STORE_KEY, JSON.stringify(notes));
+/* ───────── base64url <-> bytes (UTF-8 safe) ───────── */
+function b64urlFromBytes(bytes) {
+  var bin = '', CH = 0x8000;
+  for (var i = 0; i < bytes.length; i += CH) {
+    bin += String.fromCharCode.apply(null, bytes.subarray(i, i + CH));
+  }
+  return btoa(bin).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }
-
-// ── State ─────────────────────────────────────────────────────────────────────
-let notes = loadNotes();
-let editingId = null;
-let wiggling  = false;
-
-// ── DOM refs ─────────────────────────────────────────────────────────────────
-const $ = id => document.getElementById(id);
-
-const navCount       = $('navCount');
-const notesContainer = $('notesContainer');
-const pwaBadge       = $('pwaBadge');
-
-const editorOverlay  = $('editorOverlay');
-const editorHeading  = $('editorHeading');
-const editorTitle    = $('editorTitle');
-const editorBody     = $('editorBody');
-
-const installOverlay = $('installOverlay');
-const offlineBar     = $('offlineBar');
-const safariStep     = $('safariStep');
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-function uid() {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+function bytesFromB64url(s) {
+  s = s.replace(/-/g, '+').replace(/_/g, '/');
+  while (s.length % 4) s += '=';
+  var bin = atob(s), out = new Uint8Array(bin.length);
+  for (var i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+  return out;
 }
 
-function fmtDate(ts) {
-  const d = new Date(ts);
-  const now = new Date();
-  const diff = now - d;
-  if (diff < 60000)    return 'Just now';
-  if (diff < 3600000)  return Math.floor(diff/60000) + 'm ago';
-  if (diff < 86400000) return Math.floor(diff/3600000) + 'h ago';
-  if (d.getFullYear() === now.getFullYear())
-    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-  return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+/* ───────── optional gzip via Compression Streams (Safari 16.4+) ───────── */
+var GZIP_OK = (typeof CompressionStream !== 'undefined');
+async function gzip(bytes) {
+  var s = new Response(bytes).body.pipeThrough(new CompressionStream('gzip'));
+  return new Uint8Array(await new Response(s).arrayBuffer());
 }
-
-function escHtml(s) {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+async function gunzip(bytes) {
+  var s = new Response(bytes).body.pipeThrough(new DecompressionStream('gzip'));
+  return new Uint8Array(await new Response(s).arrayBuffer());
 }
 
-const isStandalone = () =>
-  window.matchMedia('(display-mode: standalone)').matches ||
-  navigator.standalone === true;
-
-// ── Render ────────────────────────────────────────────────────────────────────
-function render() {
-  navCount.textContent = notes.length
-    ? notes.length + (notes.length === 1 ? ' note' : ' notes')
-    : '';
-
-  // Show install badge in browser only
-  pwaBadge.style.display = (!isStandalone() && notes.length === 0) ? 'flex' : 'none';
-
-  if (notes.length === 0) {
-    notesContainer.innerHTML = `
-      <div class="empty">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-          <line x1="16" y1="13" x2="8" y2="13"/>
-          <line x1="16" y1="17" x2="8" y2="17"/>
-          <polyline points="10 9 9 9 8 9"/>
-        </svg>
-        <div class="empty-title">No notes yet</div>
-        <div class="empty-sub">Tap <strong>+</strong> to write your first note.<br>Everything is saved on your device.</div>
-      </div>`;
-    return;
+/* ───────── encode / decode payload ───────── */
+async function encodeHTML(html, useGzip) {
+  var bytes = new TextEncoder().encode(html);
+  if (useGzip && GZIP_OK) {
+    return 'appz=' + b64urlFromBytes(await gzip(bytes));
   }
-
-  const sorted = [...notes].sort((a, b) => b.updatedAt - a.updatedAt);
-  notesContainer.innerHTML = `
-    <div class="grid" id="grid">
-      ${sorted.map(n => `
-        <div class="card${wiggling ? ' wiggle' : ''}" data-id="${n.id}" role="button" tabindex="0" aria-label="${escHtml(n.title || 'Untitled')}">
-          ${n.title ? `<div class="card-title">${escHtml(n.title)}</div>` : ''}
-          ${n.body  ? `<div class="card-body">${escHtml(n.body)}</div>` : ''}
-          <div class="card-date">${fmtDate(n.updatedAt)}</div>
-          <button class="card-del" data-id="${n.id}" aria-label="Delete note" tabindex="-1">×</button>
-        </div>
-      `).join('')}
-    </div>
-    ${notes.length > 1 ? '<div class="hint">Hold a note to delete it</div>' : ''}`;
-}
-
-// ── Open / close editor ───────────────────────────────────────────────────────
-function openEditor(note = null) {
-  editingId = note ? note.id : null;
-  editorHeading.textContent = note ? 'Edit Note' : 'New Note';
-  editorTitle.value = note ? note.title : '';
-  editorBody.value  = note ? note.body  : '';
-  editorOverlay.classList.add('open');
-  setTimeout(() => (note ? editorBody : editorTitle).focus(), 350);
-}
-
-function closeEditor() {
-  editorOverlay.classList.remove('open');
-  editorTitle.blur();
-  editorBody.blur();
+  return 'app=' + b64urlFromBytes(bytes);
 }
-
-function saveNote() {
-  const title = editorTitle.value.trim();
-  const body  = editorBody.value.trim();
-  if (!title && !body) { closeEditor(); return; }
-
-  if (editingId) {
-    const n = notes.find(n => n.id === editingId);
-    if (n) { n.title = title; n.body = body; n.updatedAt = Date.now(); }
-  } else {
-    notes.push({ id: uid(), title, body, createdAt: Date.now(), updatedAt: Date.now() });
+async function decodePayload(params) {
+  if (params.has('appz')) {
+    return new TextDecoder().decode(await gunzip(bytesFromB64url(params.get('appz'))));
+  }
+  if (params.has('app')) {
+    return new TextDecoder().decode(bytesFromB64url(params.get('app')));
   }
-  saveNotes(notes);
-  closeEditor();
-  render();
+  return null;
 }
 
-// ── Delete note ───────────────────────────────────────────────────────────────
-function deleteNote(id) {
-  notes = notes.filter(n => n.id !== id);
-  saveNotes(notes);
-  if (notes.length === 0) wiggling = false;
-  render();
+/* ───────── inject full-screen / viewport metas if the page lacks them ───────── */
+function ensureMetas(html) {
+  var inject = '';
+  if (!/apple-mobile-web-app-capable/i.test(html)) {
+    inject += '<meta name="apple-mobile-web-app-capable" content="yes">' +
+              '<meta name="mobile-web-app-capable" content="yes">' +
+              '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
+  }
+  if (!/name=["']viewport["']/i.test(html)) {
+    inject += '<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">';
+  }
+  if (!inject) return html;
+  if (/<head[^>]*>/i.test(html)) return html.replace(/<head[^>]*>/i, function (m) { return m + inject; });
+  if (/<html[^>]*>/i.test(html)) return html.replace(/<html[^>]*>/i, function (m) { return m + '<head>' + inject + '</head>'; });
+  return '<head>' + inject + '</head>' + html;
 }
 
-function stopWiggle() {
-  wiggling = false;
-  render();
+/* ───────── render an app full-screen via an iframe (isolated, same-origin) ───────── */
+function renderApp(html) {
+  document.documentElement.classList.add('rendering');
+  document.body.classList.add('rendering');
+  var b = document.getElementById('builder'); if (b) b.remove();
+  var s = document.getElementById('splash'); if (s) s.remove();
+
+  var f = document.createElement('iframe');
+  f.id = 'appframe';
+  f.setAttribute('allow', 'autoplay; camera; microphone; clipboard-write; clipboard-read; geolocation; fullscreen');
+  f.srcdoc = html;
+  document.body.appendChild(f);
+
+  var m = html.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
+  if (m && m[1].trim()) document.title = m[1].trim();
 }
 
-// ── Install sheet ─────────────────────────────────────────────────────────────
-function openInstall() {
-  // Show "open in Safari" step only when not already in Safari/standalone
-  safariStep.style.display = isStandalone() ? 'none' : '';
-  installOverlay.classList.add('open');
-}
+/* ───────── builder UI ───────── */
+function initBuilder() {
+  var s = document.getElementById('splash'); if (s) s.remove();
+  var builder = document.getElementById('builder');
+  builder.hidden = false;
+
+  document.getElementById('origin').textContent = location.origin;
+
+  var ta      = document.getElementById('html');
+  var gzipBox = document.getElementById('gzip');
+  var sizeMeta= document.getElementById('sizeMeta');
+  var gen     = document.getElementById('gen');
+  var out     = document.getElementById('out');
+  var urlBox  = document.getElementById('url');
+  var copyBtn = document.getElementById('copy');
+  var openBtn = document.getElementById('open');
+  var copied  = document.getElementById('copied');
+
+  if (!GZIP_OK) {
+    gzipBox.checked = false; gzipBox.disabled = true;
+    document.getElementById('gzipNote').textContent = '(unavailable)';
+  }
 
-function closeInstall() {
-  installOverlay.classList.remove('open');
-  localStorage.setItem('memo_install_seen', '1');
-}
+  ta.value = DEMO;
 
-// ── Offline detection ─────────────────────────────────────────────────────────
-function updateOnlineStatus() {
-  if (!navigator.onLine) {
-    offlineBar.classList.add('show');
-  } else {
-    offlineBar.classList.remove('show');
-  }
-}
+  var lastUrl = '';
 
-// ── Event wiring ──────────────────────────────────────────────────────────────
-$('fab').addEventListener('click', () => { stopWiggle(); openEditor(); });
-$('installBtn').addEventListener('click', openInstall);
-$('pwaBadge').addEventListener('click', openInstall);
-
-$('editorCancel').addEventListener('click', closeEditor);
-$('editorSave').addEventListener('click', saveNote);
-$('installDismiss').addEventListener('click', closeInstall);
-
-// Close overlays on background tap
-editorOverlay.addEventListener('click', e => { if (e.target === editorOverlay) closeEditor(); });
-installOverlay.addEventListener('click', e => { if (e.target === installOverlay) closeInstall(); });
-
-// Keyboard
-document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') { closeEditor(); closeInstall(); stopWiggle(); }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') saveNote();
-});
-
-// Note card interactions (tap to edit, long-press to wiggle)
-let longPressTimer = null;
-notesContainer.addEventListener('pointerdown', e => {
-  const card = e.target.closest('.card');
-  if (!card) return;
-  longPressTimer = setTimeout(() => {
-    longPressTimer = null;
-    wiggling = true;
-    render();
-    if (navigator.vibrate) navigator.vibrate(10);
-  }, 500);
-});
-
-notesContainer.addEventListener('pointerup',     () => clearTimeout(longPressTimer));
-notesContainer.addEventListener('pointercancel', () => clearTimeout(longPressTimer));
-
-notesContainer.addEventListener('click', e => {
-  // Delete button
-  const delBtn = e.target.closest('.card-del');
-  if (delBtn) {
-    e.stopPropagation();
-    deleteNote(delBtn.dataset.id);
-    return;
-  }
-  // Tap card
-  const card = e.target.closest('.card');
-  if (!card) return;
-  if (wiggling) { stopWiggle(); return; }
-  const note = notes.find(n => n.id === card.dataset.id);
-  if (note) openEditor(note);
-});
-
-// Tap outside cards to stop wiggle
-document.addEventListener('click', e => {
-  if (wiggling && !e.target.closest('.card') && !e.target.closest('.fab')) {
-    stopWiggle();
+  function updateSize() {
+    var bytes = new TextEncoder().encode(ta.value).length;
+    sizeMeta.textContent = bytes.toLocaleString() + ' bytes';
+    sizeMeta.classList.remove('warn');
   }
-});
-
-window.addEventListener('online',  updateOnlineStatus);
-window.addEventListener('offline', updateOnlineStatus);
-// Only react to events — don't eagerly show the banner on page load
+  ta.addEventListener('input', function () { updateSize(); out.classList.remove('show'); });
+  updateSize();
+
+  gen.addEventListener('click', async function () {
+    var html = ensureMetas(ta.value);
+    var param = await encodeHTML(html, gzipBox.checked);
+    lastUrl = location.origin + location.pathname + '#' + param;
+    urlBox.textContent = lastUrl;
+    out.classList.add('show');
+    copied.textContent = '';
+
+    var len = lastUrl.length;
+    sizeMeta.textContent = 'link: ' + len.toLocaleString() + ' chars';
+    if (len > 60000) {
+      sizeMeta.textContent += ' — long links may not survive Add to Home Screen';
+      sizeMeta.classList.add('warn');
+    } else {
+      sizeMeta.classList.remove('warn');
+    }
+    out.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  });
 
-// ── Auto-show install prompt on first visit (Safari only) ────────────────────
-if (!isStandalone() && !localStorage.getItem('memo_install_seen')) {
-  // Small delay so the page paints first
-  setTimeout(openInstall, 1200);
-}
+  copyBtn.addEventListener('click', async function () {
+    try {
+      await navigator.clipboard.writeText(lastUrl);
+      copied.textContent = '✓ Copied to clipboard';
+    } catch (e) {
+      var r = document.createRange(); r.selectNodeContents(urlBox);
+      var sel = getSelection(); sel.removeAllRanges(); sel.addRange(r);
+      copied.textContent = 'Selected — long-press to Copy';
+    }
+    setTimeout(function () { copied.textContent = ''; }, 2500);
+  });
 
-// ── Service Worker ────────────────────────────────────────────────────────────
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('./sw.js').catch(() => {});
+  openBtn.addEventListener('click', function () {
+    if (!lastUrl) return;
+    location.href = lastUrl;
+    location.reload();
   });
 }
 
-// ── Initial render ────────────────────────────────────────────────────────────
-render();
+/* ───────── starter demo (note: closing script tag is written as <\/script>) ───────── */
+var DEMO = [
+'<!DOCTYPE html>',
+'<html lang="en"><head><meta charset="utf-8">',
+'<title>Tap Counter</title>',
+'<style>',
+'  html,body{height:100%;margin:0;font-family:-apple-system,system-ui,sans-serif;',
+'    background:#0a84ff;color:#fff;display:flex;flex-direction:column;',
+'    align-items:center;justify-content:center;gap:24px;-webkit-user-select:none}',
+'  h1{font-size:15px;font-weight:600;opacity:.85;letter-spacing:.3px;text-transform:uppercase}',
+'  #n{font-size:96px;font-weight:800;font-variant-numeric:tabular-nums}',
+'  button{font-size:22px;font-weight:700;padding:16px 40px;border:0;border-radius:16px;',
+'    background:#fff;color:#0a84ff}',
+'  small{opacity:.75;font-size:13px}',
+'</style></head><body>',
+'  <h1>Offline &amp; persistent</h1>',
+'  <div id="n">0</div>',
+'  <button id="b">Tap +1</button>',
+'  <small>Stored locally — survives reloads &amp; airplane mode</small>',
+'  <script>',
+'    var n = +(localStorage.getItem("count") || 0);',
+'    var el = document.getElementById("n"); el.textContent = n;',
+'    document.getElementById("b").onclick = function(){',
+'      n++; el.textContent = n; localStorage.setItem("count", n);',
+'    };',
+'  <\/script>',
+'</body></html>'
+].join('\n');
+
+/* ───────── boot: render if a payload is present, else show the builder ───────── */
+(async function boot() {
+  var raw = location.hash.slice(1) || location.search.slice(1);
+  var params = new URLSearchParams(raw);
+  try {
+    var html = await decodePayload(params);
+    if (html != null) { renderApp(html); return; }
+  } catch (e) {
+    var sp = document.getElementById('splash');
+    if (sp) sp.textContent = 'Could not decode this link. Showing the builder…';
+  }
+  initBuilder();
+})();
 </script>
 </body>
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
index 82357bd..2b51909 100644
--- a/manifest.webmanifest
+++ b/manifest.webmanifest
@@ -1,14 +1,15 @@
 {
-  "name": "Memo — Quick Notes",
-  "short_name": "Memo",
-  "description": "A fast, offline-capable notes app. Works without internet.",
+  "name": "WebApp Shell",
+  "short_name": "Shell",
+  "description": "Render self-contained HTML pages, encoded in the URL, full-screen and offline.",
   "start_url": "/webapp-shell/",
   "scope": "/webapp-shell/",
   "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#007aff",
-  "background_color": "#f2f2f7",
-  "categories": ["productivity", "utilities"],
+  "display_override": ["standalone"],
+  "orientation": "any",
+  "theme_color": "#0b0b0c",
+  "background_color": "#0b0b0c",
+  "categories": ["productivity", "utilities", "developer"],
   "icons": [
     {
       "src": "icon.svg",
diff --git a/sw.js b/sw.js
index 17d29f4..e1d979c 100644
--- a/sw.js
+++ b/sw.js
@@ -1,4 +1,5 @@
-const CACHE = 'memo-v1';
+/* WebApp Shell service worker — makes the shell work fully offline. */
+const CACHE = 'shell-v2';
 const BASE = '/webapp-shell/';
 const ASSETS = [
   BASE,
@@ -12,22 +13,52 @@ const ASSETS = [
 
 self.addEventListener('install', e => {
   self.skipWaiting();
-  e.waitUntil(
-    caches.open(CACHE).then(c => c.addAll(ASSETS).catch(() => {}))
-  );
+  e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS).catch(() => {})));
 });
 
 self.addEventListener('activate', e => {
-  self.clients.claim();
   e.waitUntil(
-    caches.keys().then(keys =>
-      Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
-    )
+    caches.keys()
+      .then(keys => Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k))))
+      .then(() => self.clients.claim())
   );
 });
 
 self.addEventListener('fetch', e => {
-  e.respondWith(
-    caches.match(e.request).then(cached => cached || fetch(e.request))
-  );
+  const req = e.request;
+  if (req.method !== 'GET') return;
+
+  const url = new URL(req.url);
+  // Let the loaded app's own cross-origin requests (CDNs, APIs) hit the network.
+  if (url.origin !== self.location.origin) return;
+
+  e.respondWith((async () => {
+    const cache = await caches.open(CACHE);
+
+    // Exact match first.
+    let hit = await cache.match(req);
+    if (hit) return hit;
+
+    // Payloads live in the URL hash (never sent) or query — ignore search so
+    // "/webapp-shell/?app=..." still resolves to the cached shell.
+    hit = await cache.match(req, { ignoreSearch: true });
+    if (hit) return hit;
+
+    // Any navigation within scope falls back to the cached shell.
+    if (req.mode === 'navigate') {
+      const shell = await cache.match(BASE + 'index.html');
+      if (shell) return shell;
+    }
+
+    // Otherwise go to network, caching same-origin successes for next time.
+    try {
+      const res = await fetch(req);
+      if (res && res.ok) cache.put(req, res.clone());
+      return res;
+    } catch (err) {
+      const shell = await cache.match(BASE + 'index.html');
+      if (shell) return shell;
+      throw err;
+    }
+  })());
 });