\n\n\n\n\n\n\n\n\n\n\nAnwar-UIC

Anwar-UIC

Welcome to uTap.

Welcome Fawaxx

AI Babysitter at Astralavista Baby

<body>  <div class="profile-shell"> <section class="hero-card" role="region" aria-labelledby="profile-headline">  <div class="bg-blob blob-blue"></div> <div class="bg-blob blob-pink"></div>  <div class="avatar-wrapper" aria-hidden="false"> <div class="avatar-ring" aria-hidden="true"></div> <div class="avatar" aria-label="User avatar initials">WE</div> </div>  <div class="text-block"> <h1 class="headline" id="profile-headline"> <span class="headline-top">Welcome</span> <span class="headline-bottom">Fawaxx</span> </h1> <div class="role typewriter" aria-live="polite"> <span class="typing-text">AI Babysitter at Astralavista Baby</span> <span class="caret" aria-hidden="true"></span> </div> </div> </section> </div>  <script type="module" data-utap-ui=""> const PAGE = "test123"; const d = document; // --- tiny DOM helpers ------------------------------------------------------- const $ = (sel,root=d)=> root.querySelector(sel); const el = (tag, attrs={})=>{ const n=d.createElement(tag); for(const k in attrs){ if(k==='style') Object.assign(n.style, attrs[k]); else n.setAttribute(k, attrs[k]); } return n; }; const enc = s => s.split('/').map(encodeURIComponent).join('/'); // --- event bus (fanout map<string,fn[]>) ------------------------------------ const bus = (()=>{ const m=new Map(); return { on:(t,f)=>{(m.get(t)||m.set(t,[]).get(t)).push(f)}, emit:(t,p)=>{(m.get(t)||[]).forEach(f=>{try{f(p)}catch{}})} }})(); // --- registry for late-loaded capabilities --------------------------------- const registry = { services: new Map(), // name -> fn(ctx) or object views: new Map(), // id -> mount(ctx) commands: [], // [{id,label,where,when,run}] }; // --- pre-boot progress bar -------------------------------------------------- // Goal: show clear but low-friction feedback while we import() editor facets. // Shape: a 3px bar stuck to the top edge of viewport. // Lifecycle: create now, tick during module imports, fade+remove on ready. // Marked data-utap-ui so it never persists into saved HTML. function makeBootBar(){ const bar = d.createElement('div'); bar.id = 'utap-bootbar'; bar.setAttribute('data-utap-ui',''); Object.assign(bar.style, { position:'fixed', left:'0', top:'0', height:'3px', width:'0%', background:'#34d399', // same green as --ok boxShadow:'0 0 16px rgba(52,211,153,.6)', zIndex:'2147483643', // above everything else transition:'width .15s ease-out,opacity .3s ease-out' }); // append early so user sees feedback instantly ;(d.body || d.documentElement).appendChild(bar); // progress model: // - update(i,total): map [0,total] -> [10%,90%] so it never sits at 0% forever // - done(): animate to 100%, fade, then remove. function pctFor(i,total){ if(!total) return 90; const base = 10; const span = 80; const raw = base + span * (i/total); return Math.min(99, Math.max(base, Math.round(raw))); } function update(i,total){ bar.style.width = pctFor(i,total) + '%'; } function done(){ bar.style.width='100%'; bar.style.opacity='0'; setTimeout(()=>{ if(bar.parentNode) bar.remove(); },300); } return { update, done }; } const bootbar = makeBootBar(); // --- IO surface exposed to caps -------------------------------------------- // These services are filled in by facets later, but we stub minimal fallbacks // so early code can call them without exploding. const io = { fetch: (...a)=>fetch(...a), save: async()=> bus.emit('save-now'), pickFile: (opts={}) => new Promise(res=>{ const inp=d.createElement('input'); inp.type='file'; if(opts.multiple) inp.multiple=true; if(opts.accept) inp.accept=opts.accept; inp.onchange=()=> res(opts.multiple? Array.from(inp.files||[]): (inp.files[0]||null)); inp.click(); }), clipWrite: async (s)=> navigator.clipboard.writeText(String(s||'')), notify: (msg, ms=1200) => { const t = registry.services.get('toast'); t ? t(msg, ms) : console.log('[uTap]', msg); }, }; // --- stable editor anchors -------------------------------------------------- const anchors = { style: el('style', {id:'utap-style','data-utap-ui':''}), hl: el('div', {id:'utap-hl','data-utap-ui':''}), bubble: el('div', {id:'utap-bubble','data-utap-ui':''}), toast: el('div', {id:'utap-toast','data-utap-ui':''}), elli: el('div', {id:'utap-ellipsis','data-utap-ui':''}), ellipanel: el('div', {id:'utap-ellipanel','data-utap-ui':''}), panel: el('div', {id:'utap-panel','data-utap-ui':''}), paste: el('div', {id:'utap-pastepad','data-utap-ui':''}), progress: el('div', {id:'utap-progress','data-utap-ui':''}), shield: el('div', {id:'utap-clickshield','data-utap-ui':''}), shelf: el('div', {id:'utap-shelf','data-utap-ui':''}), blocks: el('div', {id:'utap-blocks-menu','data-utap-ui':''}), }; d.head.appendChild(anchors.style); for(const k of Object.keys(anchors)) if(k!=='style') d.body.appendChild(anchors[k]); // --- ctx: the world we hand to every facet --------------------------------- const ctx = { doc:d, win:window, page:PAGE, io, bus, $, el, enc, anchors, registry, state:Object.create(null) }; // --- registration helpers (caps call these to plug themselves in) ---------- const register = { service:(name,fn)=> registry.services.set(name,fn), view: (id,fn)=> registry.views.set(id,fn), command:(c)=> registry.commands.push(c), }; // --- facet discovery: page-local first (override wins), then canonical ----- async function listLocal(){ const r = await fetch( '/api/page_files?name='+encodeURIComponent(PAGE)+ '&prefix='+encodeURIComponent('caps/editor/') ); const j = await r.json(); return (j.files||[]) .filter(p=>p.endsWith('.js')) .map(p=>('/'+PAGE+'/'+p.split('/').map(encodeURIComponent).join('/'))); } async function listCanon(){ const r = await fetch('/x/blocks/list?prefix='+encodeURIComponent('caps/editor/')); const j = await r.json(); const arr = Array.isArray(j.files) ? j.files : []; return arr .filter(p=>p.endsWith('.js')) .map(p=>('/x/blocks/raw/'+enc(p))); } // --- boot: load facets, mount views, announce ready ------------------------ async function boot(){ const toast = (msg)=> console && console.warn && console.warn('[facet]', msg); // discover modules: local first (override), then canonical const urls = [...new Set([...(await listLocal()), ...(await listCanon())])]; // let the bar know total upfront const total = urls.length || 1; bootbar.update(0, total); // import/activate each facet serially so ordering is deterministic for(let i=0; i<urls.length; i++){ const u = urls[i]; try{ const mod = await import(u); const install = mod?.default || mod?.install || mod?.run; // IMPORTANT: // We intentionally DO NOT mutate `mod` here. // ES module namespace objects are immutable in strict mode, // and assigning (e.g. mod.__src = u) will throw and kill boot. if(typeof install==='function') await install({ctx, register}); }catch(e){ toast('load failed '+u); } // advance bar after each module attempt (success OR fail) bootbar.update(i+1, total); } // mount all registered views registry.views.forEach(fn=>{ try{ fn(ctx); }catch{} }); // signal that editor kernel is live bus.emit('kernel:ready', ctx); // finish + hide loading bar bootbar.done(); } boot(); </script> <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"version":"2024.11.0","token":"75d6363e2d334c228f4c2c5cf5931c6f","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}" crossorigin="anonymous"></script> <div id="utap-hl" data-utap-ui="" style="display: block; left: 0px; top: 0px; width: 1195px; height: 966.5px;"></div><div id="utap-bubble" data-utap-ui="" style="width: 520px; max-width: 520px; display: flex; left: 53px; top: 539px; pointer-events: auto;" class="expanded"><button data-act="deselect">×</button><button data-act="copy">Copy</button><button data-act="paste">Paste</button><button data-act="add-block">+</button><button data-act="cut">Cut</button><button data-act="del">Delete</button><button data-act="parent" style="">↑</button><button data-act="expand-toggle">Collapse</button><button data-act="pin-toggle">Unpin</button><button data-act="cap" class="cap" style="display: none;">Edit</button><button data-act="cap" class="cap" style="display: none;">Edit Link</button><button data-act="cap" class="cap" style="display: none;">Move ↓</button><button data-act="cap" class="cap" style="">Move ↑</button><button data-act="cap" class="cap">Paste before</button><button data-act="cap" class="cap" style="display: none;">Replace</button><button data-act="cap" class="cap">Send → Storage</button><button data-act="cap" class="cap" style="display: none;">Layout</button></div><div id="utap-toast" data-utap-ui="" style="display: none;">Deleted. <button id="utap-undo">Undo</button></div><div id="utap-ellipsis" data-utap-ui="">⋯</div><div id="utap-ellipanel" data-utap-ui="" style="display: none;"> <button data-act="view">Open Viewer</button> <button data-act="export">Export .zip</button> <button data-act="history">History</button> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <div id="utap-pagecaps-head" class="small" style="display: block; opacity: 0.8; margin: 4px 2px; color: rgb(255, 255, 255);">Page actions</div> <div id="utap-pagecaps" class="row" style="display: flex; gap: 6px; flex-wrap: wrap;"><button data-cap="page">Toggle Preview</button></div> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <button data-act="sharing">Explore Public</button> <button data-act="storage">Browse Storage</button> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <button data-act="manage">⚙ Manage caps</button> </div><div id="utap-panel" data-utap-ui="" style="display: none;"></div><div id="utap-pastepad" data-utap-ui=""> <div style="font-weight:600;margin-bottom:6px">Paste</div> <textarea id="utap-pastebox" placeholder="Paste HTML / full page / snippet / script here…" spellcheck="false"></textarea> <div class="row"> <button id="utap-paste-cancel">Cancel</button> <button id="utap-paste-insert">Insert</button> </div></div><div style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 85.3516px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 85.3516px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 192px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px; margin: 0px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: none; max-width: none; min-block-size: auto; min-height: auto; min-inline-size: auto; min-width: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: visible; overflow-clip-margin: 0px; overflow-inline: visible; overflow-wrap: normal; overflow: visible; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 96px 42.6719px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 96px 42.6758px; transform-style: flat; translate: none; unicode-bidi: isolate; user-select: auto; vector-effect: none; vertical-align: baseline; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 192px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"><img src="https://utap.world/utap/images/256px.png" loading="lazy" width="49" alt="" class="image-2" style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 49px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline-block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 49px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 49px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px 20px; margin: 0px 0px 20px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: 100%; max-width: 100%; min-block-size: 0px; min-height: 0px; min-inline-size: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: clip; overflow-clip-margin: content-box; overflow-inline: clip; overflow-wrap: normal; overflow: clip; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 24.5px 24.5px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 24.5px 24.5px; transform-style: flat; translate: none; unicode-bidi: normal; user-select: auto; vector-effect: none; vertical-align: middle; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 49px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"><img src="https://utap.world/utap/images/whiteBrand.png" loading="lazy" width="143" alt="" class="image-2" style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 65.3516px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline-block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 65.3516px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 143px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px 20px; margin: 0px 0px 20px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: 100%; max-width: 100%; min-block-size: 0px; min-height: 0px; min-inline-size: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: clip; overflow-clip-margin: content-box; overflow-inline: clip; overflow-wrap: normal; overflow: clip; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 71.5px 32.6719px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 71.5px 32.6758px; transform-style: flat; translate: none; unicode-bidi: normal; user-select: auto; vector-effect: none; vertical-align: middle; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 143px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"></div><div id="utap-progress" data-utap-ui="" style="display: none;"> <div class="row"><div id="utap-p-label">Uploading…</div><div id="utap-p-pct">100%</div></div> <div class="bar"><div id="utap-p-bar" class="fill" style="width: 100%;"></div></div> <div id="utap-p-list" style="margin-top:8px"></div></div><div id="utap-clickshield" data-utap-ui="" style="display: none;"></div><div id="utap-shelf" data-utap-ui=""></div><div id="utap-blocks-menu" data-utap-ui="" style="display: none; inset: 617px auto auto 53px;"> <div class="row"> <b style="font:12px/1 ui-sans-serif">Blocks</b> <input id="blk-q" placeholder="filter…"> <button id="blk-x" title="Close">×</button> </div> <div id="blk-list" class="mut"><div class="item" data-path="atoms/box.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">atoms/box.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="atoms/link.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">atoms/link.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="oldies/utap-logo.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">oldies/utap-logo.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display: none; margin-top: 6px; border: 1px solid rgb(42, 47, 54); border-radius: 8px; overflow: hidden;"></div> </div><div class="item" data-path="social/bio.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">social/bio.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="social/facebook.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">social/facebook.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div></div></div></body><body>  <div class="profile-shell"> <section class="hero-card" role="region" aria-labelledby="profile-headline">  <div class="bg-blob blob-blue"></div> <div class="bg-blob blob-pink"></div>  <div class="avatar-wrapper" aria-hidden="false"> <div class="avatar-ring" aria-hidden="true"></div> <div class="avatar" aria-label="User avatar initials">WE</div> </div>  <div class="text-block"> <h1 class="headline" id="profile-headline"> <span class="headline-top">Welcome</span> <span class="headline-bottom">Fawaxx</span> </h1> <div class="role typewriter" aria-live="polite"> <span class="typing-text">AI Babysitter at Astralavista Baby</span> <span class="caret" aria-hidden="true"></span> </div> </div> </section> </div>  <script type="module" data-utap-ui=""> const PAGE = "test123"; const d = document; // --- tiny DOM helpers ------------------------------------------------------- const $ = (sel,root=d)=> root.querySelector(sel); const el = (tag, attrs={})=>{ const n=d.createElement(tag); for(const k in attrs){ if(k==='style') Object.assign(n.style, attrs[k]); else n.setAttribute(k, attrs[k]); } return n; }; const enc = s => s.split('/').map(encodeURIComponent).join('/'); // --- event bus (fanout map<string,fn[]>) ------------------------------------ const bus = (()=>{ const m=new Map(); return { on:(t,f)=>{(m.get(t)||m.set(t,[]).get(t)).push(f)}, emit:(t,p)=>{(m.get(t)||[]).forEach(f=>{try{f(p)}catch{}})} }})(); // --- registry for late-loaded capabilities --------------------------------- const registry = { services: new Map(), // name -> fn(ctx) or object views: new Map(), // id -> mount(ctx) commands: [], // [{id,label,where,when,run}] }; // --- pre-boot progress bar -------------------------------------------------- // Goal: show clear but low-friction feedback while we import() editor facets. // Shape: a 3px bar stuck to the top edge of viewport. // Lifecycle: create now, tick during module imports, fade+remove on ready. // Marked data-utap-ui so it never persists into saved HTML. function makeBootBar(){ const bar = d.createElement('div'); bar.id = 'utap-bootbar'; bar.setAttribute('data-utap-ui',''); Object.assign(bar.style, { position:'fixed', left:'0', top:'0', height:'3px', width:'0%', background:'#34d399', // same green as --ok boxShadow:'0 0 16px rgba(52,211,153,.6)', zIndex:'2147483643', // above everything else transition:'width .15s ease-out,opacity .3s ease-out' }); // append early so user sees feedback instantly ;(d.body || d.documentElement).appendChild(bar); // progress model: // - update(i,total): map [0,total] -> [10%,90%] so it never sits at 0% forever // - done(): animate to 100%, fade, then remove. function pctFor(i,total){ if(!total) return 90; const base = 10; const span = 80; const raw = base + span * (i/total); return Math.min(99, Math.max(base, Math.round(raw))); } function update(i,total){ bar.style.width = pctFor(i,total) + '%'; } function done(){ bar.style.width='100%'; bar.style.opacity='0'; setTimeout(()=>{ if(bar.parentNode) bar.remove(); },300); } return { update, done }; } const bootbar = makeBootBar(); // --- IO surface exposed to caps -------------------------------------------- // These services are filled in by facets later, but we stub minimal fallbacks // so early code can call them without exploding. const io = { fetch: (...a)=>fetch(...a), save: async()=> bus.emit('save-now'), pickFile: (opts={}) => new Promise(res=>{ const inp=d.createElement('input'); inp.type='file'; if(opts.multiple) inp.multiple=true; if(opts.accept) inp.accept=opts.accept; inp.onchange=()=> res(opts.multiple? Array.from(inp.files||[]): (inp.files[0]||null)); inp.click(); }), clipWrite: async (s)=> navigator.clipboard.writeText(String(s||'')), notify: (msg, ms=1200) => { const t = registry.services.get('toast'); t ? t(msg, ms) : console.log('[uTap]', msg); }, }; // --- stable editor anchors -------------------------------------------------- const anchors = { style: el('style', {id:'utap-style','data-utap-ui':''}), hl: el('div', {id:'utap-hl','data-utap-ui':''}), bubble: el('div', {id:'utap-bubble','data-utap-ui':''}), toast: el('div', {id:'utap-toast','data-utap-ui':''}), elli: el('div', {id:'utap-ellipsis','data-utap-ui':''}), ellipanel: el('div', {id:'utap-ellipanel','data-utap-ui':''}), panel: el('div', {id:'utap-panel','data-utap-ui':''}), paste: el('div', {id:'utap-pastepad','data-utap-ui':''}), progress: el('div', {id:'utap-progress','data-utap-ui':''}), shield: el('div', {id:'utap-clickshield','data-utap-ui':''}), shelf: el('div', {id:'utap-shelf','data-utap-ui':''}), blocks: el('div', {id:'utap-blocks-menu','data-utap-ui':''}), }; d.head.appendChild(anchors.style); for(const k of Object.keys(anchors)) if(k!=='style') d.body.appendChild(anchors[k]); // --- ctx: the world we hand to every facet --------------------------------- const ctx = { doc:d, win:window, page:PAGE, io, bus, $, el, enc, anchors, registry, state:Object.create(null) }; // --- registration helpers (caps call these to plug themselves in) ---------- const register = { service:(name,fn)=> registry.services.set(name,fn), view: (id,fn)=> registry.views.set(id,fn), command:(c)=> registry.commands.push(c), }; // --- facet discovery: page-local first (override wins), then canonical ----- async function listLocal(){ const r = await fetch( '/api/page_files?name='+encodeURIComponent(PAGE)+ '&prefix='+encodeURIComponent('caps/editor/') ); const j = await r.json(); return (j.files||[]) .filter(p=>p.endsWith('.js')) .map(p=>('/'+PAGE+'/'+p.split('/').map(encodeURIComponent).join('/'))); } async function listCanon(){ const r = await fetch('/x/blocks/list?prefix='+encodeURIComponent('caps/editor/')); const j = await r.json(); const arr = Array.isArray(j.files) ? j.files : []; return arr .filter(p=>p.endsWith('.js')) .map(p=>('/x/blocks/raw/'+enc(p))); } // --- boot: load facets, mount views, announce ready ------------------------ async function boot(){ const toast = (msg)=> console && console.warn && console.warn('[facet]', msg); // discover modules: local first (override), then canonical const urls = [...new Set([...(await listLocal()), ...(await listCanon())])]; // let the bar know total upfront const total = urls.length || 1; bootbar.update(0, total); // import/activate each facet serially so ordering is deterministic for(let i=0; i<urls.length; i++){ const u = urls[i]; try{ const mod = await import(u); const install = mod?.default || mod?.install || mod?.run; // IMPORTANT: // We intentionally DO NOT mutate `mod` here. // ES module namespace objects are immutable in strict mode, // and assigning (e.g. mod.__src = u) will throw and kill boot. if(typeof install==='function') await install({ctx, register}); }catch(e){ toast('load failed '+u); } // advance bar after each module attempt (success OR fail) bootbar.update(i+1, total); } // mount all registered views registry.views.forEach(fn=>{ try{ fn(ctx); }catch{} }); // signal that editor kernel is live bus.emit('kernel:ready', ctx); // finish + hide loading bar bootbar.done(); } boot(); </script> <script defer="" src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon="{"version":"2024.11.0","token":"75d6363e2d334c228f4c2c5cf5931c6f","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}" crossorigin="anonymous"></script> <div id="utap-hl" data-utap-ui="" style="display: block; left: 0px; top: 0px; width: 1195px; height: 966.5px;"></div><div id="utap-bubble" data-utap-ui="" style="width: 520px; max-width: 520px; display: flex; left: 53px; top: 539px; pointer-events: auto;" class="expanded"><button data-act="deselect">×</button><button data-act="copy">Copy</button><button data-act="paste">Paste</button><button data-act="add-block">+</button><button data-act="cut">Cut</button><button data-act="del">Delete</button><button data-act="parent" style="">↑</button><button data-act="expand-toggle">Collapse</button><button data-act="pin-toggle">Unpin</button><button data-act="cap" class="cap" style="display: none;">Edit</button><button data-act="cap" class="cap" style="display: none;">Edit Link</button><button data-act="cap" class="cap" style="display: none;">Move ↓</button><button data-act="cap" class="cap" style="">Move ↑</button><button data-act="cap" class="cap">Paste before</button><button data-act="cap" class="cap" style="display: none;">Replace</button><button data-act="cap" class="cap">Send → Storage</button><button data-act="cap" class="cap" style="display: none;">Layout</button></div><div id="utap-toast" data-utap-ui="" style="display: none;">Deleted. <button id="utap-undo">Undo</button></div><div id="utap-ellipsis" data-utap-ui="">⋯</div><div id="utap-ellipanel" data-utap-ui="" style="display: none;"> <button data-act="view">Open Viewer</button> <button data-act="export">Export .zip</button> <button data-act="history">History</button> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <div id="utap-pagecaps-head" class="small" style="display: block; opacity: 0.8; margin: 4px 2px; color: rgb(255, 255, 255);">Page actions</div> <div id="utap-pagecaps" class="row" style="display: flex; gap: 6px; flex-wrap: wrap;"><button data-cap="page">Toggle Preview</button></div> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <button data-act="sharing">Explore Public</button> <button data-act="storage">Browse Storage</button> <hr style="border:0;border-top:1px solid #2a2f36;margin:6px 0"> <button data-act="manage">⚙ Manage caps</button> </div><div id="utap-panel" data-utap-ui="" style="display: none;"></div><div id="utap-pastepad" data-utap-ui=""> <div style="font-weight:600;margin-bottom:6px">Paste</div> <textarea id="utap-pastebox" placeholder="Paste HTML / full page / snippet / script here…" spellcheck="false"></textarea> <div class="row"> <button id="utap-paste-cancel">Cancel</button> <button id="utap-paste-insert">Insert</button> </div></div><div style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 85.3516px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 85.3516px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 192px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px; margin: 0px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: none; max-width: none; min-block-size: auto; min-height: auto; min-inline-size: auto; min-width: auto; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: visible; overflow-clip-margin: 0px; overflow-inline: visible; overflow-wrap: normal; overflow: visible; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 96px 42.6719px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 96px 42.6758px; transform-style: flat; translate: none; unicode-bidi: isolate; user-select: auto; vector-effect: none; vertical-align: baseline; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 192px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"><img src="https://utap.world/utap/images/256px.png" loading="lazy" width="49" alt="" class="image-2" style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 49px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline-block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 49px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 49px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px 20px; margin: 0px 0px 20px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: 100%; max-width: 100%; min-block-size: 0px; min-height: 0px; min-inline-size: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: clip; overflow-clip-margin: content-box; overflow-inline: clip; overflow-wrap: normal; overflow: clip; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 24.5px 24.5px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 24.5px 24.5px; transform-style: flat; translate: none; unicode-bidi: normal; user-select: auto; vector-effect: none; vertical-align: middle; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 49px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"><img src="https://utap.world/utap/images/whiteBrand.png" loading="lazy" width="143" alt="" class="image-2" style="animation: 0s ease 0s 1 normal none running none; transition: all; accent-color: auto; place-content: normal; place-items: normal; place-self: auto; alignment-baseline: auto; anchor-name: none; anchor-scope: none; animation-composition: replace; app-region: none; appearance: none; backdrop-filter: none; backface-visibility: visible; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); background-blend-mode: normal; baseline-shift: 0px; baseline-source: auto; block-size: 65.3516px; border-block-end: 0px none rgb(51, 51, 51); border-block-start: 0px none rgb(51, 51, 51); border-color: rgb(51, 51, 51); border-radius: 0px; border-style: none; border-width: 0px; border-collapse: separate; border-end-end-radius: 0px; border-end-start-radius: 0px; border-image: none 100% / 1 / 0 stretch; border-inline-end: 0px none rgb(51, 51, 51); border-inline-start: 0px none rgb(51, 51, 51); border-start-end-radius: 0px; border-start-start-radius: 0px; inset: auto; box-decoration-break: slice; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; buffered-rendering: auto; caption-side: top; caret-animation: auto; caret-color: rgb(51, 51, 51); clear: none; clip: auto; clip-path: none; clip-rule: nonzero; color: rgb(51, 51, 51); color-interpolation: srgb; color-interpolation-filters: linearrgb; color-rendering: auto; columns: auto; gap: normal; column-rule: 0px rgb(51, 51, 51); column-span: none; contain-intrinsic-block-size: none; contain-intrinsic-size: none; contain-intrinsic-inline-size: none; container: none; content: normal; corner-shape: round; corner-block-end-shape: round; corner-block-start-shape: round; cursor: auto; cx: 0px; cy: 0px; d: none; direction: ltr; display: inline-block; dominant-baseline: auto; dynamic-range-limit: no-limit; empty-cells: show; field-sizing: fixed; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; filter: none; flex: 0 1 auto; flex-flow: row; float: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; font-family: Arial, sans-serif; font-kerning: auto; font-optical-sizing: auto; font-palette: normal; font-size: 14px; font-size-adjust: none; font-stretch: 100%; font-style: normal; font-synthesis: weight style small-caps; font-variant: normal; font-weight: 400; grid: none; grid-area: auto; height: 65.3516px; hyphenate-character: auto; hyphenate-limit-chars: auto; hyphens: manual; image-orientation: from-image; image-rendering: auto; initial-letter: normal; inline-size: 143px; inset-block: auto; inset-inline: auto; interactivity: auto; interpolate-size: numeric-only; isolation: auto; letter-spacing: normal; lighting-color: rgb(255, 255, 255); line-break: auto; line-height: 20px; list-style: outside none disc; margin-block: 0px 20px; margin: 0px 0px 20px; margin-inline: 0px; marker: none; mask: none; mask-type: luminance; math-depth: 0; math-shift: normal; math-style: normal; max-block-size: none; max-height: none; max-inline-size: 100%; max-width: 100%; min-block-size: 0px; min-height: 0px; min-inline-size: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; object-view-box: none; offset: normal; opacity: 1; order: 0; orphans: 2; outline: rgb(51, 51, 51) none 0px; outline-offset: 0px; overflow-anchor: auto; overflow-block: clip; overflow-clip-margin: content-box; overflow-inline: clip; overflow-wrap: normal; overflow: clip; overlay: none; overscroll-behavior-block: auto; overscroll-behavior-inline: auto; padding-block: 0px; padding: 0px; padding-inline: 0px; paint-order: normal; perspective: none; perspective-origin: 71.5px 32.6719px; pointer-events: auto; position: static; position-anchor: auto; position-area: none; position-try: none; position-visibility: always; print-color-adjust: economy; r: 0px; reading-flow: normal; reading-order: 0; resize: none; rotate: none; ruby-align: space-around; ruby-position: over; rx: auto; ry: auto; scale: none; scroll-behavior: auto; scroll-initial-target: none; scroll-margin-block: 0px; scroll-margin-inline: 0px; scroll-marker-group: none; scroll-padding-block: auto; scroll-padding-inline: auto; scroll-target-group: none; scroll-timeline: none; scrollbar-color: auto; scrollbar-gutter: auto; scrollbar-width: auto; shape-image-threshold: 0; shape-margin: 0px; shape-outside: none; shape-rendering: auto; speak: normal; stop-color: rgb(0, 0, 0); stop-opacity: 1; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; tab-size: 8; table-layout: auto; text-align: start; text-align-last: auto; text-anchor: start; text-autospace: no-autospace; text-box: normal; text-decoration: rgb(51, 51, 51); text-decoration-skip-ink: auto; text-emphasis: none rgb(51, 51, 51); text-emphasis-position: over; text-indent: 0px; text-overflow: clip; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-spacing-trim: normal; text-transform: none; text-underline-position: auto; text-wrap: wrap; timeline-scope: none; touch-action: auto; transform: none; transform-origin: 71.5px 32.6758px; transform-style: flat; translate: none; unicode-bidi: normal; user-select: auto; vector-effect: none; vertical-align: middle; view-timeline: none; view-transition-class: none; view-transition-group: normal; view-transition-name: none; visibility: visible; white-space-collapse: collapse; widows: 2; width: 143px; will-change: auto; word-break: normal; word-spacing: 0px; writing-mode: horizontal-tb; x: 0px; y: 0px; z-index: auto; zoom: 1; border-spacing: 0px; -webkit-border-image: none; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-font-smoothing: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-mask-box-image-source: none; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-width: auto; -webkit-mask-box-image-outset: 0; -webkit-mask-box-image-repeat: stretch; -webkit-rtl-ordering: logical; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.18); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-fill-color: rgb(51, 51, 51); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke: 0px rgb(51, 51, 51); -webkit-user-drag: auto; -webkit-user-modify: read-only; -webkit-writing-mode: horizontal-tb;;animation:none!important;transition:none!important;"></div><div id="utap-progress" data-utap-ui="" style="display: none;"> <div class="row"><div id="utap-p-label">Uploading…</div><div id="utap-p-pct">100%</div></div> <div class="bar"><div id="utap-p-bar" class="fill" style="width: 100%;"></div></div> <div id="utap-p-list" style="margin-top:8px"></div></div><div id="utap-clickshield" data-utap-ui="" style="display: none;"></div><div id="utap-shelf" data-utap-ui=""></div><div id="utap-blocks-menu" data-utap-ui="" style="display: none; inset: 617px auto auto 53px;"> <div class="row"> <b style="font:12px/1 ui-sans-serif">Blocks</b> <input id="blk-q" placeholder="filter…"> <button id="blk-x" title="Close">×</button> </div> <div id="blk-list" class="mut"><div class="item" data-path="atoms/box.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">atoms/box.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="atoms/link.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">atoms/link.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="oldies/utap-logo.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">oldies/utap-logo.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display: none; margin-top: 6px; border: 1px solid rgb(42, 47, 54); border-radius: 8px; overflow: hidden;"></div> </div><div class="item" data-path="social/bio.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">social/bio.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div><div class="item" data-path="social/facebook.html"> <div style="display:flex;gap:8px;align-items:center;justify-content:space-between"> <code style="flex:1;word-break:break-all">social/facebook.html</code> <button data-act="peek" class="mut" style="font-size:11px">👁 Peek</button> </div> <div class="mut" style="font-size:11px;margin-top:4px">Block</div> <div class="peek" style="display:none;margin-top:6px;border:1px solid #2a2f36;border-radius:8px;overflow:hidden"></div> </div></div></div></body>