+ *
+ * ' +
+ ' ' +
+ '
' +
+ // Outside .frame, like .spill/.ctl — the frame's overflow:hidden +
+ // border-radius/clip-path would cut the credit off on circle/pill/mask.
+ // A SPAN, not an : the prescribed Unsplash credit holds two links
+ // (photographer + Unsplash), built per-render in _render().
+ '' +
+ '' + icon +
+ ' ' +
+ '
' +
+ ' or browse files
' + warnIcon +
+ '
' +
+ ' ' +
+ ' ' +
+ 'This photo needs attribution
' +
+ ' ![]()
' +
+ ' ' +
+ ' ' +
+ '
' +
+ // data-dc-edit-transparent: the DC editor's edit-mode picker lets
+ // clicks through for chrome marked with it (EDIT_TRANSPARENT_SEL)
+ // — without it, Replace/Edit clicks in Edit mode are swallowed by
+ // element selection and the controls look dead.
+ '' +
+ '
' +
+ '';
+ this._frame = root.querySelector('.frame');
+ this._ring = root.querySelector('.ring');
+ this._img = root.querySelector('.frame img');
+ this._empty = root.querySelector('.empty');
+ this._cap = root.querySelector('.cap');
+ this._sub = root.querySelector('.sub');
+ this._spill = root.querySelector('.spill');
+ this._ctl = root.querySelector('.ctl');
+ this._credit = root.querySelector('.credit');
+ this._attrError = root.querySelector('.attr-error');
+ // Credit clicks open the link, not browse/reframe.
+ this._credit.addEventListener('click', (e) => e.stopPropagation());
+ this._credit.addEventListener('dblclick', (e) => e.stopPropagation());
+ this._ghost = root.querySelector('.ghost');
+ this._err = null;
+ this._input = root.querySelector('input');
+ this._depth = 0;
+ this._gen = 0;
+ // Encode-in-flight marker (the owning _ingest generation): while set,
+ // the same-src "nothing in flight" clear in _render must not fire —
+ // the stored value still points at the OLD image until the encode
+ // lands, so that clear would unmask the stale image mid-replace.
+ this._swapGen = 0;
+ // Render-owned swap in flight: set when _render assigns a new src,
+ // cleared only by the img's own load/error (or the empty branch).
+ // img.complete CANNOT stand in for this — setting src only QUEUES
+ // the current-request swap (a microtask), so synchronously after an
+ // assignment, complete still reports the OLD settled request. The
+ // pick path does exactly that: the host sets src, credit, and
+ // credit-href back-to-back in one task, and renders #2/#3 would
+ // read the stale complete === true and drop the mask one render
+ // after it was set.
+ this._loadPending = false;
+ // See _render's empty branch: a transient attribution-error wipe of a
+ // showing image must make the follow-up render a replacement (spinner),
+ // not a first fill (blank frame).
+ this._hidShowing = false;
+ this._view = { s: 1, x: 0, y: 0 };
+ this._subFn = () => this._render();
+ // Shadow-DOM listeners live with the shadow DOM — bound once here so
+ // disconnect/reconnect (e.g. React remount) doesn't stack handlers.
+ this._empty.addEventListener('click', () => this._input.click());
+ root.addEventListener('click', (e) => {
+ const act = e.target && e.target.getAttribute && e.target.getAttribute('data-act');
+ if (!act) return;
+ // The hidden controls are opacity-0 but still tabbable — without
+ // this gate a keyboard user could drive them on a read-only share
+ // link (mirrors the dblclick handler's editable gate).
+ if (!this.hasAttribute('data-editable')) return;
+ if (act === 'replace') {
+ this._exitReframe(true);
+ // Host-owned picker (Unsplash modal; it also offers local import).
+ this.dispatchEvent(new CustomEvent('image-slot:pick', {
+ bubbles: true, composed: true, detail: { id: this.id || null }
+ }));
+ }
+ if (act === 'edit') {
+ if (!this._reframes()) return;
+ if (this.hasAttribute('data-reframe')) this._exitReframe(true);
+ else this._enterReframe();
+ }
+ });
+ this._input.addEventListener('change', () => {
+ const f = this._input.files && this._input.files[0];
+ if (f) this._ingest(f);
+ this._input.value = '';
+ });
+ // naturalWidth/Height aren't known until load — re-apply so the cover
+ // baseline is computed from real dimensions, not the 100%×100% fallback.
+ // load/error also release the replacement-in-flight mask (via the
+ // single discipline in _releaseMask): the swap is only revealed once
+ // the new image can actually paint (on error the frame shows its
+ // background, same as a fresh slot with a broken src).
+ this._img.addEventListener('load', () => {
+ this._loadPending = false;
+ this._releaseMask(true);
+ this._applyView();
+ });
+ this._img.addEventListener('error', () => {
+ this._loadPending = false;
+ this._releaseMask(true);
+ });
+ // Gated only on editable — any filled slot can be repositioned/scaled,
+ // regardless of fit. Share links (no writeFile) stay static.
+ this.addEventListener('dblclick', (e) => {
+ if (!this.hasAttribute('data-editable') || !this._reframes()) return;
+ e.preventDefault();
+ if (this.hasAttribute('data-reframe')) this._exitReframe(true);
+ else this._enterReframe();
+ });
+ // Pan + resize both originate on the spill layer. A handle pointerdown
+ // drives an aspect-locked resize anchored at the opposite corner; any
+ // other pointerdown on the spill pans. Offsets are frame-% so a
+ // reframed slot survives responsive resize / PPTX export.
+ this._spill.addEventListener('pointerdown', (e) => {
+ if (e.button !== 0 || !this.hasAttribute('data-reframe')) return;
+ e.preventDefault();
+ e.stopPropagation();
+ this._spill.setPointerCapture(e.pointerId);
+ const rect = this.getBoundingClientRect();
+ const fw = rect.width || 1, fh = rect.height || 1;
+ const corner = e.target.getAttribute && e.target.getAttribute('data-c');
+ let move;
+ if (corner) {
+ // Resize about the OPPOSITE corner. Viewport-px throughout (rect
+ // fw/fh, not clientWidth) so the math survives a transform:scale()
+ // ancestor — deck_stage renders slides scaled-to-fit.
+ const iw = this._img.naturalWidth || 1, ih = this._img.naturalHeight || 1;
+ const contain = (this.getAttribute('fit') || 'cover').toLowerCase() === 'contain';
+ const base = contain ? Math.min(fw / iw, fh / ih) : Math.max(fw / iw, fh / ih);
+ const sx = corner.includes('e') ? 1 : -1;
+ const sy = corner.includes('s') ? 1 : -1;
+ const s0 = this._view.s;
+ const w0 = iw * base * s0, h0 = ih * base * s0;
+ const cx0 = (50 + this._view.x) / 100 * fw;
+ const cy0 = (50 + this._view.y) / 100 * fh;
+ const ox = cx0 - sx * w0 / 2, oy = cy0 - sy * h0 / 2;
+ const diag0 = Math.hypot(w0, h0);
+ const ux = sx * w0 / diag0, uy = sy * h0 / diag0;
+ move = (ev) => {
+ const proj = (ev.clientX - rect.left - ox) * ux +
+ (ev.clientY - rect.top - oy) * uy;
+ const s = clampS(s0 * proj / diag0);
+ const d = diag0 * s / s0;
+ this._view.s = s;
+ this._view.x = (ox + ux * d / 2) / fw * 100 - 50;
+ this._view.y = (oy + uy * d / 2) / fh * 100 - 50;
+ this._clampView();
+ this._applyView();
+ };
+ } else {
+ this.setAttribute('data-panning', '');
+ const start = { px: e.clientX, py: e.clientY, x: this._view.x, y: this._view.y };
+ move = (ev) => {
+ this._view.x = start.x + (ev.clientX - start.px) / fw * 100;
+ this._view.y = start.y + (ev.clientY - start.py) / fh * 100;
+ this._clampView();
+ this._applyView();
+ };
+ }
+ const up = () => {
+ try { this._spill.releasePointerCapture(e.pointerId); } catch {}
+ this._spill.removeEventListener('pointermove', move);
+ this._spill.removeEventListener('pointerup', up);
+ this._spill.removeEventListener('pointercancel', up);
+ this.removeAttribute('data-panning');
+ this._dragUp = null;
+ };
+ // Stashed so _exitReframe (Escape / outside-click mid-drag) can
+ // tear the capture + listeners down synchronously.
+ this._dragUp = up;
+ this._spill.addEventListener('pointermove', move);
+ this._spill.addEventListener('pointerup', up);
+ this._spill.addEventListener('pointercancel', up);
+ });
+ // Wheel zoom stays available inside reframe mode as a trackpad nicety —
+ // zooms toward the cursor (offset' = cursor·(1-k) + offset·k).
+ this.addEventListener('wheel', (e) => {
+ if (!this.hasAttribute('data-reframe')) return;
+ e.preventDefault();
+ const r = this.getBoundingClientRect();
+ const cx = (e.clientX - r.left) / r.width * 100 - 50;
+ const cy = (e.clientY - r.top) / r.height * 100 - 50;
+ const prev = this._view.s;
+ const next = clampS(prev * Math.pow(1.0015, -e.deltaY));
+ if (next === prev) return;
+ const k = next / prev;
+ this._view.s = next;
+ this._view.x = cx * (1 - k) + this._view.x * k;
+ this._view.y = cy * (1 - k) + this._view.y * k;
+ this._clampView();
+ this._applyView();
+ }, { passive: false });
+ }
+
+ connectedCallback() {
+ // Warn once per page — an id-less slot works for the session but
+ // cannot persist, and two id-less slots would share nothing.
+ if (!this.id && !ImageSlot._warned) {
+ ImageSlot._warned = true;
+ console.warn('
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Liquid glass pill — blur + tint + shine
+// ─────────────────────────────────────────────────────────────
+function IOSGlassPill({ children, dark = false, style = {} }) {
+ return (
+
+ {time}
+
+
+
+
+
+
+
+ {/* blur + tint */}
+
+ {/* shine */}
+
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Navigation bar — glass pills + large title
+// ─────────────────────────────────────────────────────────────
+function IOSNavBar({ title = 'Title', dark = false, trailingIcon = true }) {
+ const muted = dark ? 'rgba(255,255,255,0.6)' : '#404040';
+ const text = dark ? '#fff' : '#000';
+ const pillIcon = (content) => (
+
+ {children}
+
+
+ {content}
+
+
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Grouped list (inset card, r:26) + row (52px)
+// ─────────────────────────────────────────────────────────────
+function IOSListRow({ title, detail, icon, chevron = true, isLast = false, dark = false }) {
+ const text = dark ? '#fff' : '#000';
+ const sec = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
+ const ter = dark ? 'rgba(235,235,245,0.3)' : 'rgba(60,60,67,0.3)';
+ const sep = dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)';
+ return (
+
+ {/* back chevron */}
+ {pillIcon(
+
+ )}
+ {/* trailing ellipsis */}
+ {trailingIcon && pillIcon(
+
+ )}
+
+ {/* large title */}
+ {title}
+
+ {icon && (
+
+ )}
+
+ );
+}
+
+function IOSList({ header, children, dark = false }) {
+ const hc = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';
+ const bg = dark ? '#1C1C1E' : '#fff';
+ return (
+ {title}
+ {detail && {detail}}
+ {chevron && (
+
+ )}
+ {!isLast && (
+
+ )}
+
+ {header && (
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Device frame
+// ─────────────────────────────────────────────────────────────
+function IOSDevice({
+ children, width = 402, height = 874, dark = false,
+ title, keyboard = false,
+}) {
+ return (
+ {header}
+ )}
+ {children}
+
+ {/* dynamic island */}
+
+ {/* status bar (absolute) */}
+
+ );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Keyboard — iOS 26 liquid glass
+// ─────────────────────────────────────────────────────────────
+function IOSKeyboard({ dark = false }) {
+ const glyph = dark ? 'rgba(255,255,255,0.7)' : '#595959';
+ const sugg = dark ? 'rgba(255,255,255,0.6)' : '#333';
+ const keyBg = dark ? 'rgba(255,255,255,0.22)' : 'rgba(255,255,255,0.85)';
+
+ // special-key icons
+ const icons = {
+ shift: ,
+ del: ,
+ ret: ,
+ };
+
+ const key = (content, { w, flex, ret, fs = 25, k } = {}) => (
+
+
+ {/* nav + content */}
+
+ {title !== undefined &&
+ {/* home indicator — always on top */}
+ {children}
+ {keyboard &&
+
+
+ {content}
+ );
+
+ const row = (keys, pad = 0) => (
+
+ {keys.map(l => key(l, { flex: true, k: l }))}
+
+ );
+
+ return (
+
+ {/* liquid glass bg — same recipe as nav pills */}
+
+
+
+ {/* autocorrect bar */}
+
+ );
+}
+
+Object.assign(window, {
+ IOSDevice, IOSStatusBar, IOSNavBar, IOSGlassPill, IOSList, IOSListRow, IOSKeyboard,
+});
diff --git a/specs/design-reference/screenshots/01-ctx.png b/specs/design-reference/screenshots/01-ctx.png
new file mode 100644
index 0000000..5fabed1
Binary files /dev/null and b/specs/design-reference/screenshots/01-ctx.png differ
diff --git a/specs/design-reference/screenshots/01-ctx4.png b/specs/design-reference/screenshots/01-ctx4.png
new file mode 100644
index 0000000..3ab51ef
Binary files /dev/null and b/specs/design-reference/screenshots/01-ctx4.png differ
diff --git a/specs/design-reference/screenshots/01-incontext.png b/specs/design-reference/screenshots/01-incontext.png
new file mode 100644
index 0000000..4e91ef4
Binary files /dev/null and b/specs/design-reference/screenshots/01-incontext.png differ
diff --git a/specs/design-reference/screenshots/01-triplet.png b/specs/design-reference/screenshots/01-triplet.png
new file mode 100644
index 0000000..61bca8c
Binary files /dev/null and b/specs/design-reference/screenshots/01-triplet.png differ
diff --git a/specs/design-reference/screenshots/02-ctx.png b/specs/design-reference/screenshots/02-ctx.png
new file mode 100644
index 0000000..02d75d1
Binary files /dev/null and b/specs/design-reference/screenshots/02-ctx.png differ
diff --git a/specs/design-reference/screenshots/02-ctx4.png b/specs/design-reference/screenshots/02-ctx4.png
new file mode 100644
index 0000000..7841c15
Binary files /dev/null and b/specs/design-reference/screenshots/02-ctx4.png differ
diff --git a/specs/design-reference/screenshots/02-incontext.png b/specs/design-reference/screenshots/02-incontext.png
new file mode 100644
index 0000000..6d9a7c8
Binary files /dev/null and b/specs/design-reference/screenshots/02-incontext.png differ
diff --git a/specs/design-reference/screenshots/02-triplet.png b/specs/design-reference/screenshots/02-triplet.png
new file mode 100644
index 0000000..91df742
Binary files /dev/null and b/specs/design-reference/screenshots/02-triplet.png differ
diff --git a/specs/design-reference/screenshots/03-triplet.png b/specs/design-reference/screenshots/03-triplet.png
new file mode 100644
index 0000000..95fad53
Binary files /dev/null and b/specs/design-reference/screenshots/03-triplet.png differ
+ {['"The"', 'the', 'to'].map((w, i) => (
+
+ {i > 0 && }
+
+ ))}
+
+
+ {/* key layout */}
+ {w}
+
+ {row(['q','w','e','r','t','y','u','i','o','p'])}
+ {row(['a','s','d','f','g','h','j','k','l'], 20)}
+
+
+ {/* bottom spacer (emoji+mic area, icons omitted) */}
+
+
+ {key(icons.shift, { w: 45, k: 'shift' })}
+
+
+ {['z','x','c','v','b','n','m'].map(l => key(l, { flex: true, k: l }))}
+
+ {key(icons.del, { w: 45, k: 'del' })}
+
+ {key('ABC', { w: 92.25, fs: 18, k: 'abc' })}
+ {key('', { flex: true, k: 'space' })}
+ {key(icons.ret, { w: 92.25, ret: true, k: 'ret' })}
+
+