graphshell 0.0.2

Graphshell presentation host and loopback acceptance view.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!doctype html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Graphshell G4 session switch</title>
<style>
:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#071019;color:#f4eedf}
*{box-sizing:border-box}body{margin:0}.switcher{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:12px;background:#0b1720;border-bottom:1px solid #314756;overflow:auto}
button{border:1px solid #566f7e;border-radius:999px;padding:8px 13px;background:#132a37;color:#f4eedf;font:inherit;font-weight:700;white-space:nowrap}
button[aria-selected="true"]{border-color:#d8a657;background:#2c2a22}iframe{display:block;width:100%;height:1050px;border:0;background:#071019}iframe[hidden]{display:none}
</style></head><body><nav class="switcher" aria-label="Projection sessions" role="tablist">
<button type="button" role="tab" aria-selected="true" data-session="session-0">Turnstone · Browsing graph</button><button type="button" role="tab" aria-selected="false" data-session="session-1">Isometry · Player overmap</button><button type="button" role="tab" aria-selected="false" data-session="session-2">Isometry · Moor crossing</button></nav><main><iframe id="session-0" title="Turnstone · Browsing graph" srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;title&gt;Graphshell projection receipt&lt;/title&gt;
&lt;style&gt;
:root{color-scheme:dark;--ink:#f4eedf;--muted:#9eacb4;--line:#314756;--deep:#09141d;--panel:#10212c;--gold:#d8a657;--ok:#65bd85;--bad:#e46d5c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0%,#193448 0,transparent 38%),linear-gradient(150deg,#071019,#0b1720 50%,#0d1b24);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif}.shell{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:48px 0 64px}header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:26px}.eyebrow{margin:0 0 9px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(32px,5vw,54px);letter-spacing:-.04em;line-height:1.03}.lede{max-width:720px;margin:14px 0 0;color:#b9c5ca;font-size:17px}.session{align-self:start;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:#b9c5ca;background:#0a1821;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.projection{border:1px solid var(--line);border-radius:22px;background:rgba(13,29,39,.96);box-shadow:0 18px 55px rgba(0,0,0,.25);overflow:hidden}.projection-head{display:flex;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}.status{color:#b9d5c5;font-size:12px}.scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.scene.positioned{position:relative;display:block;height:760px;padding:0;background:radial-gradient(circle at 50% 48%,rgba(44,79,99,.24),transparent 54%),linear-gradient(rgba(69,100,116,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,100,116,.08) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.routes line{stroke:#527487;stroke-width:.45;vector-effect:non-scaling-stroke}.placed{position:absolute;width:42%;transform:translate(-50%,-50%);z-index:1}.placed .item{box-shadow:0 14px 35px rgba(0,0,0,.28)}.item{position:relative;min-width:0;min-height:176px;border:1px solid #38505f;border-radius:16px;background:var(--panel);overflow:hidden}.card{padding:21px}.card-top{display:flex;justify-content:space-between;gap:14px}.card-kicker{color:#79a9be;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.card h3,.glyph h3,.placeholder h3{margin:4px 0 14px;font-size:21px}.badges,.actions{display:flex;flex-wrap:wrap;gap:7px}.badge{border:1px solid #415b6b;border-radius:999px;padding:4px 8px;color:#c4d2d8;background:#132a37;font-size:11px}dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}dl div{border-left:2px solid #34566a;padding-left:10px}dt{color:var(--muted);font-size:11px;text-transform:uppercase}dd{margin:3px 0 0;font-weight:650;overflow-wrap:anywhere}.glyph{display:grid;grid-template-columns:64px 1fr;gap:15px;align-items:center;padding:24px}.glyph-mark{display:grid;place-items:center;width:64px;height:64px;border:1px solid #7a653e;border-radius:20px;color:var(--gold);font-size:32px}.image{display:flex;flex-direction:column}.image img{display:block;width:100%;height:176px;object-fit:cover}.image-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 14px}.placeholder{display:grid;place-items:center;text-align:center;padding:26px}.placeholder-mark{font-size:32px;color:#718795}button{border:1px solid #566f7e;border-radius:10px;padding:8px 11px;background:#1a3443;color:var(--ink);font:inherit;font-size:12px;font-weight:700}.receipts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.receipt{border:1px solid var(--line);border-radius:14px;padding:15px;background:#0b1922}.receipt strong{display:block}.receipt p{margin:5px 0 0;color:var(--muted);font-size:13px}.accepted{color:var(--ok)}.rejected{color:var(--bad)}@media(max-width:720px){.shell{width:min(100% - 24px,620px);padding-top:28px}header{grid-template-columns:1fr}.session{justify-self:start}.scene,.receipts{grid-template-columns:1fr}.scene.positioned{display:grid;height:auto;padding:18px;background:transparent}.scene.positioned .routes{display:none}.scene.positioned .placed{position:relative;left:auto!important;top:auto!important;width:auto;transform:none}.scene.positioned .placed .item{box-shadow:none}}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main class=&quot;shell&quot;&gt;
&lt;header&gt;&lt;div&gt;&lt;p class=&quot;eyebrow&quot;&gt;Graphshell · G4&lt;/p&gt;&lt;h1&gt;Browsing graph&lt;/h1&gt;&lt;p class=&quot;lede&quot;&gt;Turnstone disclosed this scene through the shared projection protocol.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;session&quot;&gt;loopback:turnstone:g3&lt;/div&gt;&lt;/header&gt;&lt;section class=&quot;projection&quot;&gt;&lt;div class=&quot;projection-head&quot;&gt;&lt;strong&gt;Disclosed scene&lt;/strong&gt;&lt;span class=&quot;status&quot;&gt;Live · 3 items&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;scene positioned&quot;&gt;&lt;svg class=&quot;routes&quot; viewBox=&quot;0 0 100 100&quot; preserveAspectRatio=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;line x1=&quot;76.000&quot; y1=&quot;20.000&quot; x2=&quot;24.000&quot; y2=&quot;80.000&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;76.000&quot; y1=&quot;20.000&quot; x2=&quot;68.533&quot; y2=&quot;60.555&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;div class=&quot;placed&quot; style=&quot;left:68.533%;top:60.555%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Harmony map&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Harmony map&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;turnstone&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;granted projection&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Address&lt;/dt&gt;&lt;dd&gt;mere://harmony-map&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Source&lt;/dt&gt;&lt;dd&gt;Turnstone graph&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.fit-view&quot; title=&quot;Frame the disclosed Turnstone graph without changing it.&quot;&gt;Fit view&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.open-address&quot; title=&quot;Ask Turnstone to add or select an address in graph truth.&quot;&gt;Open address&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:24.000%;top:80.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Radio map&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Radio map&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;turnstone&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;granted projection&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Address&lt;/dt&gt;&lt;dd&gt;mere://radio-map&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Source&lt;/dt&gt;&lt;dd&gt;Turnstone graph&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.fit-view&quot; title=&quot;Frame the disclosed Turnstone graph without changing it.&quot;&gt;Fit view&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.open-address&quot; title=&quot;Ask Turnstone to add or select an address in graph truth.&quot;&gt;Open address&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:76.000%;top:20.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Field notes&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Field notes&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;turnstone&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;granted projection&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Address&lt;/dt&gt;&lt;dd&gt;mere://field-notes&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Source&lt;/dt&gt;&lt;dd&gt;Turnstone graph&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.fit-view&quot; title=&quot;Frame the disclosed Turnstone graph without changing it.&quot;&gt;Fit view&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;turnstone.open-address&quot; title=&quot;Ask Turnstone to add or select an address in graph truth.&quot;&gt;Open address&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section class=&quot;receipts&quot; aria-label=&quot;Intent receipts&quot;&gt;&lt;article class=&quot;receipt&quot;&gt;&lt;strong&gt;Fit view&lt;/strong&gt;&lt;span class=&quot;accepted&quot;&gt;Accepted&lt;/span&gt;&lt;p&gt;The endpoint admitted and lowered the advertised intent.&lt;/p&gt;&lt;/article&gt;&lt;article class=&quot;receipt&quot;&gt;&lt;strong&gt;Open address&lt;/strong&gt;&lt;span class=&quot;rejected&quot;&gt;Rejected&lt;/span&gt;&lt;p&gt;open-address requires an address&lt;/p&gt;&lt;/article&gt;&lt;/section&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;
"></iframe><iframe id="session-1" title="Isometry · Player overmap" srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;title&gt;Graphshell projection receipt&lt;/title&gt;
&lt;style&gt;
:root{color-scheme:dark;--ink:#f4eedf;--muted:#9eacb4;--line:#314756;--deep:#09141d;--panel:#10212c;--gold:#d8a657;--ok:#65bd85;--bad:#e46d5c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0%,#193448 0,transparent 38%),linear-gradient(150deg,#071019,#0b1720 50%,#0d1b24);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif}.shell{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:48px 0 64px}header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:26px}.eyebrow{margin:0 0 9px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(32px,5vw,54px);letter-spacing:-.04em;line-height:1.03}.lede{max-width:720px;margin:14px 0 0;color:#b9c5ca;font-size:17px}.session{align-self:start;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:#b9c5ca;background:#0a1821;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.projection{border:1px solid var(--line);border-radius:22px;background:rgba(13,29,39,.96);box-shadow:0 18px 55px rgba(0,0,0,.25);overflow:hidden}.projection-head{display:flex;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}.status{color:#b9d5c5;font-size:12px}.scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.scene.positioned{position:relative;display:block;height:760px;padding:0;background:radial-gradient(circle at 50% 48%,rgba(44,79,99,.24),transparent 54%),linear-gradient(rgba(69,100,116,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,100,116,.08) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.routes line{stroke:#527487;stroke-width:.45;vector-effect:non-scaling-stroke}.placed{position:absolute;width:42%;transform:translate(-50%,-50%);z-index:1}.placed .item{box-shadow:0 14px 35px rgba(0,0,0,.28)}.item{position:relative;min-width:0;min-height:176px;border:1px solid #38505f;border-radius:16px;background:var(--panel);overflow:hidden}.card{padding:21px}.card-top{display:flex;justify-content:space-between;gap:14px}.card-kicker{color:#79a9be;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.card h3,.glyph h3,.placeholder h3{margin:4px 0 14px;font-size:21px}.badges,.actions{display:flex;flex-wrap:wrap;gap:7px}.badge{border:1px solid #415b6b;border-radius:999px;padding:4px 8px;color:#c4d2d8;background:#132a37;font-size:11px}dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}dl div{border-left:2px solid #34566a;padding-left:10px}dt{color:var(--muted);font-size:11px;text-transform:uppercase}dd{margin:3px 0 0;font-weight:650;overflow-wrap:anywhere}.glyph{display:grid;grid-template-columns:64px 1fr;gap:15px;align-items:center;padding:24px}.glyph-mark{display:grid;place-items:center;width:64px;height:64px;border:1px solid #7a653e;border-radius:20px;color:var(--gold);font-size:32px}.image{display:flex;flex-direction:column}.image img{display:block;width:100%;height:176px;object-fit:cover}.image-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 14px}.placeholder{display:grid;place-items:center;text-align:center;padding:26px}.placeholder-mark{font-size:32px;color:#718795}button{border:1px solid #566f7e;border-radius:10px;padding:8px 11px;background:#1a3443;color:var(--ink);font:inherit;font-size:12px;font-weight:700}.receipts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.receipt{border:1px solid var(--line);border-radius:14px;padding:15px;background:#0b1922}.receipt strong{display:block}.receipt p{margin:5px 0 0;color:var(--muted);font-size:13px}.accepted{color:var(--ok)}.rejected{color:var(--bad)}@media(max-width:720px){.shell{width:min(100% - 24px,620px);padding-top:28px}header{grid-template-columns:1fr}.session{justify-self:start}.scene,.receipts{grid-template-columns:1fr}.scene.positioned{display:grid;height:auto;padding:18px;background:transparent}.scene.positioned .routes{display:none}.scene.positioned .placed{position:relative;left:auto!important;top:auto!important;width:auto;transform:none}.scene.positioned .placed .item{box-shadow:none}}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main class=&quot;shell&quot;&gt;
&lt;header&gt;&lt;div&gt;&lt;p class=&quot;eyebrow&quot;&gt;Graphshell · G4&lt;/p&gt;&lt;h1&gt;Player overmap&lt;/h1&gt;&lt;p class=&quot;lede&quot;&gt;Isometry disclosed this scene through the shared projection protocol.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;session&quot;&gt;loopback:isometry:overmap&lt;/div&gt;&lt;/header&gt;&lt;section class=&quot;projection&quot;&gt;&lt;div class=&quot;projection-head&quot;&gt;&lt;strong&gt;Disclosed scene&lt;/strong&gt;&lt;span class=&quot;status&quot;&gt;Live · 3 items&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;scene positioned&quot;&gt;&lt;svg class=&quot;routes&quot; viewBox=&quot;0 0 100 100&quot; preserveAspectRatio=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;line x1=&quot;50.000&quot; y1=&quot;20.000&quot; x2=&quot;76.000&quot; y2=&quot;80.000&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;24.000&quot; y1=&quot;60.000&quot; x2=&quot;50.000&quot; y2=&quot;20.000&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;div class=&quot;placed&quot; style=&quot;left:24.000%;top:60.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Harbour&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Harbour&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;overmap&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Place&lt;/dt&gt;&lt;dd&gt;harbour&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Party&lt;/dt&gt;&lt;dd&gt;Here&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.frame-projection&quot; title=&quot;Frame the disclosed player overmap.&quot;&gt;Frame map&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.travel&quot; title=&quot;Ask the campaign authority to move the party.&quot;&gt;Travel here&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:50.000%;top:20.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Glass Moor&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Glass Moor&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;overmap&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Place&lt;/dt&gt;&lt;dd&gt;moor&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Party&lt;/dt&gt;&lt;dd&gt;Discovered&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.frame-projection&quot; title=&quot;Frame the disclosed player overmap.&quot;&gt;Frame map&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.travel&quot; title=&quot;Ask the campaign authority to move the party.&quot;&gt;Travel here&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:76.000%;top:80.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;Old Observatory&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;Old Observatory&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;overmap&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Place&lt;/dt&gt;&lt;dd&gt;observatory&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Party&lt;/dt&gt;&lt;dd&gt;Discovered&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.frame-projection&quot; title=&quot;Frame the disclosed player overmap.&quot;&gt;Frame map&lt;/button&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.travel&quot; title=&quot;Ask the campaign authority to move the party.&quot;&gt;Travel here&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section class=&quot;receipts&quot; aria-label=&quot;Intent receipts&quot;&gt;&lt;article class=&quot;receipt&quot;&gt;&lt;strong&gt;Frame map&lt;/strong&gt;&lt;span class=&quot;accepted&quot;&gt;Accepted&lt;/span&gt;&lt;p&gt;The endpoint admitted and lowered the advertised intent.&lt;/p&gt;&lt;/article&gt;&lt;article class=&quot;receipt&quot;&gt;&lt;strong&gt;Travel here&lt;/strong&gt;&lt;span class=&quot;rejected&quot;&gt;Rejected&lt;/span&gt;&lt;p&gt;the player projection grant is read-only for campaign travel&lt;/p&gt;&lt;/article&gt;&lt;/section&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;
" hidden></iframe><iframe id="session-2" title="Isometry · Moor crossing" srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
&lt;title&gt;Graphshell projection receipt&lt;/title&gt;
&lt;style&gt;
:root{color-scheme:dark;--ink:#f4eedf;--muted:#9eacb4;--line:#314756;--deep:#09141d;--panel:#10212c;--gold:#d8a657;--ok:#65bd85;--bad:#e46d5c}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% 0%,#193448 0,transparent 38%),linear-gradient(150deg,#071019,#0b1720 50%,#0d1b24);color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,&quot;Segoe UI&quot;,sans-serif}.shell{width:min(1100px,calc(100% - 40px));margin:0 auto;padding:48px 0 64px}header{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:26px}.eyebrow{margin:0 0 9px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(32px,5vw,54px);letter-spacing:-.04em;line-height:1.03}.lede{max-width:720px;margin:14px 0 0;color:#b9c5ca;font-size:17px}.session{align-self:start;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:#b9c5ca;background:#0a1821;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.projection{border:1px solid var(--line);border-radius:22px;background:rgba(13,29,39,.96);box-shadow:0 18px 55px rgba(0,0,0,.25);overflow:hidden}.projection-head{display:flex;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}.status{color:#b9d5c5;font-size:12px}.scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.scene.positioned{position:relative;display:block;height:760px;padding:0;background:radial-gradient(circle at 50% 48%,rgba(44,79,99,.24),transparent 54%),linear-gradient(rgba(69,100,116,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(69,100,116,.08) 1px,transparent 1px);background-size:auto,32px 32px,32px 32px}.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.routes line{stroke:#527487;stroke-width:.45;vector-effect:non-scaling-stroke}.placed{position:absolute;width:42%;transform:translate(-50%,-50%);z-index:1}.placed .item{box-shadow:0 14px 35px rgba(0,0,0,.28)}.item{position:relative;min-width:0;min-height:176px;border:1px solid #38505f;border-radius:16px;background:var(--panel);overflow:hidden}.card{padding:21px}.card-top{display:flex;justify-content:space-between;gap:14px}.card-kicker{color:#79a9be;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.card h3,.glyph h3,.placeholder h3{margin:4px 0 14px;font-size:21px}.badges,.actions{display:flex;flex-wrap:wrap;gap:7px}.badge{border:1px solid #415b6b;border-radius:999px;padding:4px 8px;color:#c4d2d8;background:#132a37;font-size:11px}dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}dl div{border-left:2px solid #34566a;padding-left:10px}dt{color:var(--muted);font-size:11px;text-transform:uppercase}dd{margin:3px 0 0;font-weight:650;overflow-wrap:anywhere}.glyph{display:grid;grid-template-columns:64px 1fr;gap:15px;align-items:center;padding:24px}.glyph-mark{display:grid;place-items:center;width:64px;height:64px;border:1px solid #7a653e;border-radius:20px;color:var(--gold);font-size:32px}.image{display:flex;flex-direction:column}.image img{display:block;width:100%;height:176px;object-fit:cover}.image-meta{display:flex;justify-content:space-between;gap:12px;padding:12px 14px}.placeholder{display:grid;place-items:center;text-align:center;padding:26px}.placeholder-mark{font-size:32px;color:#718795}button{border:1px solid #566f7e;border-radius:10px;padding:8px 11px;background:#1a3443;color:var(--ink);font:inherit;font-size:12px;font-weight:700}.receipts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}.receipt{border:1px solid var(--line);border-radius:14px;padding:15px;background:#0b1922}.receipt strong{display:block}.receipt p{margin:5px 0 0;color:var(--muted);font-size:13px}.accepted{color:var(--ok)}.rejected{color:var(--bad)}@media(max-width:720px){.shell{width:min(100% - 24px,620px);padding-top:28px}header{grid-template-columns:1fr}.session{justify-self:start}.scene,.receipts{grid-template-columns:1fr}.scene.positioned{display:grid;height:auto;padding:18px;background:transparent}.scene.positioned .routes{display:none}.scene.positioned .placed{position:relative;left:auto!important;top:auto!important;width:auto;transform:none}.scene.positioned .placed .item{box-shadow:none}}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main class=&quot;shell&quot;&gt;
&lt;header&gt;&lt;div&gt;&lt;p class=&quot;eyebrow&quot;&gt;Graphshell · G4&lt;/p&gt;&lt;h1&gt;Moor crossing&lt;/h1&gt;&lt;p class=&quot;lede&quot;&gt;Isometry disclosed this scene through the shared projection protocol.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;session&quot;&gt;loopback:isometry:tile-board&lt;/div&gt;&lt;/header&gt;&lt;section class=&quot;projection&quot;&gt;&lt;div class=&quot;projection-head&quot;&gt;&lt;strong&gt;Disclosed scene&lt;/strong&gt;&lt;span class=&quot;status&quot;&gt;Live · 4 items&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;scene positioned&quot;&gt;&lt;svg class=&quot;routes&quot; viewBox=&quot;0 0 100 100&quot; preserveAspectRatio=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;/svg&gt;&lt;div class=&quot;placed&quot; style=&quot;left:24.000%;top:20.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;grass tile&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;grass tile&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;tile-board&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Cell&lt;/dt&gt;&lt;dd&gt;0, 0&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Map&lt;/dt&gt;&lt;dd&gt;Moor crossing&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.inspect-tile&quot; title=&quot;Focus the disclosed tile without changing the campaign.&quot;&gt;Inspect tile&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:41.333%;top:20.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;grass tile&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;grass tile&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;tile-board&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Cell&lt;/dt&gt;&lt;dd&gt;1, 0&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Map&lt;/dt&gt;&lt;dd&gt;Moor crossing&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.inspect-tile&quot; title=&quot;Focus the disclosed tile without changing the campaign.&quot;&gt;Inspect tile&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:58.667%;top:50.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;stone tile&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;stone tile&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;tile-board&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Cell&lt;/dt&gt;&lt;dd&gt;2, 1&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Map&lt;/dt&gt;&lt;dd&gt;Moor crossing&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.inspect-tile&quot; title=&quot;Focus the disclosed tile without changing the campaign.&quot;&gt;Inspect tile&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;div class=&quot;placed&quot; style=&quot;left:76.000%;top:80.000%&quot;&gt;&lt;article class=&quot;item card&quot; aria-label=&quot;grass tile&quot;&gt;&lt;div class=&quot;card-top&quot;&gt;&lt;div&gt;&lt;span class=&quot;card-kicker&quot;&gt;Portable card&lt;/span&gt;&lt;h3&gt;grass tile&lt;/h3&gt;&lt;/div&gt;&lt;div class=&quot;badges&quot;&gt;&lt;span class=&quot;badge&quot;&gt;tile-board&lt;/span&gt;&lt;span class=&quot;badge&quot;&gt;player-visible&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;dl&gt;&lt;div&gt;&lt;dt&gt;Cell&lt;/dt&gt;&lt;dd&gt;3, 2&lt;/dd&gt;&lt;/div&gt;&lt;div&gt;&lt;dt&gt;Map&lt;/dt&gt;&lt;dd&gt;Moor crossing&lt;/dd&gt;&lt;/div&gt;&lt;/dl&gt;&lt;div class=&quot;actions&quot;&gt;&lt;button type=&quot;button&quot; data-intent=&quot;isometry.inspect-tile&quot; title=&quot;Focus the disclosed tile without changing the campaign.&quot;&gt;Inspect tile&lt;/button&gt;&lt;/div&gt;&lt;/article&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section class=&quot;receipts&quot; aria-label=&quot;Intent receipts&quot;&gt;&lt;article class=&quot;receipt&quot;&gt;&lt;strong&gt;Inspect tile&lt;/strong&gt;&lt;span class=&quot;accepted&quot;&gt;Accepted&lt;/span&gt;&lt;p&gt;The endpoint admitted and lowered the advertised intent.&lt;/p&gt;&lt;/article&gt;&lt;/section&gt;&lt;/main&gt;&lt;/body&gt;&lt;/html&gt;
" hidden></iframe></main><script>
const tabs=[...document.querySelectorAll('[role=tab]')];
for(const tab of tabs){tab.addEventListener('click',()=>{for(const item of tabs){const active=item===tab;item.setAttribute('aria-selected',active);document.getElementById(item.dataset.session).hidden=!active;}});}
</script></body></html>