const self=window,globalThis=window; __publish({dmAPI,ownerState,showThread,refreshDM,action,bootDM}); "use strict"; (() => { let pending = null; const state = { owner: false, ready: false, apply(owner) { const changed = !state.ready || state.owner !== owner; state.owner = owner; state.ready = true; document.body.dataset.viewer = owner ? 'linnea' : 'visitor'; for (const link of document.querySelectorAll('[data-messages-link]')) link.href = owner ? '/inbox.html' : '/messages.html'; for (const link of document.querySelectorAll('[data-owner-art]')) link.hidden = !owner; for (const badge of document.querySelectorAll('[data-owner-label]')) badge.hidden = !owner; if (changed) window.dispatchEvent(new CustomEvent('rose:viewer', { detail: { owner } })); if (owner && document.getElementById('dmCompose') && !document.querySelector('.dm-owner')) void window.LiveNavigate?.('/inbox.html'); }, refresh() { if (pending) return pending; pending = (async () => { try { const response = await fetch('/api/dm/owner/session', { cache: 'no-store' }); const data = await response.json(); const owner = response.ok && !!data.owner; state.apply(owner); return owner; } catch { state.apply(false); return false; } finally { pending = null; } })(); return pending; } }; window.RoseViewer = state; window.addEventListener('focus', () => { void state.refresh(); }); document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') void state.refresh(); }); void state.refresh(); })(); ; "use strict"; const ownerMode = !!document.querySelector('.dm-owner'); let currentVisitor = null, selectedId = '', unlocked = false, working = false, polling = false, threadKey = '', listKey = '', seenCount = -1; const revealedImages = new Set(); const element = (id) => document.getElementById(id); const dmStatus = (text) => { element('dmStatus').textContent = text; }; class DMError extends Error { status; constructor(message, status) { super(message); this.status = status; } } async function dmAPI(path, body) { const response = await fetch('/api/dm/' + path, { method: body ? 'POST' : 'GET', cache: 'no-store', credentials: 'same-origin', headers: body ? { 'x-dm-request': '1', accept: 'application/json' } : undefined, body: body ? (body instanceof FormData ? body : new URLSearchParams(body)) : undefined }); const result = await response.json(); if (!response.ok) throw new DMError(result.error || 'Could not complete this request.', response.status); return result; } const label = (v) => v.name ? `${v.name} · Visitor #${v.number}` : `Visitor #${v.number}`; function ownerState(value) { unlocked = value; window.RoseViewer?.apply(value); for (const link of document.querySelectorAll('[data-owner-art]')) link.hidden = !value; element('dmUnlock').hidden = value; if (!value) revealedImages.clear(); element('dmOwnerPanel').hidden = !value; if (!value) { selectedId = ''; currentVisitor = null; threadKey = ''; listKey = ''; element('dmThread').replaceChildren(); element('dmVisitors').replaceChildren(); element('dmText').value = ''; element('dmImage').value = ''; element('dmVisitorName').value = ''; element('dmIdentity').textContent = 'Choose a conversation'; element('dmOwnerRecoveryCode').value = ''; element('dmOwnerRecoveryPanel').hidden = true; } } async function showThread(v, forceBottom = false) { currentVisitor = v; const conversation = document.getElementById('dmConversation'); if (conversation) { conversation.hidden = v.paid === false; if (v.paid === false) return; } element('dmIdentity').textContent = label(v); const thread = element('dmThread'), nearBottom = thread.scrollHeight - thread.scrollTop - thread.clientHeight < 80; const key = (v.id ?? v.number) + ':' + (v.name || '') + ':' + v.messages.map(m => m.id + ':' + (m.image?.id || '') + ':' + !!m.imageDeleted).join(','); if (key !== threadKey) { const first = !threadKey; threadKey = key; const nodes = []; if (!v.messages.length) { const empty = document.createElement('p'); empty.className = 'dm-muted'; empty.textContent = ownerMode ? 'No messages yet.' : 'Say hello to start your conversation with Linnea.'; nodes.push(empty); } for (const message of v.messages) { const item = document.createElement('article'); item.className = 'dm-message ' + ((ownerMode ? message.from === 'linnea' : message.from === 'visitor') ? 'dm-mine' : ''); const who = document.createElement('strong'); who.textContent = message.from === 'linnea' ? 'Linnea' : ownerMode ? (v.name || `Visitor #${v.number}`) : 'You'; const body = document.createElement('p'); body.textContent = message.body; const time = document.createElement('time'); time.dateTime = message.at; time.textContent = new Date(message.at).toLocaleString(); item.append(who, body); if (message.image && /^[a-f0-9-]{36}\.(png|jpg|gif|webp)$/.test(message.image.id)) { const id = message.image.id, url = '/api/dm/image/' + encodeURIComponent(id), fullURL = url + '?full=1'; const image = document.createElement('img'); image.className = 'dm-reference'; image.alt = ownerMode ? 'Low-detail preview' : message.image.name || 'Reference image'; image.loading = 'lazy'; image.draggable = false; if (message.image.width && message.image.height) { image.width = message.image.width; image.height = message.image.height; } const link = document.createElement('a'); link.href = fullURL; link.target = '_blank'; link.rel = 'noopener'; link.textContent = 'Open original image'; if (ownerMode) { const preview = document.createElement('button'); preview.type = 'button'; preview.className = 'dm-image-preview'; preview.setAttribute('aria-label', 'Reveal reference image'); const caption = document.createElement('span'); caption.textContent = 'Tiny blurred preview · tap to reveal'; preview.append(image, caption); const reveal = () => { revealedImages.add(id); image.src = fullURL; image.alt = message.image?.name || 'Reference image'; image.classList.remove('dm-preview'); preview.replaceWith(image); link.hidden = false; }; link.hidden = !revealedImages.has(id); if (revealedImages.has(id)) { image.src = fullURL; item.append(image); } else { image.src = url; image.classList.add('dm-preview'); preview.addEventListener('click', reveal); item.append(preview); } const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'dm-delete-image'; remove.textContent = 'Delete image'; remove.addEventListener('click', () => { if (!confirm('Permanently delete this image from the conversation? You do not need to reveal it first.')) return; const targetId = selectedId; void action(async () => { const result = await dmAPI('owner/delete-image', { id: targetId, messageId: message.id }); revealedImages.delete(id); if (selectedId === targetId && result.visitor) await showThread(result.visitor); }); }); item.append(link, remove); } else { image.src = fullURL; item.append(image, link); } } if (message.imageDeleted) { const removed = document.createElement('p'); removed.className = 'dm-muted'; removed.textContent = 'Image removed by Linnea.'; item.append(removed); } item.append(time); nodes.push(item); } thread.replaceChildren(...nodes); if (first || nearBottom || forceBottom) thread.scrollTop = thread.scrollHeight; } const submit = element('dmCompose').querySelector('button'); submit.disabled = working || !ownerMode && v.blocked; if (ownerMode) { element('dmBlock').textContent = v.blocked ? 'Allow new messages' : 'Block new messages'; const name = element('dmVisitorName'); if (document.activeElement !== name) name.value = v.name || ''; } if ((nearBottom || forceBottom) && document.visibilityState === 'visible' && seenCount !== v.messages.length) { seenCount = v.messages.length; await dmAPI(ownerMode ? 'owner/seen' : 'seen', { ...(ownerMode ? { id: selectedId } : {}), count: String(seenCount) }); } } async function refreshDM() { if (polling || working || document.visibilityState !== 'visible') return; polling = true; try { if (ownerMode) { if (!unlocked) return; const result = await dmAPI('owner/list'); const visitors = result.visitors || [], key = JSON.stringify(visitors) + selectedId; if (key !== listKey) { listKey = key; const nodes = []; if (!visitors.length) { const empty = document.createElement('p'); empty.className = 'dm-muted'; empty.textContent = 'No messages yet.'; nodes.push(empty); } for (const v of visitors) { const button = document.createElement('button'); button.type = 'button'; button.className = 'dm-visitor'; button.dataset.visitorId = v.id; button.setAttribute('aria-pressed', String(selectedId === v.id)); const title = document.createElement('strong'); title.textContent = label(v) + (v.unread ? ` · ${v.unread} new` : ''); const preview = document.createElement('span'); preview.textContent = (v.blocked ? 'Blocked · ' : '') + v.preview; button.append(title, preview); button.addEventListener('click', () => { if (selectedId !== v.id) { revealedImages.clear(); element('dmText').value = ''; element('dmImage').value = ''; } selectedId = v.id; element('dmOwnerRecoveryCode').value = ''; element('dmOwnerRecoveryPanel').hidden = true; threadKey = ''; seenCount = -1; listKey = ''; void refreshDM(); }); nodes.push(button); } element('dmVisitors').replaceChildren(...nodes); } if (selectedId) { const result = await dmAPI('owner/thread', { id: selectedId }); if (result.visitor) await showThread(result.visitor); } } else { const result = await dmAPI(currentVisitor?.paid === false ? 'session' : 'thread'); if (result.visitor) await showThread(result.visitor); } } catch (error) { if (error instanceof DMError && error.status === 401 && ownerMode) ownerState(false); if (!(error instanceof DOMException && error.name === 'AbortError')) dmStatus(error instanceof Error ? error.message : String(error)); } finally { polling = false; } } async function action(job) { if (working) return; working = true; dmStatus(''); try { await job(); } catch (error) { if (!(error instanceof DOMException && error.name === 'AbortError')) dmStatus(error instanceof Error ? error.message : String(error)); } finally { working = false; if (currentVisitor) element('dmCompose').querySelector('button').disabled = !ownerMode && currentVisitor.blocked; } } element('dmCompose').addEventListener('submit', event => { event.preventDefault(); if (!element('dmCompose').reportValidity()) return; if (ownerMode && !selectedId) { dmStatus('Choose a conversation first.'); return; } void action(async () => { const targetId = selectedId, input = element('dmText'), text = input.value, imageInput = element('dmImage'), image = imageInput.files?.[0]; if (!text.trim() && !image) { dmStatus('Write a message or choose an image.'); return; } if (image && image.size > 8 * 1024 * 1024) { dmStatus('Reference images must be at most 8 MB.'); return; } let result; if (image) { const form = new FormData(); form.set('image', image); form.set('text', text); if (ownerMode) form.set('id', targetId); result = await dmAPI(ownerMode ? 'owner/image' : 'send-image', form); } else result = await dmAPI(ownerMode ? 'owner/reply' : 'send', { text, ...(ownerMode ? { id: targetId } : {}) }); if (ownerMode && selectedId !== targetId) return; if (input.value === text) input.value = ''; if (imageInput.files?.[0] === image) imageInput.value = ''; if (result.visitor) await showThread(result.visitor, true); }); }); if (ownerMode) { element('dmUnlock').addEventListener('submit', event => { event.preventDefault(); void action(async () => { await dmAPI('owner/unlock', { key: element('dmOwnerKey').value }); element('dmOwnerKey').value = ''; ownerState(true); }); }); element('dmLogout').addEventListener('click', () => { void action(async () => { await dmAPI('owner/logout', {}); ownerState(false); }); }); element('dmName').addEventListener('submit', event => { event.preventDefault(); if (!selectedId) return; void action(async () => { const result = await dmAPI('owner/name', { id: selectedId, name: element('dmVisitorName').value }); if (result.visitor) await showThread(result.visitor); listKey = ''; dmStatus('Name saved.'); }); }); element('dmBlock').addEventListener('click', () => { if (!selectedId) return; void action(async () => { const result = await dmAPI('owner/block', { id: selectedId, blocked: String(!currentVisitor?.blocked) }); if (result.visitor) await showThread(result.visitor); listKey = ''; }); }); element('dmOwnerRecovery').addEventListener('click', () => { if (!selectedId) { dmStatus('Choose a conversation first.'); return; } void action(async () => { const id = selectedId; let result = await dmAPI('owner/recovery', { id }); if (selectedId !== id) return; if (result.needsReplacement) { if (!confirm('This older conversation has no retrievable recovery code. Create a replacement? Its old saved code will stop working, but history and existing browser sessions will remain.')) return; result = await dmAPI('owner/recovery', { id, replace: 'true' }); } if (selectedId !== id || !result.recoveryCode) return; const field = element('dmOwnerRecoveryCode'); field.value = result.recoveryCode; element('dmOwnerRecoveryPanel').hidden = false; try { if (!navigator.clipboard) throw Error('Clipboard unavailable'); await navigator.clipboard.writeText(result.recoveryCode); } catch { field.focus(); field.select(); if (!document.execCommand('copy')) { dmStatus('Select and copy the recovery code above.'); return; } } dmStatus(result.replaced ? 'Replacement recovery code copied. The previous code no longer works.' : 'Recovery code copied.'); }); }); } else { const code = () => element('dmRecoveryCode').value; element('dmCopy').addEventListener('click', () => { void action(async () => { if (!code()) { dmStatus('Generate a replacement code first.'); return; } try { if (!navigator.clipboard) throw Error('Clipboard unavailable'); await navigator.clipboard.writeText(code()); } catch { const field = element('dmRecoveryCode'); field.focus(); field.select(); if (!document.execCommand('copy')) { dmStatus('Select and copy the recovery code above.'); return; } } dmStatus('Recovery code copied.'); }); }); element('dmSave').addEventListener('click', () => { if (!code()) { dmStatus('Generate a replacement code first.'); return; } const url = URL.createObjectURL(new Blob([`Rose of Arts — Visitor #${currentVisitor?.number}\n${location.origin}/messages.html\nRecovery code: ${code()}\nKeep private: this code grants access to your conversation.\n`], { type: 'text/plain' })); const a = document.createElement('a'); a.href = url; a.download = `rose-of-arts-visitor-${currentVisitor?.number}.txt`; document.body.append(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); }); element('dmReplace').addEventListener('click', () => { if (!confirm('Replace your recovery code? Any previously saved recovery code will stop working.')) return; void action(async () => { const result = await dmAPI('recovery', {}); element('dmRecoveryCode').value = result.recoveryCode || ''; element('dmRecovery').open = true; dmStatus('Save your new recovery code. The previous code no longer works.'); }); }); element('dmRestore').addEventListener('submit', event => { event.preventDefault(); void action(async () => { const result = await dmAPI('restore', { code: element('dmRestoreCode').value }); threadKey = ''; seenCount = -1; element('dmRecoveryCode').value = ''; element('dmRestoreCode').value = ''; element('dmText').value = ''; if (result.visitor) await showThread(result.visitor, true); dmStatus('Conversation restored. Your saved recovery code still works.'); }); }); } document.addEventListener('click', event => { const link = event.target instanceof Element ? event.target.closest('nav a,footer a') : null; if (!link || !window.LiveNavigate || event instanceof MouseEvent && (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey)) return; event.preventDefault(); void window.LiveNavigate(new URL(link.href).pathname).catch(error => dmStatus(String(error))); }); window.LiveHooks = { idle: () => !working && !(document.activeElement instanceof Element && document.activeElement.matches('#dmOwnerKey,#dmRestoreCode')), save: () => { }, snapshot: () => ({ selectedId, recoveryOpen: !ownerMode && element('dmRecovery').open }), restore: state => { if (state && typeof state === 'object') { if ('selectedId' in state && typeof state.selectedId === 'string') selectedId = state.selectedId; if (!ownerMode && 'recoveryOpen' in state) element('dmRecovery').open = !!state.recoveryOpen; } } }; async function bootDM() { try { if (!ownerMode) { const access = { owner: window.RoseViewer ? await window.RoseViewer.refresh() : !!(await dmAPI('owner/session')).owner }; if (access.owner) { if (!window.RoseViewer) void window.LiveNavigate?.('/inbox.html'); return; } for (const link of document.querySelectorAll('[data-owner-art]')) link.hidden = !access.owner; } if (ownerMode) { ownerState(!!(await dmAPI('owner/session')).owner); } else { let result = await dmAPI('session'); if (!result.visitor) result = await dmAPI('start', {}); if (result.recoveryCode) { element('dmRecoveryCode').value = result.recoveryCode; element('dmRecovery').open = true; } if (result.visitor) await showThread(result.visitor, true); } await refreshDM(); } catch (error) { dmStatus(error instanceof Error ? error.message : String(error)); } } void bootDM(); setInterval(() => { void refreshDM(); }, 4000); document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') void refreshDM(); }); window.addEventListener('rose:viewer', event => { const identity = event.detail; if (ownerMode && identity && unlocked !== identity.owner) ownerState(identity.owner); }); // Touch uses native momentum/chained page scrolling. Mouse/pen drags scroll // the thread first, then the page at its boundaries; controls remain native. for (const card of document.querySelectorAll('.dm-card')) { let drag = null; const end = () => { if (drag && card.hasPointerCapture(drag.id)) card.releasePointerCapture(drag.id); drag = null; document.body.classList.remove('dm-grabbing'); }; card.addEventListener('pointerdown', event => { if (event.pointerType === 'touch' || event.button !== 0 || event.shiftKey || event.ctrlKey || event.metaKey || !(event.target instanceof Element) || event.target.closest('input,textarea,button,a,select,summary,label,[contenteditable]')) return; drag = { id: event.pointerId, y: event.clientY, startY: event.clientY, thread: event.target.closest('.dm-thread'), moved: false }; card.setPointerCapture(event.pointerId); event.preventDefault(); }); card.addEventListener('pointermove', event => { if (!drag || drag.id !== event.pointerId) return; if (!drag.moved && Math.abs(event.clientY - drag.startY) < 4) return; drag.moved = true; document.body.classList.add('dm-grabbing'); let remaining = drag.y - event.clientY; drag.y = event.clientY; if (drag.thread) { const before = drag.thread.scrollTop; drag.thread.scrollTop += remaining; remaining -= drag.thread.scrollTop - before; } if (remaining) window.scrollBy({ top: remaining, behavior: 'instant' }); event.preventDefault(); }); for (const type of ['pointerup', 'pointercancel', 'lostpointercapture']) card.addEventListener(type, end); window.addEventListener('blur', end); } ; "use strict"; (() => { const owner = !!document.querySelector('.dm-owner'), host = document.getElementById(owner ? 'commissionOwner' : 'commissionCustomer'); if (!host) return; const money = (amount) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(amount / 100); let busy = false, dirty = false, loaded = false, latest = null; const node = (tag, text = '') => { const element = document.createElement(tag); element.textContent = text; return element; }; const status = node('p'); status.setAttribute('role', 'status'); host.append(status); async function api(route = '', body) { const response = await fetch('/api/commissions' + route, { method: body ? 'POST' : 'GET', cache: 'no-store', headers: body ? { 'x-dm-request': '1', 'content-type': 'application/json' } : undefined, body: body ? JSON.stringify(body) : undefined }); const result = await response.json(); if (!response.ok) throw Error(result.error || 'Could not update commissions.'); return result; } async function action(job) { if (busy) return; busy = true; status.textContent = ''; try { await job(); } catch (error) { status.textContent = error instanceof Error ? error.message : String(error); } finally { busy = false; } } function input(parent, label, value, multiline = false) { const wrap = node('label', label), field = multiline ? node('textarea') : node('input'); field.value = value; field.addEventListener('input', () => { dirty = true; }); wrap.append(field); parent.append(wrap); return field; } function button(parent, label, click) { const item = node('button', label); item.type = 'button'; item.addEventListener('click', click); parent.append(item); return item; } function policy(parent, settings) { parent.append(node('h3', 'Initial consultation payment'), node('p', settings.initialFeePolicy), node('h3', 'Store policy'), node('p', settings.policy)); for (const stage of settings.refundStages) parent.append(node('p', stage.label + ' · ' + stage.percent + '% refundable' + (stage.explanation ? ' — ' + stage.explanation : ''))); } async function pay(body) { const result = await api('/checkout', body); const url = new URL(result.url); if (url.origin !== 'https://checkout.stripe.com') throw Error('Unexpected checkout address.'); location.assign(url.href); } function customer(state) { const old = host.querySelector('[data-commission-content]'); if (old && (dirty || busy || old.querySelector('input:focus,textarea:focus,select:focus'))) return; old?.remove(); const panel = node('section'); panel.dataset.commissionContent = ''; host.prepend(panel); const settings = state.settings; panel.append(node('h2', settings.title), node('p', settings.description)); if (!settings.published) { panel.append(node('p', 'Linnea is preparing her commission form and store policy. Private messaging is reserved for paying commission customers.')); return; } if (!state.ready) panel.append(node('p', 'Payments are not connected yet. No payment will be taken.')); const pending = state.orders.find(order => order.kind === 'entry' && ['creating', 'pending'].includes(order.status)); if (!state.paid && pending) { panel.append(node('h3', 'Continue your existing request'), node('p', pending.title + ' · ' + money(pending.amount))); for (const answer of pending.answers || []) panel.append(node('p', answer.label + ': ' + answer.value)); panel.append(node('p', pending.initialFeePolicy || ''), node('p', pending.policy || '')); button(panel, 'Continue Stripe checkout', () => { void action(() => pay({ kind: 'entry', revision: settings.revision, accepted: true })); }); } else if (!state.paid) { const form = node('form'), answers = {}; let selectedTotal = settings.fee; const total = node('p'); total.className = 'usage-total'; const updateTotal = () => { selectedTotal = settings.fee; for (const field of settings.fields) if (field.kind === 'choice') selectedTotal += field.choices.find(choice => choice.id === answers[field.id])?.price || 0; total.textContent = 'Initial consultation fee: ' + money(selectedTotal) + ' — separate from the final commission price.'; }; for (const field of settings.fields) { const wrap = node('label', field.label + (field.required ? ' *' : '')); wrap.append(node('small', field.explanation)); if (field.kind === 'text') { const area = node('textarea'); area.maxLength = 4000; area.required = field.required; area.addEventListener('input', () => { answers[field.id] = area.value; dirty = true; }); wrap.append(area); } else { const select = node('select'), explanation = node('p'); select.required = field.required; const empty = node('option', 'Choose an option'); empty.value = ''; select.append(empty); for (const choice of field.choices) { const item = node('option', choice.label + ' · ' + money(choice.price)); item.value = choice.id; select.append(item); } select.addEventListener('change', () => { answers[field.id] = select.value; explanation.textContent = field.choices.find(choice => choice.id === select.value)?.explanation || ''; dirty = true; updateTotal(); }); wrap.append(select, explanation); } form.append(wrap); } policy(form, settings); const label = node('label'), agree = node('input'); agree.type = 'checkbox'; agree.required = true; label.append(agree, ' I have read and agree to the store and refund policy above.'); const submit = node('button', 'Agree and pay with Stripe'); submit.type = 'submit'; submit.disabled = !state.ready; form.append(total, label, submit); updateTotal(); form.addEventListener('submit', event => { event.preventDefault(); void action(async () => { await fetch('/api/dm/start', { method: 'POST', headers: { 'x-dm-request': '1' } }); await pay({ kind: 'entry', revision: settings.revision, accepted: agree.checked, answers }); }); }); panel.append(form); } else { panel.append(node('p', 'Your initial payment is verified. Use the private conversation below to coordinate with Linnea.')); const quote = state.orders.find(order => order.kind === 'final' && ['offered', 'creating', 'pending'].includes(order.status)); if (quote) { const form = node('form'); form.append(node('h3', quote.title), node('p', quote.description), node('p', 'Final commission payment: ' + money(quote.amount) + '. The initial consultation fee is separate.')); policy(form, settings); const label = node('label'), agree = node('input'); agree.type = 'checkbox'; agree.required = true; label.append(agree, ' I accept this scope, final price, and store/refund policy.'); const submit = node('button', 'Accept quote and pay'); submit.disabled = !state.ready; form.append(label, submit); form.addEventListener('submit', event => { event.preventDefault(); void action(() => pay({ kind: 'final', orderId: quote.id, revision: settings.revision, accepted: agree.checked })); }); panel.append(form); } } for (const order of state.orders) { const details = node('details'), summary = node('summary', order.title + ' · ' + money(order.amount) + ' · ' + order.status + (order.disputed ? ' · disputed' : '')); details.append(summary); if (order.refunded) details.append(node('p', 'Refunded: ' + money(order.refunded))); for (const answer of order.answers || []) details.append(node('p', answer.label + ': ' + answer.value + (answer.price !== undefined ? ' · ' + money(answer.price) : ''))); if (order.policy) { details.append(node('p', 'Policy accepted at checkout:'), node('p', order.initialFeePolicy || ''), node('p', order.policy)); for (const stage of order.refundStages || []) details.append(node('p', stage.label + ' · ' + stage.percent + '% — ' + stage.explanation)); } if (order.receipt) { const link = node('a', 'Stripe receipt'); link.href = order.receipt; link.target = '_blank'; link.rel = 'noopener'; details.append(link); } panel.append(details); } } function editor(state) { if (loaded) return; loaded = true; const settings = state.settings, details = node('details'), summary = node('summary', 'Commission form, prices & store policy'), form = node('form'); details.append(summary, form); host.prepend(details); form.append(node('p', 'USD · Michigan, US. The initial payment is a separate consultation fee. Publish only after reviewing your prices and complete store/refund terms. Stripe connection: ' + (state.ready ? 'configured' : state.connection?.apiKeyConfigured ? state.connection.mode + ' API connected; payment notifications pending' : 'not connected'))); const title = input(form, 'Form title', settings.title), description = input(form, 'Introduction / explanation', settings.description, true), fee = input(form, 'Base consultation fee (USD)', String(settings.fee / 100)); fee.setAttribute('type', 'number'); fee.setAttribute('min', '0'); fee.setAttribute('step', '0.01'); const fields = node('div'); form.append(fields); const records = []; const addField = (field) => { const box = node('fieldset'), name = input(box, 'Field label', field.label), explanation = input(box, 'Explanation', field.explanation, true), type = node('select'); for (const kind of ['choice', 'text']) { const option = node('option', kind === 'choice' ? 'Priced options' : 'Written answer'); option.value = kind; type.append(option); } type.value = field.kind; box.append(type); const required = node('input'); required.type = 'checkbox'; required.checked = field.required; const requiredLabel = node('label'); requiredLabel.append(required, ' Required'); box.append(requiredLabel); const choices = node('div'); box.append(choices); const options = []; const addOption = (option) => { const item = node('fieldset'), label = input(item, 'Option name', option.label), price = input(item, 'Additional consultation price (USD)', String(option.price / 100)), help = input(item, 'Explanation for this option', option.explanation, true); price.setAttribute('type', 'number'); price.setAttribute('min', '0'); price.setAttribute('step', '0.01'); const entry = { box: item, read: () => ({ id: option.id, label: label.value, price: Math.round(Number(price.value) * 100), explanation: help.value }) }; options.push(entry); button(item, 'Remove option', () => { item.remove(); options.splice(options.indexOf(entry), 1); dirty = true; }); choices.append(item); }; for (const option of field.choices) addOption(option); button(choices, 'Add priced option', () => { addOption({ id: crypto.randomUUID(), label: '', price: 0, explanation: '' }); dirty = true; }); const record = { box, read: () => ({ id: field.id, label: name.value, explanation: explanation.value, kind: type.value, required: required.checked, choices: type.value === 'choice' ? options.map(option => option.read()) : [] }) }; records.push(record); button(box, 'Remove field', () => { box.remove(); records.splice(records.indexOf(record), 1); dirty = true; }); type.addEventListener('change', () => { choices.hidden = type.value !== 'choice'; dirty = true; }); choices.hidden = type.value !== 'choice'; fields.append(box); }; for (const field of settings.fields) addField(field); button(form, 'Add form field', () => { addField({ id: crypto.randomUUID(), kind: 'choice', label: '', explanation: '', required: true, choices: [] }); dirty = true; }); const initialTerms = input(form, 'Separate initial-fee terms — what it buys, when it is earned, cancellation/refund conditions', settings.initialFeePolicy, true); const terms = input(form, 'Store policy — scope, separate fee, cancellations, progress stages, refunds, delivery and acceptance', settings.policy, true); terms.setAttribute('rows', '12'); const stages = node('div'); form.append(stages); const stageRecords = []; const addStage = (stage) => { const box = node('fieldset'), label = input(box, 'Progress stage', stage.label), percent = input(box, 'Refundable percentage', String(stage.percent)), explanation = input(box, 'What this percentage applies to / conditions', stage.explanation, true); percent.setAttribute('type', 'number'); percent.setAttribute('min', '0'); percent.setAttribute('max', '100'); percent.setAttribute('step', '0.01'); const record = { read: () => ({ label: label.value, percent: Number(percent.value), explanation: explanation.value }) }; stageRecords.push(record); button(box, 'Remove stage', () => { box.remove(); stageRecords.splice(stageRecords.indexOf(record), 1); dirty = true; }); stages.append(box); }; for (const stage of settings.refundStages) addStage(stage); button(form, 'Add refund stage', () => { addStage({ label: '', percent: 0, explanation: '' }); dirty = true; }); const published = node('input'); published.type = 'checkbox'; published.checked = settings.published; const label = node('label'); label.append(published, ' Open commissions and publish this form/policy'); const submit = node('button', 'Save commission settings'); form.append(label, submit); form.addEventListener('input', () => { dirty = true; }); form.addEventListener('submit', event => { event.preventDefault(); void action(async () => { const result = await api('/owner/settings', { revision: settings.revision, title: title.value, description: description.value, fee: Math.round(Number(fee.value) * 100), fields: records.map(record => record.read()), policy: terms.value, initialFeePolicy: initialTerms.value, refundStages: stageRecords.map(record => record.read()), published: published.checked }); settings.revision = result.revision; dirty = false; status.textContent = 'Commission settings saved.'; }); }); } const quotePanel = owner ? node('section') : null; let selected = ''; function ownerQuote(state) { const target = document.querySelector('.dm-visitor[aria-pressed="true"]')?.dataset.visitorId || ''; if (target === selected && quotePanel?.childElementCount) return; selected = target; quotePanel.replaceChildren(); if (!target) return; quotePanel.append(node('h3', 'Commission request & final quote')); const orders = state.orders.filter(order => order.visitorId === target); for (const order of orders) { quotePanel.append(node('p', order.title + ' · ' + money(order.amount) + ' · ' + order.status + (order.refunded ? ' · refunded ' + money(order.refunded) : ''))); for (const answer of order.answers || []) quotePanel.append(node('p', answer.label + ': ' + answer.value)); } if (!orders.some(order => order.kind === 'entry' && order.status === 'paid' && !order.disputed && order.refunded < order.amount)) { quotePanel.append(node('p', 'This visitor has not paid the initial fee.')); return; } if (orders.some(order => order.kind === 'final' && ['creating', 'pending', 'paid'].includes(order.status))) { quotePanel.append(node('p', 'Final checkout is already pending or paid. Manage refunds in the Stripe dashboard according to the accepted policy.')); return; } const form = node('form'), title = input(form, 'Final quote title', ''), description = input(form, 'Agreed scope, delivery and acceptance details', '', true), amount = input(form, 'Final payment (USD), separate from the initial fee', ''); amount.setAttribute('type', 'number'); amount.setAttribute('step', '0.01'); amount.setAttribute('min', '0.50'); form.append(node('button', 'Offer final quote')); form.addEventListener('submit', event => { event.preventDefault(); const visitorId = target; void action(async () => { await api('/owner/quote', { visitorId, title: title.value, description: description.value, amount: Math.round(Number(amount.value) * 100) }); dirty = false; selected = ''; status.textContent = 'Quote offered. The customer must accept it before paying.'; await refresh(); }); }); quotePanel.append(form); } async function refresh() { if (busy || document.visibilityState === 'hidden') return; try { if (owner && !window.RoseViewer?.owner) { loaded = false; selected = ''; host.querySelector('details')?.remove(); quotePanel?.replaceChildren(); return; } latest = await api(owner ? '/owner/state' : ''); if (owner) { editor(latest); ownerQuote(latest); } else customer(latest); } catch (error) { if (!(error instanceof DOMException && error.name === 'AbortError')) status.textContent = String(error); } } if (quotePanel) { host.append(quotePanel); document.getElementById('dmVisitors')?.addEventListener('click', () => { selected = ''; setTimeout(() => { if (latest) ownerQuote(latest); }, 0); }); } const previous = window.LiveHooks; window.LiveHooks = { ...previous, save: () => previous?.save(), idle: () => !dirty && !busy && (previous?.idle() ?? true) }; window.addEventListener('rose:viewer', () => { void refresh(); }); void refresh(); setInterval(() => { void refresh(); }, 4000); })(); ; "use strict"; (() => { const fontFields = ['fontBody', 'fontHeading', 'fontTitle', 'fontDescription']; const fontSelect = (key) => document.getElementById(key); const labels = { home: 'Landing page', gallery: 'Gallery', story: 'Story', blog: 'Blog', messages: 'Messages', inbox: 'Linnea’s inbox', upload: 'Add art', 'private-gallery': 'Inspirations', appearance: 'Appearance' }; let settings = null, image = '', saving = false, copyLoading = false, dirty = false, previewURL = ''; const form = document.getElementById('appearanceForm'); const field = (id) => document.getElementById(id); const select = document.getElementById('appearancePage'); const preview = document.getElementById('appearancePreview'); const current = document.body.dataset.appearancePage || 'home'; const sizeText = (bytes) => bytes < 1000 ? bytes + ' B' : bytes < 1000000 ? (bytes / 1000).toFixed(1) + ' KB' : bytes < 1000000000 ? (bytes / 1000000).toFixed(2) + ' MB' : (bytes / 1000000000).toFixed(2) + ' GB'; async function refreshUsage() { const local = document.getElementById('usageLocal'), cloud = document.getElementById('usageCloud'), status = document.getElementById('usageStatus'); if (!local || !cloud || !status || !window.RoseViewer?.owner) return; status.textContent = 'Measuring storage…'; try { const response = await fetch('/api/owner/usage', { cache: 'no-store' }); if (!response.ok) throw Error('Could not load usage.'); const data = await response.json(); if (!window.RoseViewer?.owner) return; document.getElementById('usageHosting').textContent = data.cloudflare.reason; local.replaceChildren(); const heading = document.createElement('h2'); heading.textContent = 'Total storage · 10 GB budget'; const total = document.createElement('p'); total.className = 'usage-total'; const stored = data.local.mediaBytes + data.local.dataBytes, limit = data.freeTier.r2Storage.limit, percent = (stored / limit * 100).toLocaleString(undefined, { maximumFractionDigits: 8 }); total.textContent = sizeText(stored) + ' / ' + (limit / 1e9) + ' GB · ' + percent + '% used'; local.append(heading, total); const budget = document.createElement('progress'); budget.max = data.freeTier.r2Storage.limit; budget.value = stored; budget.setAttribute('aria-label', data.hosting === 'cloudflare' ? 'Stored site bytes compared with the 10 GB budget' : 'Local files compared with the R2 free storage reference'); const sizing = document.createElement('p'); sizing.textContent = sizeText(data.local.mediaBytes) + ' media + ' + sizeText(data.local.dataBytes) + ' content data. ' + (data.hosting === 'cloudflare' ? 'This measures stored site files; Cloudflare billing uses additional counters and monthly averages.' : 'This compares files on this PC with a 10 GB budget; it is not measured Cloudflare usage.'); local.append(budget, sizing); const list = document.createElement('dl'); for (const group of data.local.media) { const term = document.createElement('dt'); term.textContent = group.label; const value = document.createElement('dd'); value.textContent = sizeText(group.bytes) + ' · ' + group.files + ' files'; list.append(term, value); } local.append(list); const note = document.createElement('p'); note.textContent = data.hosting === 'cloudflare' ? 'Retained files count toward stored bytes. D1 metadata, versions and account-wide usage are additional.' : 'Retained files count toward local storage. This is a measured local footprint, not Cloudflare storage usage.'; local.append(note); cloud.replaceChildren(); const labels = { workersRequests: 'Workers requests', r2Storage: 'R2 Standard storage', r2Writes: 'R2 writes / lists', r2Reads: 'R2 reads', d1Storage: 'D1 stored data', d1Reads: 'D1 rows read', d1Writes: 'D1 rows written' }; for (const [key, metric] of Object.entries(data.freeTier)) { const row = document.createElement('div'); row.className = 'usage-metric'; const link = document.createElement('a'); link.href = metric.source; link.target = '_blank'; link.rel = 'noopener'; link.textContent = labels[key] || key; const allowance = document.createElement('span'); allowance.textContent = (metric.unit.startsWith('byte') ? (metric.limit / 1e9) + ' GB' : metric.limit.toLocaleString()) + ' / ' + metric.period; const used = document.createElement('strong'); used.textContent = 'Usage not connected'; row.append(link, allowance, used); cloud.append(row); } status.textContent = 'Updated ' + new Date(data.updated).toLocaleTimeString() + '. Cloudflare usage will be available after cloud hosting and account tracking are connected.'; } catch (error) { status.textContent = String(error); } } document.getElementById('usageRefresh')?.addEventListener('click', () => { void refreshUsage(); }); const copyOriginals = new WeakMap(); const dynamicCopy = { gallery: [['000000000001', '#gallery>section:first-child>h2', 'Commissions'], ['000000000002', '#gallery>section:nth-child(2)>h2', 'Creative'], ['000000000003', '#gallery .empty', 'No pieces here yet.'], ['000000000004', '.art-edit-button', 'Edit'], ['000000000005', '.piece .del', 'remove']], blog: [['000000000006', '.post-actions button:first-child', 'Edit'], ['000000000007', '.post-actions button:nth-child(2)', 'Remove'], ['000000000008', '.comment-actions button:first-child', 'Reply'], ['000000000009', '.comment-actions button:nth-child(2)', 'Remove'], ['00000000000a', '#blogPosts>.empty', 'No posts yet. The next story starts here.']] }; let copySequence = 0; const pageURLs = { home: '/', gallery: '/gallery.html', story: '/story.html', blog: '/blog.html', messages: '/messages.html', inbox: '/inbox.html', upload: '/upload.html', 'private-gallery': '/private-gallery.html', appearance: '/appearance.html' }; function applyCopy() { if (!settings) return; for (const [key, selector, original] of dynamicCopy[current] || []) for (const node of document.querySelectorAll(selector)) { if (!copyOriginals.has(node)) copyOriginals.set(node, original); node.dataset.siteCopy = key; } for (const node of document.querySelectorAll('[data-site-copy]')) { if (node.closest('#pageCopyFields,#sharedCopyFields,#contentTextFields')) continue; if (!copyOriginals.has(node)) copyOriginals.set(node, node.textContent || ''); const shared = node.dataset.copyScope === 'shared'; const value = settings.pages[shared ? 'shared' : current]?.copy?.[node.dataset.siteCopy]; const text = value === undefined ? copyOriginals.get(node) : value; if (node.textContent !== text) node.textContent = text; } for (const attr of ['placeholder', 'title', 'aria-label']) for (const node of document.querySelectorAll('[data-copy-' + attr + ']')) { const key = node.getAttribute('data-copy-' + attr); const shared = !!node.closest('nav,footer'); const originalKey = 'copyOriginal' + attr.replace('-', ''); if (node.dataset[originalKey] === undefined) node.dataset[originalKey] = node.getAttribute(attr) || ''; const text = settings.pages[shared ? 'shared' : current]?.copy?.[key] ?? node.dataset[originalKey]; if (node.getAttribute(attr) !== text) node.setAttribute(attr, text); } } function copyValues(id) { const values = { ...(settings?.pages[id === 'sharedCopyFields' ? 'shared' : select?.value || 'home']?.copy || {}) }; for (const input of document.querySelectorAll('#' + id + ' textarea[data-key]')) { if (input.value !== input.dataset.original) values[input.dataset.key] = input.value; else delete values[input.dataset.key]; } return values; } async function loadCopy() { if (!select || !settings) return; copyLoading = true; const selected = select.value, sequence = ++copySequence; const response = await fetch(pageURLs[selected], { cache: 'no-store' }); if (!response.ok) throw Error('Could not load page wording.'); const parsed = new DOMParser().parseFromString(await response.text(), 'text/html'); if (sequence !== copySequence || !settings) return; const pageFields = document.getElementById('pageCopyFields'), sharedFields = document.getElementById('sharedCopyFields'); pageFields.replaceChildren(); sharedFields.replaceChildren(); const seen = new Set(); function add(key, original, shared, context = '') { if (seen.has(key + (shared ? 'shared' : 'page'))) return; seen.add(key + (shared ? 'shared' : 'page')); const label = document.createElement('label'), caption = document.createElement('span'), input = document.createElement('textarea'); caption.textContent = (context ? context + ': ' : '') + (original.length > 100 ? original.slice(0, 100) + '…' : original); input.dataset.key = key; input.dataset.original = original; input.value = settings.pages[shared ? 'shared' : selected]?.copy?.[key] ?? original; input.rows = original.length > 100 ? 4 : 2; input.maxLength = 12000; label.append(caption, input); (shared ? sharedFields : pageFields).append(label); } for (const [key, selector, original] of dynamicCopy[selected] || []) add(key, original, false, selector.includes('h2') ? 'Section heading' : 'Button / message'); for (const node of parsed.querySelectorAll('[data-site-copy]')) add(node.dataset.siteCopy, node.textContent || '', node.dataset.copyScope === 'shared', node.tagName === 'OPTION' ? 'Selection label' : node.tagName === 'TITLE' ? 'Browser tab title' : ''); for (const attr of ['placeholder', 'title', 'aria-label']) for (const node of parsed.querySelectorAll('[data-copy-' + attr + ']')) add(node.getAttribute('data-copy-' + attr), node.getAttribute(attr) || '', !!node.closest('nav,footer')); await loadContent(selected, sequence); if (sequence === copySequence) copyLoading = false; } async function loadContent(selected, sequence) { const panel = document.getElementById('contentTextEditor'), container = document.getElementById('contentTextFields'); container.replaceChildren(); panel.hidden = !['gallery', 'private-gallery', 'blog'].includes(selected); if (panel.hidden || !window.RoseViewer?.owner) return; const blog = selected === 'blog', privateArt = selected === 'private-gallery'; const response = await fetch(blog ? '/api/posts' : privateArt ? '/api/private-gallery/works' : '/api/works', { cache: 'no-store' }); if (!response.ok) throw Error('Could not load existing content.'); const items = await response.json(); if (sequence !== copySequence || !window.RoseViewer?.owner) return; for (const item of items) { const card = document.createElement('div'); card.className = 'copy-content-card'; const titleLabel = document.createElement('label'); titleLabel.textContent = 'Title'; const title = document.createElement('input'); title.value = item.title; title.maxLength = blog ? 160 : 120; titleLabel.append(title); const bodyLabel = document.createElement('label'); bodyLabel.textContent = blog ? 'Post text' : 'Description'; const text = document.createElement('textarea'); text.value = blog ? item.body || '' : item.description || ''; text.rows = 5; text.maxLength = blog ? 50000 : 500; bodyLabel.append(text); const button = document.createElement('button'); button.type = 'button'; button.textContent = blog ? 'Save this post' : 'Save this artwork'; const status = document.createElement('p'); status.setAttribute('role', 'status'); button.addEventListener('click', () => { if (!window.RoseViewer?.owner) return; button.disabled = true; void (async () => { try { const data = new FormData(); data.set('id', item.id); data.set('title', title.value); data.set(blog ? 'body' : 'description', text.value); const response = await fetch(blog ? '/blog/save' : privateArt ? '/api/private-gallery/edit' : '/edit', { method: 'POST', headers: { accept: 'application/json', 'x-dm-request': '1' }, body: blog ? new URLSearchParams({ id: item.id, title: title.value, body: text.value }) : data }); const result = await response.json(); if (!response.ok) throw Error(result.error || 'Could not save text.'); status.textContent = 'Saved.'; } catch (error) { status.textContent = String(error); } finally { button.disabled = false; } })(); }); card.append(titleLabel, bodyLabel, button, status); container.append(card); } if (!items.length) container.textContent = 'No entries yet.'; } new MutationObserver(() => applyCopy()).observe(document.body, { childList: true, subtree: true }); function apply(theme, node) { const family = (key) => settings?.fonts?.[theme[key] || 'original']?.family || ''; const body = family('fontBody') || 'Georgia, \"Times New Roman\", serif'; const heading = family('fontHeading') || body; node.style.setProperty('--font-body', body); node.style.setProperty('--font-heading', heading); node.style.setProperty('--font-title', family('fontTitle') || heading); node.style.setProperty('--font-description', family('fontDescription') || body); node.style.setProperty('--landing-opacity', String((theme.landingOpacity ?? 80) / 100)); node.style.setProperty('--bg', theme.background); node.style.setProperty('--ink', theme.text); node.style.setProperty('--accent', theme.accent); node.style.setProperty('--page-image', theme.image ? 'url("/backgrounds/' + theme.image + '")' : 'none'); } function edited() { return { copy: copyValues('pageCopyFields'), landingOpacity: Number(field('landingOpacity').value), background: field('appearanceBackground').value, text: field('appearanceText').value, accent: field('appearanceAccent').value, image, fontBody: fontSelect('fontBody').value, fontHeading: fontSelect('fontHeading').value, fontTitle: fontSelect('fontTitle').value, fontDescription: fontSelect('fontDescription').value }; } function showPreview() { if (!preview) return; apply(edited(), preview); if (previewURL) preview.style.setProperty('--page-image', 'url("' + previewURL + '")'); } function choose() { if (!settings || !select) return; dirty = false; if (previewURL) { URL.revokeObjectURL(previewURL); previewURL = ''; } const theme = settings.pages[select.value] || settings.defaults; image = theme.image; field('landingOpacity').value = String(theme.landingOpacity ?? 80); document.getElementById('landingOpacityControl').hidden = select.value !== 'home'; document.getElementById('landingOpacityValue').textContent = field('landingOpacity').value + '%'; preview?.classList.toggle('landing-card-preview', select.value === 'home'); for (const key of fontFields) fontSelect(key).value = theme[key] || 'original'; field('appearanceBackground').value = theme.background; field('appearanceText').value = theme.text; field('appearanceAccent').value = theme.accent; field('appearanceImage').value = ''; showPreview(); void loadCopy().catch(error => { document.getElementById('appearanceStatus').textContent = String(error); }); } async function refresh() { try { const response = await fetch('/api/appearance', { cache: 'no-store' }); if (!response.ok) return; settings = await response.json(); if (form) { for (const key of fontFields) { const select = fontSelect(key); if (!select.options.length) for (const [value, font] of Object.entries(settings.fonts)) { const option = document.createElement('option'); option.value = value; option.textContent = font.label; if (font.family) option.style.fontFamily = font.family; select.append(option); } } } apply(settings.pages[current] || settings.defaults, document.documentElement); applyCopy(); if (form && !saving && !dirty && !form.contains(document.activeElement)) choose(); } catch (error) { if (error instanceof DOMException && error.name === 'AbortError') return; const status = document.getElementById('appearanceStatus'); if (status) status.textContent = 'Could not load appearance. Please try again.'; } } if (form && select) { form.addEventListener('input', () => { dirty = true; }); form.addEventListener('change', () => { dirty = true; }); for (const [value, label] of Object.entries(labels)) { const option = document.createElement('option'); option.value = value; option.textContent = label; select.append(option); } select.value = 'home'; select.addEventListener('change', choose); for (const id of ['appearanceBackground', 'appearanceText', 'appearanceAccent']) field(id).addEventListener('input', showPreview); for (const key of fontFields) fontSelect(key).addEventListener('change', showPreview); field('landingOpacity').addEventListener('input', () => { document.getElementById('landingOpacityValue').textContent = field('landingOpacity').value + '%'; showPreview(); }); field('appearanceImage').addEventListener('change', () => { if (previewURL) URL.revokeObjectURL(previewURL); const file = field('appearanceImage').files?.[0]; previewURL = file ? URL.createObjectURL(file) : ''; showPreview(); }); for (const [button, id] of [['resetPageCopy', 'pageCopyFields'], ['resetSharedCopy', 'sharedCopyFields']]) document.getElementById(button)?.addEventListener('click', () => { for (const input of document.querySelectorAll('#' + id + ' textarea')) input.value = input.dataset.original || ''; dirty = true; }); document.getElementById('appearanceCancel')?.addEventListener('click', () => { if (!saving) choose(); }); document.getElementById('appearanceRemove')?.addEventListener('click', () => { image = ''; field('appearanceImage').value = ''; if (previewURL) URL.revokeObjectURL(previewURL); previewURL = ''; showPreview(); }); form.addEventListener('submit', event => { event.preventDefault(); if (saving || !window.RoseViewer?.owner) return; if (copyLoading) { document.getElementById('appearanceStatus').textContent = 'Please wait for the page wording to finish loading.'; return; } saving = true; const status = document.getElementById('appearanceStatus'); const button = form.querySelector('button[type="submit"]'); button.disabled = true; status.textContent = 'Saving…'; void (async () => { try { const file = field('appearanceImage').files?.[0]; if (file) { const response = await fetch('/api/appearance/image', { method: 'POST', headers: { 'x-dm-request': '1' }, body: file }); const data = await response.json(); if (!response.ok || !data.image) throw Error(data.error || 'Could not upload image'); image = data.image; } const response = await fetch('/api/appearance/save', { method: 'POST', headers: { 'content-type': 'application/json', 'x-dm-request': '1' }, body: JSON.stringify({ page: select.value, ...edited(), sharedCopy: copyValues('sharedCopyFields') }) }); const data = await response.json(); if (!response.ok) throw Error(data.error || 'Could not save appearance'); settings = data; apply(settings.pages[current] || settings.defaults, document.documentElement); applyCopy(); choose(); status.textContent = 'Saved. This page’s appearance is now updated everywhere.'; } catch (error) { status.textContent = error instanceof Error ? error.message : String(error); } finally { saving = false; button.disabled = false; } })(); }); const previous = window.LiveHooks; window.LiveHooks = { ...previous, idle: () => !saving && !dirty && !form.contains(document.activeElement) && (previous?.idle() ?? true), save: () => previous?.save() }; } function ownerChanged() { if (window.RoseViewer?.owner) void refreshUsage(); else { document.getElementById('usageLocal')?.replaceChildren(); document.getElementById('usageCloud')?.replaceChildren(); } const locked = document.getElementById('appearanceLocked'); if (locked) locked.hidden = !!window.RoseViewer?.owner; if (!window.RoseViewer?.owner) { dirty = false; copySequence++; copyLoading = false; if (form) form.reset(); for (const id of ['pageCopyFields', 'sharedCopyFields', 'contentTextFields']) document.getElementById(id)?.replaceChildren(); } if (!window.RoseViewer?.owner && previewURL) { URL.revokeObjectURL(previewURL); previewURL = ''; } void refresh(); } window.addEventListener('rose:viewer', ownerChanged); ownerChanged(); const socket = new WebSocket((location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/host/live'); socket.addEventListener('message', event => { try { if (JSON.parse(String(event.data)).type === 'appearance') void refresh(); } catch { } }); })(); ; "use strict"; (() => { const pickers = new Map(); const storageBudget = 10000000000; async function cloudPreview(file, quality, scale, background) { const header = new Uint8Array(await file.arrayBuffer()); const ascii = new TextDecoder('latin1').decode(header); if (ascii.startsWith('GIF') || header[0] === 137 && header[1] === 80 && header[2] === 78 && header[3] === 71 && ascii.includes('acTL') || ascii.startsWith('RIFF') && ascii.slice(8, 12) === 'WEBP' && ascii.includes('ANIM')) throw Error('Animation optimization is unavailable. Keep the original image.'); const image = await createImageBitmap(file); try { if (image.width * image.height > 64000000) throw Error('Choose an image with at most 64 million pixels.'); const factor = Math.min(scale / 100, background ? 2560 / Math.max(image.width, image.height) : 1); const canvas = document.createElement('canvas'); canvas.width = Math.max(1, Math.round(image.width * factor)); canvas.height = Math.max(1, Math.round(image.height * factor)); const context = canvas.getContext('2d'); if (!context) throw Error('Image previews are unavailable in this browser.'); context.drawImage(image, 0, 0, canvas.width, canvas.height); const blob = await new Promise((resolve, reject) => canvas.toBlob(value => value && value.type === 'image/webp' ? resolve(value) : reject(Error('This browser cannot encode WebP previews.')), 'image/webp', quality / 100)); return new Response(blob, { headers: { 'x-image-width': String(canvas.width), 'x-image-height': String(canvas.height) } }); } finally { image.close(); } } const bytes = (size) => size < 1000 ? size + ' B' : size < 1000000 ? (size / 1000).toFixed(1) + ' KB' : size < 1000000000 ? (size / 1000000).toFixed(2) + ' MB' : (size / 1000000000).toFixed(2) + ' GB'; function clear(picker) { for (const choice of picker.choices) { choice.sequence++; choice.pending = false; clearTimeout(choice.timer); choice.controller?.abort(); choice.cancelWait(); URL.revokeObjectURL(choice.originalURL); if (choice.previewURL) URL.revokeObjectURL(choice.previewURL); } picker.choices = []; picker.panel.replaceChildren(); } function makeChoice(file, picker) { const box = document.createElement('fieldset'); box.className = 'image-quality-choice'; const legend = document.createElement('legend'); legend.textContent = file.name; const label = document.createElement('label'); label.className = 'image-quality-enable'; const enabled = document.createElement('input'); enabled.type = 'checkbox'; enabled.className = 'image-optimize'; label.append(enabled, 'Optimize this image before publishing'); const controls = document.createElement('div'); controls.className = 'image-quality-controls'; controls.hidden = true; const qualityLabel = document.createElement('label'); qualityLabel.textContent = 'Quality'; const quality = document.createElement('input'); quality.type = 'range'; quality.min = '10'; quality.max = '100'; quality.value = '85'; quality.className = 'image-quality-slider'; const qualityValue = document.createElement('output'); qualityLabel.append(quality, qualityValue); const scaleLabel = document.createElement('label'); scaleLabel.textContent = 'Resolution'; const scale = document.createElement('input'); scale.type = 'range'; scale.min = '10'; scale.max = '100'; scale.value = '100'; scale.className = 'image-resolution-slider'; const scaleValue = document.createElement('output'); scaleLabel.append(scale, scaleValue); const comparison = document.createElement('div'); comparison.className = 'image-comparison'; const originalFigure = document.createElement('figure'), previewFigure = document.createElement('figure'); const originalCaption = document.createElement('figcaption'); originalCaption.textContent = 'Original'; const previewCaption = document.createElement('figcaption'); previewCaption.textContent = 'Published image'; const original = document.createElement('img'), preview = document.createElement('img'); original.alt = 'Original selected image'; preview.alt = 'Exact image that will be published'; const originalWell = document.createElement('div'), previewWell = document.createElement('div'); originalWell.className = previewWell.className = 'image-compare-well'; originalWell.append(original); previewWell.append(preview); originalFigure.append(originalCaption, originalWell); previewFigure.append(previewCaption, previewWell); comparison.append(originalFigure, previewFigure); const inspect = document.createElement('button'); inspect.type = 'button'; inspect.className = 'secondary'; inspect.textContent = 'Inspect at 100%'; inspect.addEventListener('click', () => { const zoom = comparison.classList.toggle('image-comparison-zoom'); inspect.textContent = zoom ? 'Fit previews' : 'Inspect at 100%'; }); const share = document.createElement('p'); share.className = 'image-budget-status'; const status = document.createElement('p'); status.className = 'image-size-status'; status.setAttribute('role', 'status'); const retry = document.createElement('button'); retry.type = 'button'; retry.className = 'secondary'; retry.textContent = 'Retry preview'; retry.hidden = true; const choice = { original: file, file: null, enabled: false, quality: 85, scale: 100, pending: false, error: '', sequence: 0, timer: 0, controller: null, promise: Promise.resolve(), cancelWait: () => { }, originalURL: URL.createObjectURL(file), previewURL: '', box, render: () => { qualityValue.textContent = choice.quality + '%'; scaleValue.textContent = choice.scale + '%'; controls.hidden = !choice.enabled; retry.hidden = !choice.error; const selected = choice.enabled ? choice.file : file; share.hidden = choice.pending || !!choice.error || !selected || !choice.enabled && picker.input.id === 'appearanceImage'; share.textContent = selected ? 'This image: ' + bytes(selected.size) + ' / 10 GB · ' + (selected.size / storageBudget * 100).toLocaleString(undefined, { maximumFractionDigits: 8 }) + '% of total storage' : ''; status.textContent = choice.pending ? 'Encoding preview… The final file size will appear here.' : choice.error || (!choice.enabled ? (picker.input.id === 'appearanceImage' ? 'Original selected: ' + bytes(file.size) + '. Standard backgrounds are encoded on save; enable optimization for an exact size preview.' : 'Original kept: ' + bytes(file.size)) : choice.file ? 'Original ' + bytes(file.size) + ' → Published ' + bytes(choice.file.size) + ' · ' + (choice.file.size <= file.size ? ((1 - choice.file.size / file.size) * 100).toFixed(1) + '% less space' : ((choice.file.size / file.size - 1) * 100).toFixed(1) + '% more space') : 'Choose quality and resolution to preview.'); } }; original.src = choice.originalURL; function encode() { clearTimeout(choice.timer); choice.cancelWait(); choice.controller?.abort(); const sequence = ++choice.sequence; choice.error = ''; choice.file = null; if (choice.previewURL) { URL.revokeObjectURL(choice.previewURL); choice.previewURL = ''; preview.removeAttribute('src'); } if (!choice.enabled) { choice.pending = false; choice.render(); return; } choice.pending = true; choice.render(); choice.promise = new Promise(resolve => { choice.cancelWait = resolve; choice.timer = window.setTimeout(() => { void (async () => { const controller = new AbortController(); choice.controller = controller; try { const background = picker.input.id === 'appearanceImage'; const response = document.documentElement.dataset.hosting === 'cloudflare' ? await cloudPreview(file, choice.quality, choice.scale, background) : await fetch('/api/images/preview?quality=' + choice.quality + '&scale=' + choice.scale + (background ? '&background=1' : ''), { method: 'POST', headers: { 'x-dm-request': '1', 'content-type': 'application/octet-stream' }, body: file, signal: controller.signal }); if (!response.ok) { const result = await response.json(); throw Error(result.error || 'Could not generate preview.'); } const blob = await response.blob(); if (sequence !== choice.sequence || !choice.enabled || !window.RoseViewer?.owner) return; choice.file = new File([blob], file.name.replace(/\.[^.]+$/, '') + '-optimized.webp', { type: 'image/webp', lastModified: file.lastModified }); choice.previewURL = URL.createObjectURL(blob); preview.src = choice.previewURL; previewCaption.textContent = 'Published image · ' + response.headers.get('x-image-width') + ' × ' + response.headers.get('x-image-height'); } catch (error) { if (sequence === choice.sequence && !(error instanceof DOMException && error.name === 'AbortError')) choice.error = error instanceof Error ? error.message : String(error); } finally { if (sequence === choice.sequence) { choice.pending = false; choice.render(); } resolve(); } })(); }, 350); }); } enabled.addEventListener('change', () => { choice.enabled = enabled.checked; encode(); }); quality.addEventListener('input', () => { choice.quality = Number(quality.value); encode(); }); scale.addEventListener('input', () => { choice.scale = Number(scale.value); encode(); }); retry.addEventListener('click', encode); const note = document.createElement('p'); note.textContent = 'Nothing is published until you save. ' + (picker.input.id === 'appearanceImage' ? 'Uncheck to use standard background processing.' : 'Uncheck optimization to keep the original.') + ' Quality 100 still re-encodes the image.' + (picker.input.id === 'appearanceImage' ? ' Backgrounds are limited to 2560 pixels on the longest side.' : ''); controls.append(qualityLabel, scaleLabel, comparison, inspect, note); box.append(legend, label, controls, status, share, retry); choice.render(); return choice; } function refresh(picker) { clear(picker); if (!window.RoseViewer?.owner) return; for (const file of picker.input.files || []) { if (!file.type.startsWith('image/') && !/\.(png|jpe?g|webp|gif|bmp|avif)$/i.test(file.name)) continue; const choice = makeChoice(file, picker); picker.choices.push(choice); picker.panel.append(choice.box); } picker.panel.hidden = !picker.choices.length; } function scan() { for (const picker of pickers.values()) if (!picker.input.files?.length && picker.choices.length) { clear(picker); picker.panel.hidden = true; } if (!window.RoseViewer?.owner) return; for (const input of document.querySelectorAll('input[type=file]')) { if (pickers.has(input) || !input.accept.includes('image')) continue; const panel = document.createElement('div'); panel.className = 'image-quality-panel'; panel.hidden = true; const anchor = input.closest('label') || input; anchor.after(panel); const picker = { input, panel, choices: [] }; pickers.set(input, picker); input.addEventListener('change', () => refresh(picker)); input.form?.addEventListener('reset', () => { clear(picker); panel.hidden = true; }); if (input.files?.length) refresh(picker); } } document.addEventListener('submit', event => { const form = event.target; if (!(form instanceof HTMLFormElement) || !window.RoseViewer?.owner) return; const relevant = [...pickers.values()].filter(p => p.input.form === form && p.input.files?.length); const choices = relevant.flatMap(p => p.choices).filter(c => c.enabled); if (!choices.length) return; if (choices.some(c => c.pending)) { event.preventDefault(); event.stopImmediatePropagation(); const submitter = event.submitter; void (async () => { for (const choice of choices) while (choice.pending) await choice.promise; if (form.isConnected && window.RoseViewer?.owner) form.requestSubmit(submitter instanceof HTMLButtonElement ? submitter : undefined); })(); return; } if (choices.some(c => c.error || !c.file)) { event.preventDefault(); event.stopImmediatePropagation(); for (const choice of choices) if (choice.error || !choice.file) { choice.box.scrollIntoView({ block: 'nearest' }); break; } return; } for (const picker of relevant) { const files = new DataTransfer(); for (const file of picker.input.files || []) { const choice = picker.choices.find(c => c.original === file || c.file === file); files.items.add(choice?.enabled && choice.file ? choice.file : choice?.original || file); } picker.input.files = files.files; } }, true); window.addEventListener('rose:viewer', () => { if (window.RoseViewer?.owner) scan(); else for (const picker of pickers.values()) { clear(picker); picker.input.value = ''; picker.panel.hidden = true; } }); new MutationObserver(() => { for (const [input, picker] of pickers) if (!input.isConnected) { clear(picker); pickers.delete(input); } scan(); }).observe(document.body, { childList: true, subtree: true }); const previous = window.LiveHooks; window.LiveHooks = { ...previous, idle: () => ![...pickers.values()].some(p => !!p.input.files?.length && p.choices.some(c => c.enabled)) && (previous?.idle() ?? true), save: () => previous?.save() }; scan(); })(); ;__publish({DMError});