@oddessentials/agent-guild 1.14.0 → 1.15.0

package/web/yard/photo.js

@@ -0,0 +1,228 @@
+import { WORLDS, photoName } from './model.mjs';
+
+const CREST = new URL('../brand/crest.png', import.meta.url).href;
+const SITE = 'agentguild.oddessentials.ai';
+const INK = '#f8ecd4', FAINT = '#c9c2b4', PANEL = 'rgba(13,20,22,.85)', PANEL_END = 'rgba(13,20,22,.6)';
+
+async function crestImage() {
+  const image = new Image();
+  image.src = CREST;
+  await image.decode();
+  return image;
+}
+
+function canCopy() {
+  return window.isSecureContext && typeof ClipboardItem === 'function' && typeof navigator.clipboard?.write === 'function'
+    && (ClipboardItem.supports?.('image/png') ?? true);
+}
+
+function canShare() {
+  try { return Boolean(navigator.canShare?.({ files: [new File([], 'yard.png', { type: 'image/png' })] })); } catch { return false; }
+}
+
+function fit(context, text, width) {
+  if (context.measureText(text).width <= width + .5) return text;
+  let cut = text;
+  while (cut && context.measureText(cut + '…').width > width) cut = cut.slice(0, -1);
+  return cut + '…';
+}
+
+function write(context, line, x, color) {
+  context.font = line.font;
+  context.fillStyle = color;
+  context.fillText(fit(context, line.text, line.box.w), x, line.box.y + line.box.h / 2);
+}
+
+function shadow(context, color, blur, y) {
+  context.shadowColor = color; context.shadowBlur = blur; context.shadowOffsetY = y;
+}
+
+// Tags as yard.css draws them unselected, in stage pixels.
+function drawTag(context, tag) {
+  context.save();
+  context.textBaseline = 'middle';
+  if (tag.kind === 'chip') {
+    const { x, y, w, h } = tag.box;
+    shadow(context, 'rgba(0,0,0,.33)', 10, 2);
+    context.beginPath(); context.roundRect(x, y, w, h, 10);
+    context.fillStyle = PANEL; context.fill();
+    shadow(context, 'transparent', 0, 0);
+    context.strokeStyle = 'rgba(224,191,121,.27)'; context.lineWidth = 1; context.stroke();
+    context.textAlign = 'center';
+    shadow(context, '#000', 3, 1);
+    write(context, tag.lines[0], x + w / 2, INK);
+    context.restore();
+    return;
+  }
+  const bottom = tag.box.y + tag.box.h, name = tag.lines[0].box;
+  const box = tag.kind === 'session' ? { x: name.x - 6, y: bottom - name.h - 8, w: name.w + 12, h: name.h + 8 } : tag.box;
+  const lines = tag.kind === 'session' ? [{ ...tag.lines[0], box: { ...name, y: box.y + 3 } }] : tag.lines;
+  const color = tag.color || '#ac9362';
+  context.globalAlpha = tag.status === 'exited' ? .5 : tag.kind === 'session' ? .82 : 1;
+  shadow(context, 'rgba(0,0,0,.33)', 12, 2);
+  context.beginPath(); context.roundRect(box.x, box.y, box.w, box.h, 4);
+  const fill = context.createLinearGradient(0, box.y, 0, bottom);
+  fill.addColorStop(0, PANEL); fill.addColorStop(1, PANEL_END);
+  context.fillStyle = fill; context.fill();
+  shadow(context, 'transparent', 0, 0);
+  context.save();
+  context.clip();
+  if (tag.status === 'locked') {
+    context.strokeStyle = color; context.lineWidth = 2; context.setLineDash([4, 3]);
+    context.beginPath(); context.moveTo(box.x, bottom - 1); context.lineTo(box.x + box.w, bottom - 1); context.stroke();
+  } else {
+    context.fillStyle = color; context.fillRect(box.x, bottom - 2, box.w, 2);
+  }
+  context.restore();
+  shadow(context, '#000', 3, 1);
+  lines.forEach((line, i) => write(context, line, line.box.x, i ? FAINT : INK));
+  context.restore();
+}
+
+function drawSignature(context, skin, crest, width, height) {
+  const title = WORLDS[skin].title;
+  const display = getComputedStyle(document.documentElement).getPropertyValue('--font-display').trim() || 'serif';
+  const titleFont = `600 15px ${display}`, siteFont = `500 10px ${getComputedStyle(document.body).fontFamily}`;
+  context.save();
+  context.font = titleFont; const titleWidth = context.measureText(title).width;
+  context.font = siteFont; const siteWidth = context.measureText(SITE).width;
+  const mark = crest && skin !== 'professional' ? 34 : 0, markWidth = mark && mark * crest.naturalWidth / crest.naturalHeight;
+  const pad = 10, w = pad * 2 + (mark ? markWidth + 10 : 0) + Math.max(titleWidth, siteWidth), h = pad * 2 + 34;
+  const x = width - w - 14, y = height - h - 14, left = x + pad + (mark ? markWidth + 10 : 0);
+  shadow(context, 'rgba(0,0,0,.33)', 12, 2);
+  context.beginPath(); context.roundRect(x, y, w, h, 8);
+  context.fillStyle = 'rgba(13,20,22,.72)'; context.fill();
+  shadow(context, 'transparent', 0, 0);
+  if (mark) context.drawImage(crest, x + pad, y + (h - mark) / 2, markWidth, mark);
+  context.textBaseline = 'top';
+  context.font = titleFont; context.fillStyle = INK; context.fillText(title, left, y + pad + 1);
+  context.font = siteFont; context.fillStyle = FAINT; context.fillText(SITE, left, y + pad + 22);
+  context.restore();
+}
+
+export class YardPhoto {
+  constructor(dialog) {
+    this.dialog = dialog;
+    this.preview = dialog.querySelector('canvas');
+    this.labels = dialog.querySelector('[data-labels]');
+    this.status = dialog.querySelector('[role="status"]');
+    this.copyButton = dialog.querySelector('[data-copy]');
+    this.saveButton = dialog.querySelector('[data-save]');
+    this.shareButton = dialog.querySelector('[data-share]');
+    this.shot = null; this.png = null; this.blob = null; this.url = ''; this.version = 0; this.opening = false;
+    this.crest = crestImage().catch(() => null);
+    this.labels.addEventListener('change', () => { this.draw(); this.status.textContent = ''; });
+    this.copyButton.addEventListener('click', () => this.copy());
+    this.saveButton.addEventListener('click', () => this.save());
+    this.shareButton.addEventListener('click', () => this.share());
+    dialog.querySelector('[data-done]').addEventListener('click', () => dialog.close());
+    dialog.addEventListener('close', () => {
+      if (dialog.open) return;
+      this.clear(); this.opener?.focus();
+    });
+  }
+
+  async open(renderer, opener) {
+    if (this.dialog.open || this.opening) return;
+    const version = this.version;
+    this.opening = true;
+    try {
+      const display = getComputedStyle(document.documentElement).getPropertyValue('--font-display');
+      const [crest] = await Promise.all([this.crest, document.fonts.load(`600 15px ${display}`).catch(() => {})]);
+      const stage = document.getElementById('yard-stage');
+      if (version !== this.version || !(stage.checkVisibility?.() ?? stage.isConnected) || !stage.clientWidth || !stage.clientHeight) return;
+      let shot = null;
+      try { shot = renderer.capture(); } catch {}
+      Object.assign(this, { shot, opener, crestImage: crest, taken: new Date(), background: getComputedStyle(document.getElementById('yard')).backgroundColor });
+      this.labels.checked = false;
+      try { this.draw(); } catch { shot.canvas.width = 0; this.shot = shot = null; this.draw(); }
+      this.labels.parentElement.hidden = !shot;
+      this.copyButton.hidden = !shot || !canCopy();
+      this.shareButton.hidden = !shot || !canShare();
+      this.saveButton.hidden = !shot;
+      this.status.textContent = shot ? '' : 'Couldn’t take the picture.';
+      this.dialog.showModal();
+      [this.copyButton, this.saveButton, this.dialog.querySelector('[data-done]')].find(button => !button.hidden).focus();
+    } finally { this.opening = false; }
+  }
+
+  draw() {
+    this.version++;
+    this.png = null; this.blob = null;
+    const { shot, preview } = this;
+    if (!shot) { preview.width = preview.height = 0; return; }
+    preview.width = shot.canvas.width; preview.height = shot.canvas.height;
+    const context = preview.getContext('2d');
+    context.fillStyle = this.background;
+    context.fillRect(0, 0, preview.width, preview.height);
+    context.drawImage(shot.canvas, 0, 0);
+    context.save();
+    context.scale(shot.scale, shot.scale);
+    if (this.labels.checked) for (const tag of shot.tags) drawTag(context, tag);
+    drawSignature(context, shot.skin, this.crestImage, preview.width / shot.scale, preview.height / shot.scale);
+    context.restore();
+  }
+
+  encode() {
+    if (this.png) return this.png;
+    const png = this.png = new Promise((resolve, reject) => this.preview.toBlob(blob => blob ? resolve(blob) : reject(new Error('The picture could not be encoded.')), 'image/png'));
+    png.then(blob => { if (this.png === png) this.blob = blob; }, () => { if (this.png === png) this.png = null; });
+    return png;
+  }
+
+  name() { return photoName(WORLDS[this.shot.skin].title, this.taken); }
+
+  isCurrent(version) { return version === this.version && this.dialog.open; }
+
+  report(version, text) {
+    if (this.isCurrent(version)) this.status.textContent = text;
+  }
+
+  async copy() {
+    const version = this.version;
+    try {
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': this.encode() })]);
+      this.report(version, 'Copied');
+    } catch { this.report(version, 'Couldn’t copy the picture.'); }
+  }
+
+  async save() {
+    const version = this.version, name = this.name();
+    try {
+      const blob = await this.encode();
+      if (!this.isCurrent(version)) return;
+      URL.revokeObjectURL(this.url);
+      this.url = URL.createObjectURL(blob);
+      Object.assign(document.createElement('a'), { href: this.url, download: name }).click();
+      this.report(version, 'Saved ' + name);
+    } catch { this.report(version, 'Couldn’t save the picture.'); }
+  }
+
+  async share() {
+    const version = this.version, name = this.name(), ready = this.blob;
+    try {
+      const blob = ready || await this.encode();
+      if (!this.isCurrent(version)) return;
+      const file = new File([blob], name, { type: 'image/png' });
+      await navigator.share({ files: [file] });
+      this.report(version, 'Shared');
+    } catch (err) {
+      if (err?.name === 'AbortError') return;
+      this.report(version, err?.name === 'NotAllowedError' && !ready ? 'The picture is ready. Press Share again.' : 'Couldn’t share the picture.');
+    }
+  }
+
+  close() {
+    this.clear();
+    if (this.dialog.open) this.dialog.close();
+  }
+
+  clear() {
+    this.version++;
+    URL.revokeObjectURL(this.url);
+    if (this.shot) this.shot.canvas.width = 0;
+    this.shot = null; this.png = null; this.blob = null; this.url = '';
+    this.preview.width = this.preview.height = 0;
+    this.status.textContent = '';
+  }
+}

