edgepress 2026.10.1 → 2026.10.13

package/static/edgepress/fonts.css

@@ -0,0 +1,14 @@
+@import url('/edgepress/fonts/faces.css');
+
+/* Each face has a unicode-range: only characters present on a page load fonts. */
+:root{
+  --edgepress-font-fallback:'Noto Sans SC Variable','Noto Sans TC Variable';
+  --edgepress-font-sans:'Noto Sans Variable',var(--edgepress-font-fallback),sans-serif;
+  --edgepress-font-serif:'Noto Serif Variable',var(--edgepress-font-fallback),serif;
+  --edgepress-font-mono:ui-monospace,SFMono-Regular,Consolas,var(--edgepress-font-fallback),'Noto Sans Variable',monospace;
+}
+:root:lang(zh-Hant),:root:lang(zh-TW),:root:lang(zh-HK),:root:lang(zh-MO){
+  --edgepress-font-fallback:'Noto Sans TC Variable','Noto Sans SC Variable';
+}
+/* The shared viewer's status font also needs local translated glyphs. */
+:root .image-lightbox-status{font-family:var(--edgepress-font-sans)}

package/static/edgepress/image-viewer.js

@@ -0,0 +1,23 @@
+import {mountImage} from './image-viewer-lib.js';
+import {readChoice} from './plugins/consent/choices.js';
+const root=document.querySelector('main'),mounted=new Map(),selector='.post-content img, .post-change-content img, .image-block img, .media-text-block img, [data-edgepress-oembed] img';
+const labels=JSON.parse(document.getElementById('edgepress-image-viewer-config')?.textContent||'{}');
+function permitted(image){
+ if(image.closest('[data-project-demo]'))return false;
+ if(!image.getAttribute('src')||image.closest('[hidden],template'))return false;
+ const host=image.closest('[data-edgepress-oembed],[data-edgepress-service]');if(!host)return true;
+ const privacy=JSON.parse(document.getElementById('edgepress-privacy-config')?.textContent||'{}'),id=host.dataset.edgepressOembed||host.dataset.edgepressService;
+ return !!readChoice(privacy)?.allowed.includes(id);
+}
+function refresh(){
+ for(const [image,dispose] of mounted)if(!root.contains(image)||!permitted(image)){dispose();mounted.delete(image);}
+ for(const image of root.querySelectorAll(selector)){
+  if(mounted.has(image)||!permitted(image))continue;const link=image.closest('a');
+  if(link&&link.href!==image.src&&!/\.(?:png|jpe?g|webp|avif|gif|svg)(?:[?#]|$)/i.test(link.href))continue;
+  mounted.set(image,mountImage(image,{labels,original:()=>image.dataset.original||link?.href||image.currentSrc||image.src}));
+ }
+}
+if(root){
+ const observer=new MutationObserver(refresh);observer.observe(root,{childList:true,subtree:true,attributes:true,attributeFilter:['src','hidden']});refresh();
+ window.addEventListener('pagehide',()=>{observer.disconnect();for(const dispose of mounted.values())dispose();mounted.clear();},{once:true});
+}

package/static/edgepress/images.css

@@ -0,0 +1,4 @@
+/* Responsive height:auto needs an explicit ratio for Edge's lazy-image audit.
+   Read the build's reserved dimensions without introducing inline styles.
+   Browsers without typed attr() retain the width/height attribute fallback. */
+img[loading="lazy"][width][height]{aspect-ratio:attr(width type(<number>)) / attr(height type(<number>))}

package/static/edgepress/link-directory.css

@@ -0,0 +1,14 @@
+.link-directory-section{min-width:0;margin-block:clamp(12px,2vw,24px)}
+.link-directory-section>h2{margin:0 0 clamp(14px,2.5vw,24px);font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.3}
+.link-directory-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:clamp(12px,2vw,20px);list-style:none;margin:0;padding:0}
+.link-directory-entry{min-width:0;border:1px solid var(--line,#c8c8c8);border-radius:var(--radius,12px);background:var(--surface,Canvas)}
+.link-directory-link{display:flex;flex-direction:column;gap:20px;min-width:0;height:100%;box-sizing:border-box;padding:clamp(20px,3vw,28px);color:var(--ink,CanvasText);text-decoration:none;border-radius:inherit;transition:background .16s ease}
+.link-directory-link:hover{background:var(--surface-soft,rgba(127,127,127,.05));text-decoration:none}
+.link-directory-link:focus-visible{outline:3px solid var(--accent,Highlight);outline-offset:3px}
+.link-directory-main{display:flex;flex-direction:column;gap:9px;min-width:0}
+.link-directory-name{color:var(--ink,CanvasText);font-size:clamp(1.05rem,2vw,1.22rem);font-weight:680;line-height:1.35;overflow-wrap:anywhere}
+.link-directory-summary{color:var(--muted,#666);font-size:.95rem;line-height:1.65;overflow-wrap:anywhere}
+.link-directory-destination{display:flex;justify-content:space-between;gap:10px;align-items:center;min-width:0;margin-top:auto;color:var(--muted,#666);font:.8rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}
+.link-directory-arrow{color:var(--accent,LinkText);font:600 1.15rem/1 sans-serif}
+.link-directory-link:hover .link-directory-name,.link-directory-link:focus-visible .link-directory-name{color:var(--accent,LinkText)}
+@media(prefers-reduced-motion:reduce){.link-directory-link{transition:none}}

package/static/edgepress/local-time.js

@@ -0,0 +1,12 @@
+for (const element of document.querySelectorAll('time[data-local-time]')) {
+  const value = new Date(element.dateTime);
+  if (!Number.isFinite(value.valueOf())) continue;
+  try {
+    const options = element.dataset.dateOnly === 'true'
+      ? {dateStyle: 'long', timeZone: 'UTC'}
+      : {year:'numeric', month:'long', day:'numeric', hour:'2-digit', minute:'2-digit', timeZoneName:'short'};
+    const locale = element.dataset.timeLocale || document.documentElement.lang || undefined;
+    element.textContent = new Intl.DateTimeFormat(locale, options).format(value);
+    element.title = element.dataset.dateOnly === 'true' ? element.dateTime.slice(0,10) : value.toISOString();
+  } catch {}
+}

package/static/edgepress/media-viewer.css

@@ -0,0 +1 @@
+.media-viewer-block{margin:24px 0;min-width:0;color:var(--ink,inherit)}.media-viewer-block>figcaption{font-weight:700;margin-bottom:12px}.media-viewer-block .media-gallery{min-width:0}.media-viewer-block .gallery-stage{height:clamp(240px,68svh,660px);overflow:hidden;border-radius:12px;background:var(--panel,var(--paper,transparent));touch-action:pan-y}.media-viewer-block .gallery-stage:empty{height:auto;min-height:0}.media-viewer-block .gallery-stage figure{margin:0;height:100%}.media-viewer-block .gallery-stage img[data-media],.media-viewer-block .gallery-stage video{display:block;width:100%;height:100%;object-fit:contain}.media-viewer-block .gallery-navigation{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px}.media-viewer-block .gallery-navigation[hidden]{display:none}.media-viewer-block .gallery-navigation button{appearance:none;min-width:44px;min-height:44px;border:1px solid var(--line,currentColor);background:var(--panel,transparent);color:inherit;border-radius:10px;cursor:pointer}.media-viewer-block .gallery-navigation button:disabled{opacity:.4;cursor:default}.media-viewer-block .gallery-navigation svg{width:20px;height:20px;vertical-align:middle}.media-viewer-block .gallery-count{min-width:4em;text-align:center;font-variant-numeric:tabular-nums}.media-viewer-block :focus-visible{outline:3px solid var(--accent,currentColor);outline-offset:3px}

package/static/edgepress/media-viewer.js

@@ -0,0 +1,111 @@
+import { mountGallery } from './media-gallery-lib.js';
+import { readChoice } from './plugins/consent/choices.js';
+
+const settings = JSON.parse(document.getElementById('edgepress-privacy-config')?.textContent || '{}');
+const mounted = new Map();
+const inlineVideos = new Map();
+let playerResources = null;
+
+function loadPlayer() {
+  if (!playerResources) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = new URL('./media-player.css', import.meta.url).href;
+    const styles = new Promise((resolve, reject) => { link.onload = resolve; link.onerror = reject; });
+    document.head.append(link);
+    playerResources = Promise.all([import('./media-player-lib.js'), styles]).then(([library]) => library).catch(error => {
+      link.remove();
+      playerResources = null;
+      throw error;
+    });
+  }
+  return playerResources;
+}
+
+const viewing = new IntersectionObserver(entries => {
+  for (const entry of entries) {
+    const state = inlineVideos.get(entry.target);
+    if (!state) continue;
+    if (!entry.isIntersecting) { state.video.pause(); continue; }
+    if (state.started) continue;
+    state.started = true;
+    void loadPlayer().then(({ mountVideo }) => {
+      if (!inlineVideos.has(entry.target) || !entry.target.isConnected) return;
+      // Keep progressive native controls until the shared component is ready,
+      // then leave the actual file inert until the visitor presses Play.
+      const sources = [...state.video.querySelectorAll('source[src]')];
+      for (const source of sources) source.removeAttribute('src');
+      state.video.removeAttribute('src');
+      try {
+        state.dispose = mountVideo(state.video, { type: 'native', source: () => state.source });
+      } catch (error) {
+        if (sources.length) sources[0].src = state.source;
+        else state.video.src = state.source;
+        state.video.controls = true;
+        throw error;
+      }
+    }).catch(() => { state.started = false; });
+  }
+});
+
+function allowed(root) {
+  const id = root.dataset.mediaService;
+  if (!id) return true;
+  const service = settings.privacy?.integrations?.find(item => item.id === id);
+  return service?.provider === 'external-api' && service.enabled !== false && !!readChoice(settings)?.allowed.includes(id);
+}
+
+function refresh() {
+  for (const [root, dispose] of mounted) {
+    if (!root.isConnected) { dispose(); mounted.delete(root); }
+  }
+  for (const [root, state] of inlineVideos) {
+    if (!root.isConnected) { viewing.unobserve(root); state.dispose?.(); inlineVideos.delete(root); }
+  }
+  for (const root of document.querySelectorAll('[data-edgepress-video]')) {
+    if (inlineVideos.has(root) || root.closest('template,[hidden],[data-edgepress-oembed],[data-edgepress-service]')) continue;
+    const video = root.matches('video') ? root : root.querySelector('video');
+    const source = video?.getAttribute('src') || video?.querySelector('source[src]')?.getAttribute('src');
+    if (!source || new URL(source, location.href).origin !== location.origin) continue;
+    inlineVideos.set(root, { video, source, started: false, dispose: null });
+    viewing.observe(root);
+  }
+  for (const root of document.querySelectorAll('[data-edgepress-media-viewer]')) {
+    if (root.closest('template,[data-edgepress-oembed],[data-edgepress-service]')) continue;
+    const gallery = root.querySelector('.media-gallery');
+    const stage = gallery.querySelector('.gallery-stage');
+    const navigation = gallery.querySelector('.gallery-navigation');
+    if (!allowed(root)) {
+      mounted.get(root)?.();
+      mounted.delete(root);
+      stage.replaceChildren();
+      navigation.hidden = true;
+      continue;
+    }
+    if (mounted.has(root)) continue;
+    stage.replaceChildren(gallery.querySelector('template').content.cloneNode(true));
+    navigation.hidden = gallery.querySelectorAll('template').length < 2;
+    mounted.set(root, mountGallery(gallery, {
+      mountVideo: async (video, { isCurrent }) => {
+        const { mountVideo } = await loadPlayer();
+        if (!isCurrent() || !allowed(root)) return () => {};
+        return mountVideo(video);
+      }
+    }));
+  }
+}
+
+refresh();
+addEventListener('storage', refresh);
+document.addEventListener('edgepress:service-ready', refresh);
+document.addEventListener('edgepress:data-media', refresh);
+document.addEventListener('visibilitychange', refresh);
+document.addEventListener('visibilitychange', () => { if (document.hidden) for (const { video } of inlineVideos.values()) video.pause(); });
+document.addEventListener('click', event => { if (event.target.closest('.privacy-panel button')) setTimeout(refresh, 0); });
+addEventListener('pagehide', () => {
+  viewing.disconnect();
+  for (const dispose of mounted.values()) dispose();
+  for (const { dispose } of inlineVideos.values()) dispose?.();
+  mounted.clear();
+  inlineVideos.clear();
+});

package/static/edgepress/navigation-select.js

@@ -0,0 +1,14 @@
+// Native selects retain keyboard interaction; noscript links provide the fallback.
+for (const select of document.querySelectorAll('[data-navigation-select]')) {
+  select.value = '';
+  select.parentElement.hidden = false;
+  select.addEventListener('change', () => {
+    if (!select.value) return;
+    const target = new URL(select.value, location.href);
+    const newTab = select.selectedOptions[0]?.dataset.target === '_blank';
+    select.value = '';
+    if (['http:', 'https:'].includes(target.protocol) && !target.username && !target.password) {
+      if(newTab)window.open(target.href,'_blank','noopener,noreferrer');else location.assign(target.href);
+    }
+  });
+}

package/static/edgepress/oembed.js

@@ -0,0 +1,129 @@
+import {callService} from './services.js';
+import {readChoice} from './plugins/consent/choices.js';
+
+const scripts=new Map();
+function reservePhotoDimensions(image,data){
+  const width=Number(data.width),height=Number(data.height);
+  if(Number.isFinite(width)&&Number.isFinite(height)&&width>0&&height>0&&width<=100000&&height<=100000){
+    image.width=Math.max(1,Math.round(width));image.height=Math.max(1,Math.round(height));
+    image.style.aspectRatio=String(image.width)+' / '+image.height;
+  }else{image.style.aspectRatio='4 / 3';image.style.objectFit='contain';}
+  return image;
+}
+function config(){return JSON.parse(document.getElementById('edgepress-privacy-config')?.textContent||'{}');}
+function updateNotice(root,key){
+  const settings=config(),service=settings.privacy?.integrations?.find(item=>item.id===root.dataset.edgepressOembed);
+  if(!service)return;
+  if(!key)key=root.dataset.loaded?'embedLoaded':root.dataset.oembedUnavailable?'embedUnavailable':readChoice(settings)?.allowed.includes(service.id)?'embedReady':'embedNeedsConsent';
+  const name=typeof service.name==='string'?service.name:service.name?.[settings.siteLanguage]||service.name?.[settings.defaultLocale]||service.id;
+  const notice=root.querySelector('[data-oembed-notice]');if(notice){notice.hidden=key==='embedLoaded';notice.textContent=(settings.ui?.[key]||key).replace('{service}',name);}
+}
+export function trustedProviderEmbed(data,service,document) {
+  if(!data||String(data.version)!=='1.0'||!['rich','video','photo','link'].includes(data.type))throw new Error('Invalid oEmbed metadata');
+  const origins=service.embedOrigins || [new URL(service.backendUrl).origin];
+  const safe=value=>{const url=new URL(value);if(url.protocol!=='https:'||!origins.includes(url.origin)||url.username||url.password)throw new Error('Untrusted embed origin');return url.href;};
+  if(data.type==='photo'){const img=document.createElement('img');img.src=safe(data.url);img.alt=data.title||'';img.loading='lazy';img.style.cssText='width:100%;max-width:100%;height:auto';return reservePhotoDimensions(img,data);}
+  const container=document.createElement('div');container.className='oembed-content';
+  const template=document.createElement('template');template.innerHTML=data.html||'';
+  const tags=new Set(['IFRAME','BLOCKQUOTE','DIV','SECTION','A','P','SPAN','BR','STRONG','EM']);
+  function copy(source,parent){
+    if(source.nodeType===3){parent.append(document.createTextNode(source.textContent));return;}
+    if(source.nodeType!==1||!tags.has(source.tagName))return;
+    const node=document.createElement(source.tagName.toLowerCase());
+    if(source.tagName==='IFRAME'){
+      if(source.hasAttribute('class'))node.className=source.getAttribute('class');
+      node.src=safe(source.getAttribute('src'));node.title=data.title||'Media';node.loading='lazy';node.referrerPolicy='strict-origin-when-cross-origin';node.setAttribute('sandbox','allow-scripts allow-same-origin allow-presentation allow-popups');node.allow='fullscreen; picture-in-picture; encrypted-media';node.allowFullscreen=true;
+      const w=Math.max(200,Math.min(4096,Number(data.width)||640)),h=Math.max(60,Math.min(4096,Number(data.height)||480));node.style.cssText='display:block;width:100%;border:0;aspect-ratio:'+w+'/'+h+';height:auto';
+    }else{
+      if(source.tagName==='A'){
+        try{const url=new URL(source.getAttribute('href'));if(!['https:','http:'].includes(url.protocol)||url.username||url.password)throw Error();node.href=url.href;node.target='_blank';node.rel='noopener noreferrer';}catch{return;}
+      }
+      for(const name of ['class','lang','dir','cite','data-video-id','data-embed-from','data-dnt','data-theme'])if(source.hasAttribute(name))node.setAttribute(name,source.getAttribute(name));
+      for(const attribute of source.attributes)if(attribute.name.startsWith('data-'))node.setAttribute(attribute.name,attribute.value);
+      for(const child of source.childNodes)copy(child,node);
+    }
+    parent.append(node);
+  }
+  for(const child of template.content.childNodes)copy(child,container);
+  return container;
+}
+async function loadScripts(service,root) {
+  for(const address of service.embedScripts || []) {
+    const reusable=/^https:\/\/platform\.(?:x|twitter)\.com\/widgets\.js$/.test(address);
+    if(!scripts.has(address)||!reusable)scripts.set(address,new Promise((resolve,reject)=>{const script=document.createElement('script');script.src=address;script.async=true;script.referrerPolicy='no-referrer';script.onload=resolve;script.onerror=()=>{scripts.delete(address);script.remove();reject(new Error('Embed script unavailable'));};document.body.append(script);}));
+    await scripts.get(address);
+  }
+  globalThis.twttr?.widgets?.load(root);
+}
+
+export function trustedEmbed(data,origin,document) {
+  if(!data||String(data.version)!=='1.0'||!['rich','video','photo'].includes(data.type))throw new Error('Invalid oEmbed metadata');
+  const safe=value=>{const url=new URL(value);if(url.protocol!=='https:'||url.origin!==origin||url.username||url.password)throw new Error('Untrusted embed origin');return url.href;};
+  if(data.type==='photo'){
+    const image=document.createElement('img');image.src=safe(data.url);image.alt=typeof data.title==='string'?data.title.slice(0,500):'';image.loading='lazy';image.style.cssText='display:block;width:100%;max-width:100%;height:auto;';return reservePhotoDimensions(image,data);
+  }
+  if(typeof data.html!=='string'||data.html.length>32768)throw new Error('Invalid embed HTML');
+  const template=document.createElement('template');template.innerHTML=data.html;
+  const nodes=template.content.children;if(nodes.length!==1||nodes[0].tagName!=='IFRAME'||nodes[0].children.length)throw new Error('Only an iframe embed is supported');
+  const frame=document.createElement('iframe');frame.src=safe(nodes[0].getAttribute('src'));frame.title=typeof data.title==='string'?data.title.slice(0,500):'Media';
+  frame.referrerPolicy='no-referrer';frame.loading='lazy';frame.setAttribute('sandbox','allow-scripts allow-same-origin allow-presentation');frame.allow='fullscreen';frame.allowFullscreen=true;
+  const width=Number(data.width),height=Number(data.height);if(!Number.isFinite(width)||!Number.isFinite(height)||width<1||height<1||width>4096||height>4096)throw new Error('Invalid embed dimensions');
+  frame.width=String(width);frame.height=String(height);frame.style.cssText='display:block;width:100%;max-width:100%;border:0;aspect-ratio:'+width+'/'+height+';height:auto;';return frame;
+}
+
+async function show(root) {
+  if(root.dataset.loading||root.dataset.loaded)return;
+  const id=root.dataset.edgepressOembed,config=JSON.parse(document.getElementById('edgepress-privacy-config')?.textContent||'{}');
+  const integration=config.privacy?.integrations?.find(service=>service.id===id&&service.provider==='oembed');if(!integration)return;
+  delete root.dataset.oembedUnavailable;
+  root.dataset.requested='true';root.dataset.loading='true';root.setAttribute('aria-busy','true');root.classList.add('is-loading');
+  const button=root.querySelector('[data-oembed-load]');
+  const buttonHadFocus=document.activeElement===button;
+  if(button)button.disabled=true;
+  const complete=media=>{
+    const restoreFocus=buttonHadFocus&&(document.activeElement===button||document.activeElement===document.body);
+    const status=root.querySelector('[data-oembed-status]');
+    if(media.parentElement!==status)status.replaceChildren(media);
+    button?.remove();root.dataset.loaded='true';updateNotice(root,'embedLoaded');
+    if(restoreFocus)root.querySelector('figcaption a')?.focus({preventScroll:true});
+  };
+  const dimensions=data=>({...data,...(root.dataset.oembedWidth?{width:Number(root.dataset.oembedWidth)}:{}),...(root.dataset.oembedHeight?{height:Number(root.dataset.oembedHeight)}:{})});
+  try{
+    if(!readChoice(config)?.allowed.includes(id))throw new Error('Service requires visitor consent: '+id);
+    updateNotice(root,'embedLoading');
+    if(integration.oembedEndpoint||integration.embedTemplate){
+      const stored=root.querySelector('[data-oembed-data]');if(!stored)throw new Error('Embed unavailable');
+      const data=dimensions(JSON.parse(stored.content.textContent)),media=trustedProviderEmbed(data,integration,document);
+      root.querySelector('[data-oembed-status]').replaceChildren(media);
+      await loadScripts(integration,media);complete(media);return;
+    }
+    const response=await callService(id,'oembed',{headers:{'X-Service-Resource':encodeURIComponent(root.dataset.oembedUrl)}});
+    if(!response.ok||!/^application\/json(?:;|$)/i.test(response.headers.get('Content-Type')||''))throw new Error('Embed unavailable');
+    const data=dimensions(await response.json()),media=trustedEmbed(data,new URL(integration.backendUrl).origin,document);
+    complete(media);
+  }catch(error){
+    if(error.message.startsWith('Service requires visitor consent:'))document.dispatchEvent(new CustomEvent('edgepress:privacy-open'));
+    else{root.dataset.oembedUnavailable='true';root.dataset.requested='false';root.querySelector('[data-oembed-status]').replaceChildren();updateNotice(root,'embedUnavailable');}
+  }finally{delete root.dataset.loading;root.classList.remove('is-loading');root.setAttribute('aria-busy','false');if(button?.isConnected)button.disabled=false;}
+}
+if(typeof document!=='undefined'){
+  const roots=[...document.querySelectorAll('[data-edgepress-oembed]')],visible=new WeakSet();
+  for(const root of roots){const width=Number(root.dataset.oembedWidth)||640,height=Number(root.dataset.oembedHeight)||480;root.style.setProperty('--oembed-ratio',width+'/'+height);}
+  function frameTheme(frame){
+    const style=getComputedStyle(document.documentElement),colors=Object.fromEntries(['--accent','--ink','--muted','--line','--paper','--surface'].map(key=>[key,style.getPropertyValue(key).trim()]).filter(([,value])=>value));
+    frame.contentWindow?.postMessage({type:'edgepress:embed-theme',colors},new URL(frame.src).origin);
+  }
+  document.addEventListener('edgepress:theme-change',()=>{for(const root of roots)for(const frame of root.querySelectorAll('iframe[data-theme-ready]'))frameTheme(frame);});
+  new MutationObserver(()=>{for(const root of roots)for(const frame of root.querySelectorAll('iframe[data-theme-ready]'))frameTheme(frame);}).observe(document.documentElement,{attributes:true,attributeFilter:['data-theme','class','style']});
+  globalThis.matchMedia?.('(prefers-color-scheme:dark)').addEventListener('change',()=>{for(const root of roots)for(const frame of root.querySelectorAll('iframe[data-theme-ready]'))frameTheme(frame);});
+  globalThis.addEventListener('message',event=>{
+    const frame=roots.flatMap(root=>[...root.querySelectorAll('iframe')]).find(frame=>frame.contentWindow===event.source&&new URL(frame.src).origin===event.origin);if(!frame)return;
+    if(event.data?.type==='edgepress:embed-ready'){frame.dataset.themeReady='true';frameTheme(frame);}
+    if(event.data?.type==='edgepress:embed-size'&&Number.isFinite(event.data.height)&&event.data.height>=120&&event.data.height<=4096){frame.style.height=Math.ceil(event.data.height)+'px';frame.style.aspectRatio='auto';}
+  });
+  function loadAllowed(root){updateNotice(root);if(!root.dataset.oembedUnavailable&&readChoice(config())?.allowed.includes(root.dataset.edgepressOembed)&&(root.dataset.requested==='true'||document.documentElement.dataset.edgepressDataMode!=='text'&&visible.has(root)))void show(root);}
+  const observer=typeof IntersectionObserver==='function'?new IntersectionObserver(entries=>{for(const entry of entries)if(entry.isIntersecting){visible.add(entry.target);loadAllowed(entry.target);}else visible.delete(entry.target);},{rootMargin:'200px'}):null;
+  for(const root of roots){updateNotice(root);if(observer)observer.observe(root);else{visible.add(root);loadAllowed(root);}}
+  document.addEventListener('click',event=>{const button=event.target.closest('[data-oembed-load]');if(button)void show(button.closest('[data-edgepress-oembed]'));});
+  document.addEventListener('edgepress:service-ready',event=>{for(const root of roots)if(root.dataset.edgepressOembed===event.detail?.id)loadAllowed(root);});
+}

package/static/edgepress/plugins/backend/external-api.js

@@ -0,0 +1,4 @@
+// Register availability locally; visible embed consumers may now load their content.
+export async function load(integration) {
+  document.dispatchEvent(new CustomEvent('edgepress:service-ready', {detail: {id: integration.id}}));
+}

package/static/edgepress/plugins/backend/external-widget.js

@@ -0,0 +1,13 @@
+const mounted = new WeakSet();
+export async function load(integration) {
+  const roots = [...document.querySelectorAll('[data-edgepress-service]')].filter(root => root.dataset.edgepressService === integration.id && !mounted.has(root));
+  if (!roots.length) return;
+  const address = new URL(integration.moduleUrl);
+  if (address.protocol !== 'https:' || address.username || address.password) throw new Error('Invalid service module');
+  const widget = await import(address.href);
+  if (typeof widget.mount !== 'function') throw new Error('Service module must export mount');
+  for (const root of roots) {
+    await widget.mount(root, {backendUrl: integration.backendUrl, thread: root.dataset.serviceThread, title: root.dataset.serviceTitle});
+    mounted.add(root);
+  }
+}

package/static/edgepress/plugins/consent/choices.js

@@ -0,0 +1,47 @@
+const storageKey='edgepress-privacy-selection', cookieKey='edgepress_privacy_choice';
+const stable=value=>Array.isArray(value)?value.map(stable):value && typeof value==='object'?Object.fromEntries(Object.keys(value).sort().map(key=>[key,stable(value[key])])):value;
+export function choiceSnapshot(privacy, siteOrigin='') {
+  try {siteOrigin=new URL(siteOrigin).origin;}catch{}
+  const consent=privacy.consent || {};
+  const services=(privacy.integrations || []).map(service=>{
+    const presentation=new Set(['name','purpose','dataCategories','recipient','retention']);
+    const value=Object.fromEntries(Object.entries(service).filter(([key])=>!presentation.has(key)));
+    return value;
+  }).sort((a,b)=>String(a.id).localeCompare(String(b.id)));
+  return JSON.stringify(stable({controller:privacy.controller,policyUrl:privacy.policyUrl,consent,integrations:services}));
+}
+export function makeChoice(config, allowed) {
+  const consent=config.privacy?.consent || {};
+  return {proposedDate:consent.proposedDate || '',effectiveDate:consent.effectiveDate || '',fingerprint:config.choiceFingerprint || choiceSnapshot(config.privacy),
+    expiresAt:Date.now()+consent.expiresDays*86400000,updatedAt:Date.now(),allowed:[...new Set(allowed)]};
+}
+export function readChoice(config) {
+  const candidates=[];
+  for(const storage of ['localStorage','sessionStorage']) {
+    try {candidates.push(JSON.parse(globalThis[storage].getItem(storageKey)));}catch{}
+  }
+  try {const cookie=document.cookie.split(';').map(value=>value.trim()).find(value=>value.startsWith(cookieKey+'='));if(cookie)candidates.push(JSON.parse(decodeURIComponent(cookie.slice(cookieKey.length+1))));}catch{}
+  const consent=config.privacy?.consent || {}, validIds=new Set((config.privacy?.integrations || []).map(item=>item.id));
+  for(const saved of candidates.filter(Boolean).sort((a,b)=>(b.updatedAt || 0)-(a.updatedAt || 0))) {
+    if(saved.proposedDate!==(consent.proposedDate || '') || saved.effectiveDate!==(consent.effectiveDate || '') || !Number.isFinite(saved.expiresAt) || saved.expiresAt<=Date.now() || !Array.isArray(saved.allowed))continue;
+    let matches=saved.fingerprint===(config.choiceFingerprint || choiceSnapshot(config.privacy));
+    if(!matches && typeof saved.fingerprint==='string' && saved.fingerprint.startsWith('{')) {
+      try {matches=choiceSnapshot(JSON.parse(saved.fingerprint),config.siteOrigin)===config.choiceSnapshot;}catch{}
+    }
+    if(!matches)continue;
+    saved.allowed=saved.allowed.filter(id=>validIds.has(id));
+    if(saved.fingerprint!==config.choiceFingerprint){saved.fingerprint=config.choiceFingerprint;persistChoice(saved);}
+    return saved;
+  }
+  return null;
+}
+export function persistChoice(choice) {
+  const value=JSON.stringify(choice);
+  let saved=false;
+  try {localStorage.setItem(storageKey,value);saved=localStorage.getItem(storageKey)===value;}catch{}
+  try {sessionStorage.setItem(storageKey,value);}catch{}
+  try {
+    // Use a small essential cookie only if persistent local storage is unavailable.
+    document.cookie=cookieKey+'='+(saved?'':encodeURIComponent(value))+'; Path=/; SameSite=Lax'+(location.protocol==='https:'?'; Secure':'')+'; Max-Age='+(saved?0:Math.max(0,Math.floor((choice.expiresAt-Date.now())/1000)));
+  }catch{}
+}

package/static/edgepress/plugins/consent/manager.js

@@ -1,4 +1,8 @@
+import {makeChoice,readChoice,persistChoice} from './choices.js';
 const modules = {
+  'oembed': () => import('../backend/external-api.js'),
+  'external-widget': () => import('../backend/external-widget.js'),
+  'external-api': () => import('../backend/external-api.js'),
   'google-tag-manager': () => import('../tracking/google-tag-manager.js'),
   'meta-pixel': () => import('../tracking/meta-pixel.js'),
   'cloudflare-web-analytics': () => import('../statistics/cloudflare-web-analytics.js'),
@@ -10,7 +14,8 @@ const modules = {
   'hcaptcha': () => import('../captcha/hcaptcha.js')
 };
 
-const storageKey = 'edgepress-privacy-choice';
+const activeServices = new Map();
+const requestedServices = new Set();
 const configElement = document.getElementById('edgepress-privacy-config');
 if (configElement) {
   try { initialize(JSON.parse(configElement.textContent)); }
@@ -56,7 +61,6 @@ function initialize(config) {
   const checkboxes = new Map();
 
   for (const integration of integrations) {
-    const category = translate(ui, 'plugin' + capitalize(integration.category || 'statistics'));
     const name = localized(integration.name, locale, defaultLocale) || integration.provider;
     const purpose = localized(integration.purpose, locale, defaultLocale);
     const dataCategories = localized(integration.dataCategories, locale, defaultLocale);
@@ -69,6 +73,7 @@ function initialize(config) {
     toggle.className = 'privacy-service-toggle';
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
+    checkbox.name = 'edgepress-consent-' + integration.id;
     checkbox.value = integration.id;
     checkbox.setAttribute('role', 'switch');
     checkbox.checked = false;
@@ -76,13 +81,10 @@ function initialize(config) {
     toggleText.className = 'privacy-service-toggle-text';
     const title = document.createElement('strong');
     title.textContent = name;
-    const categoryLabel = document.createElement('span');
-    categoryLabel.className = 'privacy-category';
-    categoryLabel.textContent = category;
     const purposeText = document.createElement('span');
     purposeText.className = 'privacy-service-purpose';
     purposeText.textContent = purpose;
-    toggleText.append(title, categoryLabel, purposeText);
+    toggleText.append(title, purposeText);
     toggle.append(checkbox, toggleText);
     const detail = document.createElement('details');
     detail.className = 'privacy-details';
@@ -109,7 +111,7 @@ function initialize(config) {
   const essential = document.createElement('p');
   essential.className = 'privacy-essential';
   essential.textContent = (ui.essentialStorage || 'Your choice is saved in this browser for up to {days} days.')
-    .replace('{days}', String(privacy.consent?.expiresDays || 180));
+    .replace('{days}', String(privacy.consent.expiresDays));
 
   const operator = privacy.controller || {};
   const controller = document.createElement('p');
@@ -117,7 +119,7 @@ function initialize(config) {
   if (operator.name || operator.contact) {
     controller.append(document.createTextNode((ui.privacyController || 'Site operator') + ': '));
     if (operator.name) controller.append(document.createTextNode(operator.name));
-    if (operator.name && operator.contact) controller.append(document.createTextNode(' · '));
+    if (operator.name && operator.contact) controller.append(document.createTextNode('; '));
     if (operator.contact) {
       controller.append(document.createTextNode((ui.privacyContact || 'Privacy contact') + ': '));
       appendContact(controller, operator.contact);
@@ -146,13 +148,35 @@ function initialize(config) {
   root.append(settingsButton, panel);
   document.body.append(root);
 
+  document.addEventListener('edgepress:privacy-open', () => {
+    panel.hidden = false;
+    settingsButton.setAttribute('aria-expanded','true');
+    heading.focus();
+  });
   const saved = readChoice(config);
+  document.addEventListener('click', event => {
+    const button = event.target.closest('[data-service-load]');
+    if (!button || !integrations.some(integration => integration.id === button.dataset.serviceLoad)) return;
+    requestedServices.add(button.dataset.serviceLoad);
+    const current = readChoice(config);
+    if (current?.allowed.includes(button.dataset.serviceLoad)) void activate(current.allowed);
+    else document.dispatchEvent(new CustomEvent('edgepress:privacy-open'));
+  });
   for (const [id, checkbox] of checkboxes) checkbox.checked = Boolean(saved?.allowed.includes(id));
 
   settingsButton.addEventListener('click', () => {
     panel.hidden = !panel.hidden;
     settingsButton.setAttribute('aria-expanded', String(!panel.hidden));
-    if (!panel.hidden) heading.focus();
+    if (!panel.hidden) {
+      document.dispatchEvent(new CustomEvent('edgepress:floating-panel-open', { detail: 'privacy' }));
+      heading.focus();
+    }
+  });
+  document.addEventListener('edgepress:floating-panel-open', (event) => {
+    if (event.detail !== 'privacy') {
+      panel.hidden = true;
+      settingsButton.setAttribute('aria-expanded', 'false');
+    }
   });
   close.addEventListener('click', () => closePanel());
   reject.addEventListener('click', () => saveChoice([]));
@@ -183,6 +207,7 @@ function initialize(config) {
 
   if (saved) activate(saved.allowed);
   else if (integrations.length) {
+    document.dispatchEvent(new CustomEvent('edgepress:floating-panel-open', { detail: 'privacy' }));
     panel.hidden = false;
     settingsButton.setAttribute('aria-expanded', 'true');
   }
@@ -241,10 +266,6 @@ function localized(value, locale, defaultLocale) {
   return value[locale] || value[defaultLocale] || Object.values(value)[0] || '';
 }
 
-function capitalize(value) {
-  return String(value).charAt(0).toUpperCase() + String(value).slice(1);
-}
-
 function makeButton(label, className, iconName) {
   const button = document.createElement('button');
   button.type = 'button';
@@ -254,78 +275,39 @@ function makeButton(label, className, iconName) {
 }
 
 function makeIcon(name) {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('viewBox', '0 0 24 24');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.setAttribute('focusable', 'false');
-  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  const paths = {
-    settings: 'M4 6h16M4 12h16M4 18h16M8 4v4m8 2v4m-5 2v4',
-    accept: 'm5 12 4 4L19 6',
-    reject: 'm6 6 12 12M18 6 6 18',
-    close: 'm6 6 12 12M18 6 6 18',
-    save: 'M5 12h14m-6-6 6 6-6 6'
-  };
-  path.setAttribute('d', paths[name] || paths.settings);
-  path.setAttribute('fill', 'none');
-  path.setAttribute('stroke', 'currentColor');
-  path.setAttribute('stroke-width', '2');
-  path.setAttribute('stroke-linecap', 'round');
-  path.setAttribute('stroke-linejoin', 'round');
-  svg.append(path);
-  return svg;
-}
-
-function makeChoice(config, allowed) {
-  const privacy = config.privacy || {};
-  const consent = privacy.consent || {};
-  const expiresAt = Date.now() + Math.max(1, Math.min(730, consent.expiresDays || 180)) * 86400000;
-  const fingerprint = config.choiceFingerprint || JSON.stringify({ controller: privacy.controller, policyUrl: privacy.policyUrl, consent, integrations: privacy.integrations });
-  return {
-    proposedDate: consent.proposedDate || '',
-    effectiveDate: consent.effectiveDate || '',
-    fingerprint,
-    expiresAt,
-    allowed: [...new Set(allowed)]
-  };
-}
-
-function readChoice(config) {
-  try {
-    const saved = JSON.parse(localStorage.getItem(storageKey));
-    const privacy = config.privacy || {};
-    const consent = privacy.consent || {};
-    const fingerprint = config.choiceFingerprint || JSON.stringify({ controller: privacy.controller, policyUrl: privacy.policyUrl, consent, integrations: privacy.integrations });
-    const isLegacyFingerprint = Array.isArray(config.legacyChoiceFingerprints) && config.legacyChoiceFingerprints.includes(saved?.fingerprint);
-    if (!saved || saved.proposedDate !== (consent.proposedDate || '') || saved.effectiveDate !== (consent.effectiveDate || '') ||
-        (saved.fingerprint !== fingerprint && !isLegacyFingerprint) || saved.expiresAt <= Date.now() || !Array.isArray(saved.allowed)) {
-      localStorage.removeItem(storageKey);
-      return null;
-    }
-    if (isLegacyFingerprint && saved.fingerprint !== fingerprint) {
-      saved.fingerprint = fingerprint;
-      persistChoice(saved);
-    }
-    const validIds = new Set((privacy.integrations || []).map((item) => item.id));
-    saved.allowed = saved.allowed.filter((id) => validIds.has(id));
-    return saved;
-  } catch { return null; }
-}
-
-function persistChoice(choice) {
-  try { localStorage.setItem(storageKey, JSON.stringify(choice)); } catch { /* Session choice still applies in memory. */ }
+  const icons = { settings: 'settings', accept: 'check', reject: 'x', close: 'x', save: 'arrow-right' };
+  if (!Object.hasOwn(icons, name)) throw new Error('Unsupported consent icon: ' + String(name));
+  const image = document.createElement('img');
+  image.className = 'icon-library';
+  image.src = '/edgepress/icons/' + icons[name] + '.svg';
+  image.width = 20;
+  image.height = 20;
+  image.alt = '';
+  image.setAttribute('aria-hidden', 'true');
+  image.decoding = 'async';
+  return image;
 }
 
 async function activate(allowed) {
+  const textMode = document.documentElement.dataset.edgepressDataMode === 'text';
   const config = JSON.parse(document.getElementById('edgepress-privacy-config').textContent);
   const permitted = new Set(allowed);
   for (const integration of config.privacy.integrations || []) {
     if (!permitted.has(integration.id)) continue;
+    if (textMode && !requestedServices.has(integration.id) && !['oembed', 'external-api'].includes(integration.provider)) continue;
     const loader = modules[integration.provider];
     if (!loader) continue;
     try {
       const provider = await loader();
-      await provider.load(integration);
+      if (!activeServices.has(integration.id)) {
+        const buttons = [...document.querySelectorAll('[data-service-load]')].filter(button => button.dataset.serviceLoad === integration.id);
+        buttons.forEach(button => { button.disabled = true; button.setAttribute('aria-busy', 'true'); });
+        const task = Promise.resolve().then(() => provider.load(integration));
+        activeServices.set(integration.id, task);
+        try { await task; buttons.forEach(button => { button.hidden = true; }); }
+        catch (error) {activeServices.delete(integration.id); throw error;}
+        finally { buttons.forEach(button => { button.disabled = false; button.removeAttribute('aria-busy'); }); }
+      }
     } catch (error) {
       console.error('EdgePress optional integration failed to load:', integration.provider, error);
     }