package/web/yard/renderer.js

@@ -1,6 +1,6 @@
 import * as T from './vendor/engine.js';
 import { WORLDS, PROVIDER_ORDER, characterIndex, CAMERA, SUN, minZoom, overviewFor, clampPan, viewBasis, providerPositions, sessionPose, familiarPose, hash,
-  stage, nextStagingChange, doorFor, arrives, route, clipFor, helperOffset, stationProp, hallActivity, lookTarget, lookLimits, STAGING } from './model.mjs';
+  stage, nextStagingChange, doorFor, arrives, route, clipFor, helperOffset, stationProp, hallActivity, lookTarget, lookLimits, STAGING, photoSize } from './model.mjs';
 
 const ASSETS = new URL('./assets/', import.meta.url);
 const vector = new T.Vector3();
@@ -940,6 +940,51 @@ export class YardRenderer {
     }
     this.dirty=true;this.drawOnce();
   }
+  // The frame on screen at twice its size, without the selection ring, and
+  // the tags shown over it. The live view is left exactly as it was.
+  capture() {
+    if(this.disposed||!this.world||this.renderer.getContext().isContextLost())return null;
+    const w=this.host.clientWidth,h=this.host.clientHeight,buffer=this.renderer.getDrawingBufferSize(new T.Vector2());
+    const size=photoSize(w,h,buffer.x,buffer.y);
+    const viewport=this.renderer.getViewport({copy:v=>v.clone()}),ratio=this.renderer.getPixelRatio();
+    const particleScale=this.effects?.points.material.uniforms.scale,scale=particleScale?.value;
+    const radius=(this.effects?Math.max(...this.effects.preset.size):0)*size.height*this.camera.projectionMatrix.elements[5]/4;
+    const pad=Math.ceil(radius)+1,tw=buffer.x+2*pad,th=buffer.y+2*pad;
+    const canvas=Object.assign(document.createElement('canvas'),{width:size.width,height:size.height});
+    let tags;
+    try {
+      this.positionLabels();
+      tags=this.tags();
+      for(const unit of this.units.values()){unit.ring.material.color.set(unit.session?.provider.color||0xbaaa80);unit.ring.scale.setScalar(1);}
+      const context=canvas.getContext('2d');
+      // Keep particle centers within a padded frustum. Extending the viewport
+      // beyond the canvas crops the margins without enlarging the live buffer.
+      this.renderer.setViewport(-pad/ratio,-pad/ratio,tw/ratio,th/ratio);
+      if(particleScale)particleScale.value=th/2;
+      for(const {x,y}of size.tiles) {
+        this.camera.setViewOffset(size.width,size.height,x-pad,y-pad,tw,th);
+        this.renderer.render(this.scene,this.camera);
+        context.drawImage(this.canvas,x,y);
+      }
+    } finally {
+      this.renderer.setViewport(viewport);
+      if(particleScale)particleScale.value=scale;
+      this.camera.clearViewOffset();
+      this.select(this.selected);
+      this.renderer.render(this.scene,this.camera);
+    }
+    return {canvas,scale:size.scale,skin:this.skin,theme:this.theme,tags};
+  }
+  tags() {
+    const origin=this.host.getBoundingClientRect();
+    const box=el=>{const r=el.getBoundingClientRect();return {x:r.left-origin.left,y:r.top-origin.top,w:r.width,h:r.height};};
+    const text=el=>{const style=getComputedStyle(el);return {text:el.textContent,font:style.fontWeight+' '+style.fontSize+' '+style.fontFamily,box:box(el)};};
+    return [...this.labels.children].filter(el=>el.style.visibility!=='hidden'&&(el.classList.contains('yard-label')||el.classList.contains('yard-crowd'))).map(el=>{
+      if(el.classList.contains('yard-crowd'))return {kind:'chip',box:box(el),lines:[text(el)]};
+      const kind=el.dataset.kind,lines=kind==='session'?[text(el.children[0])]:[...el.children].map(text);
+      return {kind,status:el.dataset.status,color:el.style.getPropertyValue('--unit-color'),box:box(el),lines};
+    });
+  }
   pick(event) {
     const rect=this.canvas.getBoundingClientRect();
     this.pointer.set((event.clientX-rect.left)/rect.width*2-1,-(event.clientY-rect.top)/rect.height*2+1);

package/web/yard/view.js

@@ -21,7 +21,8 @@ const megabytes = bytes => (bytes / 1048576).toFixed(1) + ' MB';
 /** A layout with injected canonical controls. No API, sockets, or business rules. */
 export function initYard(controller) {
   let selected = null, renderer = null, loading = null, failed = false, disposed = false;
-  let sceneAttempt = 0, worldAttempt = 0, pendingRenderer = null, swapReveal = 0;
+  let sceneAttempt = 0, worldAttempt = 0, pendingRenderer = null, swapReveal = 0, photo = null;
+  const closePhoto = () => photo?.close();
   const rows = new Map();
   const motion = matchMedia('(prefers-reduced-motion: reduce)');
   const root = document.documentElement;
@@ -59,6 +60,7 @@ export function initYard(controller) {
     if (allowed) yardChoice.parentElement.removeAttribute('title');
     else yardChoice.parentElement.title = `${skinEntry()?.name || 'This skin'} has no yard yet.`;
     $('yard').hidden = view !== 'yard';
+    if (view !== 'yard') closePhoto();
     $('providers').hidden = view === 'yard';
     $('providers').inert = view === 'yard';
     for (const section of document.querySelectorAll('#app > section.sessions, #app > section.news')) {
@@ -158,6 +160,7 @@ export function initYard(controller) {
         renderer.setActive(sceneVisible());
         hideLoading();
         $('yard-stage').dataset.ready = 'true';
+        $('yard-photo').disabled = false;
       } catch (err) {
         candidate?.dispose();
         if (attempt === sceneAttempt && !disposed) {
@@ -169,6 +172,7 @@ export function initYard(controller) {
     await loading;
   }
   function failScene() {
+    closePhoto();
     const restoreFocus = $('yard-stage').contains(document.activeElement);
     sceneAttempt++; worldAttempt++; loading = null;
     pendingRenderer?.dispose(); pendingRenderer = null;
@@ -178,6 +182,7 @@ export function initYard(controller) {
     $('yard-swap-failure').hidden = true;
     $('yard-failure').hidden = false;
     $('yard-stage').dataset.ready = 'false';
+    $('yard-photo').disabled = true;
     if (restoreFocus) $('yard-retry').focus();
   }
   function roster() {
@@ -304,6 +309,14 @@ export function initYard(controller) {
   $('yard-focus').addEventListener('click',() => renderer?.focus(selected));
   $('yard-zoom-in').addEventListener('click',() => renderer?.zoom(1.2));
   $('yard-zoom-out').addEventListener('click',() => renderer?.zoom(1/1.2));
+  $('yard-photo').hidden = !controller.photo;
+  $('yard-photo').addEventListener('click',async () => {
+    let YardPhoto;
+    try { ({ YardPhoto } = await import('./photo.js')); }
+    catch { controller.toast('Couldn’t open Photo. Reload the page and try again.'); return; }
+    photo ||= new YardPhoto($('yard-photo-dialog'));
+    if (renderer && !disposed && sceneVisible()) photo.open(renderer, $('yard-photo'));
+  });
   $('yard-stage').addEventListener('keydown',event => {
     if (event.target !== $('yard-stage') || event.ctrlKey || event.metaKey || event.altKey) return;
     if (event.key === 'Escape') { select(null); event.preventDefault(); }
@@ -335,7 +348,8 @@ export function initYard(controller) {
   window.addEventListener('pagehide',pageHide);
   window.addEventListener('pageshow',visibility);
   setView(view,{remember:false});
-  return { update, select, setView, dispose() {
+  return { update, select, setView, closePhoto, dispose() {
+    closePhoto();
     disposed=true; sceneAttempt++; worldAttempt++; clearTimeout(swapReveal); observer.disconnect(); pendingRenderer?.dispose(); renderer?.dispose();
     document.removeEventListener('visibilitychange',visibility);
     motion.removeEventListener('change',motionChange);

package/web/yard/yard.css

@@ -16,7 +16,7 @@
 #yard-title { font-size:clamp(22px,2.2vw,34px); letter-spacing:.015em; text-shadow:0 2px 14px var(--bg); }
 #yard-subtitle { margin:6px 0 0; font-size:12px; color:var(--muted); }
 .yard-summary { align-self:flex-start; margin-top:3px; font-size:11px; color:var(--text); padding:8px 11px; border:1px solid var(--yard-line); border-radius:30px; background:color-mix(in srgb,var(--surface) 75%,transparent); white-space:nowrap; }
-.yard-stage { flex:1; min-height:400px; position:relative; overflow:hidden; outline-offset:-3px; }
+.yard-stage { flex:1; min-height:400px; position:relative; overflow:hidden; outline-offset:-3px; display:flex; flex-direction:column; justify-content:flex-end; }
 .yard-stage canvas { display:block; position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; }
 .yard-stage canvas:active { cursor:grabbing; }
 .yard-stage:focus-visible,.yard-row:focus-visible,.yard-label:focus-visible,.yard-crowd:focus-visible,.yard-crowd-pick:focus-visible,.yard-crowd-open:focus-visible,.yard-search input:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
@@ -41,17 +41,19 @@
 .yard-crowd-pick .label-state { font-size:9px; color:#c9c2b4; }
 .yard-crowd-open { font-size:10px; white-space:nowrap; color:#e0bf79; }
 .yard-crowd-pick:hover, .yard-crowd-open:hover { background:#1d3236; }
-.yard-camera { position:absolute; right:18px; bottom:48px; z-index:2; display:flex; gap:5px; }
-.yard-camera .btn { min-height:30px; padding:5px 10px; font-size:11px; background:var(--surface); }
-#yard-help { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 36px); margin:0; padding:4px 12px; border-radius:30px; font-size:10px; color:var(--muted); text-align:center; pointer-events:none; background:color-mix(in srgb,var(--surface) 80%,transparent); }
+.yard-overlay { z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 18px 10px; pointer-events:none; }
+.yard-overlay > * { pointer-events:auto; max-width:100%; }
+.yard-camera { align-self:flex-end; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
+.yard-camera .btn { min-height:30px; padding:5px 10px; font-size:11px; background:var(--surface); white-space:nowrap; }
+#yard-help { width:max-content; margin:6px 0 0; padding:4px 12px; border-radius:30px; font-size:10px; color:var(--muted); text-align:center; pointer-events:none; background:color-mix(in srgb,var(--surface) 80%,transparent); }
 .yard-loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px 16px; min-width:240px; padding:18px 26px; color:var(--text); border:1px solid var(--yard-line); background:var(--surface); z-index:4; border-radius:var(--radius); }
 .yard-loading-size { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
 .yard-loading-bar { grid-column:1 / -1; height:3px; border-radius:3px; overflow:hidden; background:color-mix(in srgb,var(--gold) 18%,transparent); }
 .yard-loading-bar::before { content:""; display:block; width:35%; height:100%; border-radius:inherit; background:var(--gold); animation:yard-loading 1.3s ease-in-out infinite; }
 @keyframes yard-loading { from { transform:translateX(-100%); } to { transform:translateX(290%); } }
 /* A swap keeps the current world on screen, so its notices stay out of the way. */
-.yard-loading[data-mode="swap"],.yard-swap-failure { top:auto; bottom:88px; transform:translateX(-50%); min-width:0; padding:8px 14px; font-size:12px; border-radius:30px; background:color-mix(in srgb,var(--surface) 92%,transparent); }
-.yard-swap-failure { position:absolute; left:50%; z-index:4; display:flex; align-items:center; gap:12px; color:var(--text); border:1px solid var(--border); }
+.yard-loading[data-mode="swap"],.yard-swap-failure { position:static; transform:none; min-width:0; padding:8px 14px; font-size:12px; border-radius:30px; background:color-mix(in srgb,var(--surface) 92%,transparent); }
+.yard-swap-failure { display:flex; align-items:center; gap:12px; color:var(--text); border:1px solid var(--border); }
 .yard-swap-failure .btn { min-height:26px; padding:3px 10px; font-size:11px; }
 .yard-failure { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); max-width:380px; width:85%; padding:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); z-index:4; }
 .yard-failure p { color:var(--muted); line-height:1.5; font-size:13px; }
@@ -112,8 +114,8 @@
   .yard-heading { padding:18px; }
   :root[data-view="yard"] #app > .launcher { padding:10px 14px; }
   :root[data-view="yard"] #launch-heading { display:none; }
-  .yard-camera { right:12px; bottom:56px; }
-  #yard-help { font-size:9px; }
+  .yard-overlay { padding:0 12px 10px; }
+  #yard-help { font-size:9px; margin-top:16px; }
 }
 @media(max-width:640px) { :root[data-view="yard"] .cwd { flex-basis:100%; } }
 :root[data-layout="compact"] .topbar, :root[data-layout="compact"] #app > .launcher, :root[data-layout="compact"] .yard-heading, :root[data-layout="compact"] .yard-news, :root[data-layout="compact"] .yard-sidebar, :root[data-layout="compact"] #yard-help, :root[data-layout="compact"] #yard-failure > p { display:none; }
@@ -121,8 +123,8 @@
 :root[data-layout="compact"] #yard { display:flex; height:100dvh; min-height:0; }
 :root[data-layout="compact"] .yard-main { flex:1; height:auto; min-height:0; }
 :root[data-layout="compact"] .yard-stage { min-height:0; }
-:root[data-layout="compact"] .yard-camera { right:8px; bottom:8px; }
-:root[data-layout="compact"] #yard-offline { top:8px; bottom:auto; left:8px; right:8px; transform:none; flex-wrap:wrap; justify-content:center; text-align:center; border-radius:var(--radius); background:var(--surface); }
+:root[data-layout="compact"] .yard-overlay { padding:0 8px 8px; }
+:root[data-layout="compact"] #yard-offline { position:absolute; z-index:4; top:8px; bottom:auto; left:8px; right:8px; transform:none; flex-wrap:wrap; justify-content:center; text-align:center; border-radius:var(--radius); background:var(--surface); }
 :root[data-layout="compact"] #yard-stage:has(#yard-offline:not([hidden])) :is(canvas, .yard-labels) { opacity:.5; filter:grayscale(1); }
 :root[data-layout="compact"] #yard-stage:has(#yard-offline:not([hidden])) :is(#yard-download, #yard-loading) { display:none; }
 :root[data-expand="none"] :is(#yard-offline-open, #yard-cards, #yard-download-cards, .yard-crowd-open) { display:none; }
@@ -138,3 +140,10 @@
 .yard-row[data-key^="provider:"] .yard-row-sub { display:none; }
 .yard-row[data-status="locked"] .yard-row-sub { display:block; }
 .yard-search input { color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); }
+.yard-photo { width:min(1120px,calc(100vw - 32px)); height:min(860px,calc(100dvh - 48px)); }
+.yard-photo .models-body { display:flex; flex-direction:column; gap:12px; padding-top:14px; overflow:hidden; }
+.yard-photo-preview { flex:1 1 0; min-height:0; width:100%; object-fit:contain; }
+.yard-photo-labels { flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; }
+.yard-photo-labels span { color:var(--muted); font-size:12px; }
+.yard-photo-footer { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:10px; }
+.yard-photo-footer p { flex:1 1 160px; min-width:0; margin:0; color:var(--muted); font-size:13px; }