2d:null 2e:["$","title",null,{"children":"Untitled | Tom Larkworthy | Observable"}] 33:Tf722,publisher = ((cs, xrpcRef, lwRef) => ({ session = cs, xrpc = xrpcRef, defaultTitle, loginWidget: loginWidgetFn = lwRef } = {}) => { const T = lopeTokens; const esc = s => String(s).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); const css = (...rules) => rules.filter(Boolean).join(';'); const fmtSize = b => b < 1024 ? `${ b } B` : b < 1024 * 1024 ? `${ (b / 1024).toFixed(1) } KB` : `${ (b / 1024 / 1024).toFixed(2) } MB`; const monoLabel = text => `

${ esc(text) }

`; const signedIn = !!(session && typeof xrpc === 'function'); const state = { stage: 'pick', source: null, sourceFileName: null, files: null, sourceHtml: null, card: null, knownCids: null, title: defaultTitle ?? notebook_title ?? '', // poster: { kind:'upload'|'attachment', bytes, mime, name, sourceId?, previewSrc } poster: null, video: null, posterError: null, videoError: null, posterPick: false, publishStatus: '', error: null, result: null, forkUri: '', forkError: null, liveForkSlug: '', liveForkError: null, sidecars: { bskyPost: false }, bskyText: '' }; const root = document.createElement('div'); root.style.cssText = css(`width:100%;max-width:720px;background:${ T.paper }`, `border:1px solid ${ T.rule };font-family:${ T.sans };color:${ T.ink }`, `display:flex;flex-direction:column;box-sizing:border-box;position:relative`, `box-shadow:0 1px 3px rgba(0,0,0,0.04)`); const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.html,text/html'; fileInput.style.display = 'none'; fileInput.addEventListener('change', () => { const f = fileInput.files?.[0]; if (f) handleDroppedFile(f); fileInput.value = ''; }); root.append(fileInput); const coverInput = document.createElement('input'); coverInput.type = 'file'; coverInput.accept = 'image/*'; coverInput.style.display = 'none'; coverInput.addEventListener('change', async () => { const f = coverInput.files?.[0]; coverInput.value = ''; if (!f) return; if (f.size > MAX_POSTER_BYTES) { state.posterError = `image is ${ fmtSize(f.size) } — poster must be ≤ ${ fmtSize(MAX_POSTER_BYTES) }`; renderMeta(); return; } try { setPoster({ kind: 'upload', bytes: new Uint8Array(await f.arrayBuffer()), mime: f.type || 'image/png', name: f.name }); } catch { state.posterError = 'could not read that image'; renderMeta(); } }); root.append(coverInput); const videoInput = document.createElement('input'); videoInput.type = 'file'; videoInput.accept = 'video/*'; videoInput.style.display = 'none'; videoInput.addEventListener('change', async () => { const f = videoInput.files?.[0]; videoInput.value = ''; if (!f) return; if (f.size > MAX_VIDEO_BYTES) { state.videoError = `video is ${ fmtSize(f.size) } — must be ≤ ${ fmtSize(MAX_VIDEO_BYTES) }`; renderMeta(); return; } try { const bytes = new Uint8Array(await f.arrayBuffer()); const mime = f.type || 'video/mp4'; state.video = { bytes, mime, name: f.name, previewSrc: objectUrl(bytes, mime) }; state.videoError = null; renderMeta(); } catch { state.videoError = 'could not read that video'; renderMeta(); } }); root.append(videoInput); const dropOverlay = document.createElement('div'); dropOverlay.style.cssText = css(`position:absolute;inset:0;background:${ T.accent }1a`, `border:2px dashed ${ T.accent };display:none`, `align-items:center;justify-content:center;pointer-events:none;z-index:5`, `font-family:${ T.serif };font-size:18px;color:${ T.accent }`); dropOverlay.textContent = 'Drop the .html lopebook to publish'; root.append(dropOverlay); let dragDepth = 0; root.addEventListener('dragenter', e => { if (![...e.dataTransfer?.types || []].includes('Files')) return; if (!signedIn) return; e.preventDefault(); dragDepth++; dropOverlay.style.display = 'flex'; }); root.addEventListener('dragover', e => { if (![...e.dataTransfer?.types || []].includes('Files')) return; if (!signedIn) return; e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }); root.addEventListener('dragleave', () => { dragDepth = Math.max(0, dragDepth - 1); if (dragDepth === 0) dropOverlay.style.display = 'none'; }); root.addEventListener('drop', e => { if (!signedIn) return; e.preventDefault(); dragDepth = 0; dropOverlay.style.display = 'none'; const f = e.dataTransfer?.files?.[0]; if (f) handleDroppedFile(f); }); const header = document.createElement('div'); header.style.cssText = `padding:22px 26px 14px;border-bottom:1px solid ${ T.rule }`; const identity = document.createElement('div'); identity.style.cssText = css(`padding:10px 26px;background:${ T.paperWarm }`, `border-bottom:1px solid ${ T.rule }`, `display:flex;align-items:center;gap:14px;flex-wrap:wrap`, `font-family:${ T.mono };font-size:11px`); const meta = document.createElement('div'); meta.style.cssText = `display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;flex:1`; if (signedIn) { const authBadge = session.authType === 'oauth' ? 'OAuth' : 'app pw'; meta.innerHTML = ` ● @${ esc(session.handle) } · ${ esc(session.did) } · ${ esc(authBadge) }`; } else { meta.style.color = T.warn; meta.innerHTML = `● Sign in to publish`; } identity.append(meta); if (typeof loginWidgetFn === 'function') { const lw = loginWidgetFn(); if (lw && typeof lw.nodeType === 'number') { const slot = document.createElement('div'); slot.style.cssText = `margin-left:auto;flex:0 0 auto`; slot.append(lw); identity.append(slot); } } const body = document.createElement('div'); body.style.cssText = `padding:20px 26px;display:flex;flex-direction:column;gap:18px`; const sourceSection = document.createElement('div'); const diffSection = document.createElement('div'); const metaSection = document.createElement('div'); const sidecarsSection = document.createElement('div'); const footer = document.createElement('div'); footer.style.cssText = css(`padding:12px 26px;border-top:1px solid ${ T.rule }`, `background:${ T.paperDeep };display:flex;align-items:center;gap:14px`); const stepLabel = () => state.stage === 'pick' || state.stage === 'computing' ? 'step 1/3' : state.stage === 'done' ? 'step 3/3' : 'step 2/3'; const renderHeader = () => { header.innerHTML = `

Publish a lopebook

${ esc(stepLabel()) }

Writes a com.lopecode.bundle and a site.standard.document to your PDS.

`; }; const renderSourceSection = () => { const card = (icon, title, sub, source, enabled, requiresAuth = true) => { const active = state.source === source; const authOk = !requiresAuth || signedIn; const dim = !enabled || !authOk; const subText = active && state.sourceFileName && source === 'drop-file' ? state.sourceFileName : sub; return `

${ icon }

${ esc(title) }

${ esc(subText) }

${ active ? `● selected` : '' }${ !enabled && authOk ? `soon` : '' }

`; }; const forkPanel = state.source === 'fork' ? `

paste at:// URI or lopecode.com URL

${ state.forkError ? esc(state.forkError) : 'Opens the bundle in a new tab where you can edit and re-publish under your own DID.' }

` : ''; const liveForkPanel = state.source === 'live-fork' ? `

name your new module

Forks this runtime and adds a fresh blank module under the id you choose below. You'll edit its cells in a new tab, then publish from there.

new module id

${ state.liveForkError ? `

${ esc(state.liveForkError) }

` : '' }

` : ''; sourceSection.innerHTML = `${ monoLabel('source \xB7 pick one') }

${ card('\u2913', 'Drop a .html file', 'A Lopecode document from disk', 'drop-file', true) }${ card('\u2336', 'From your live editor', 'A snapshot of the current runtime', 'live-editor', true) }${ card('\u2197', 'Fork an at:// URI', 'Fork an ATProto hosted document', 'fork', true, false) }${ card('\u2387', 'Live Fork', 'Add new module to edit before publishing', 'live-fork', true, false) }

${ forkPanel }${ liveForkPanel }`; if (signedIn) { sourceSection.querySelectorAll('[data-source="live-editor"]').forEach(el => { el.addEventListener('click', () => onPickSource('live-editor')); }); sourceSection.querySelectorAll('[data-source="drop-file"]').forEach(el => { el.addEventListener('click', () => fileInput.click()); }); } sourceSection.querySelectorAll('[data-source="fork"]').forEach(el => { el.addEventListener('click', () => { state.source = state.source === 'fork' ? null : 'fork'; state.forkError = null; renderSourceSection(); const inp = sourceSection.querySelector('[data-fork-input]'); if (inp) inp.focus(); }); }); const forkInput = sourceSection.querySelector('[data-fork-input]'); if (forkInput) { forkInput.addEventListener('input', e => { state.forkUri = e.target.value; }); forkInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); onForkOpen(); } }); } const forkBtn = sourceSection.querySelector('[data-fork-open]'); if (forkBtn) forkBtn.addEventListener('click', onForkOpen); sourceSection.querySelectorAll('[data-source="live-fork"]').forEach(el => { el.addEventListener('click', () => { state.source = state.source === 'live-fork' ? null : 'live-fork'; state.liveForkError = null; renderSourceSection(); const inp = sourceSection.querySelector('[data-live-fork-slug]'); if (inp) inp.focus(); }); }); const liveForkSlugInput = sourceSection.querySelector('[data-live-fork-slug]'); if (liveForkSlugInput) { liveForkSlugInput.addEventListener('input', e => { state.liveForkSlug = e.target.value; }); liveForkSlugInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); onOpenLiveFork(); } }); } const liveForkGo = sourceSection.querySelector('[data-live-fork-go]'); if (liveForkGo) liveForkGo.addEventListener('click', onOpenLiveFork); }; const onForkOpen = () => { const input = String(state.forkUri || '').trim(); let webUrl; const atMatch = input.match(/^at:\/\/(did:[a-z]+:[^/]+)\/com\.lopecode\.bundle\/([^/?#]+)$/); if (atMatch) { const [, did, rkey] = atMatch; webUrl = `https://${ didHost(did) }/r/${ rkey }`; } else if (/^https?:\/\/[^/]*lopecode\.com\/r\//.test(input)) { webUrl = input; } else { state.forkError = 'expected at://did:.../com.lopecode.bundle/{rkey} or https://did-\u2026.lopecode.com/r/{rkey}'; renderSourceSection(); return; } window.open(webUrl, '_blank', 'noopener'); }; const blankModuleSource = title => { const pid = '_lf_' + Math.random().toString(36).slice(2, 8); const safe = String(title).replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$/g, '\\$'); return `\nconst ${ pid } = function _intro(md){return (md\`# ${ safe }\n\nA blank lopebook. Use the editor to write cells.\`);};\n\nexport default function define(runtime, observer) {\n const main = runtime.module();\n main.variable(observer()).define(null, ["md"], ${ pid });\n return main;\n}\n`; }; const forgeLiveForkHtml = (html, slug, title) => { const doc = new DOMParser().parseFromString(html, 'text/html'); let titleEl = doc.querySelector('title'); if (!titleEl) { titleEl = doc.createElement('title'); doc.head.appendChild(titleEl); } titleEl.textContent = title; const bootconfEl = [...doc.querySelectorAll('script[id="bootconf.json"]')].find(s => (s.textContent || '').length < 4000); if (!bootconfEl) throw new Error('bootconf.json script not found in exported HTML'); const conf = JSON.parse(bootconfEl.textContent.trim()); if (!Array.isArray(conf.mains)) conf.mains = []; const liveForkMains = [ slug, '@tomlarkworthy/at-write', '@tomlarkworthy/exporter-3', '@tomlarkworthy/module-selection' ]; for (const m of liveForkMains) { if (!conf.mains.includes(m)) conf.mains = [ ...conf.mains, m ]; } conf.hash = `#view=S100(${ liveForkMains.join(',') })&open=${ slug }`; bootconfEl.textContent = '\n' + JSON.stringify(conf, null, 2) + '\n'; const existing = [...doc.querySelectorAll('script[type="text/plain"][id]')].find(s => s.id === slug); if (!existing) { const script = doc.createElement('script'); script.setAttribute('id', slug); script.setAttribute('type', 'text/plain'); script.setAttribute('data-mime', 'application/javascript'); script.textContent = blankModuleSource(title); doc.body.appendChild(script); } else { existing.textContent = blankModuleSource(title); } return '\n' + doc.documentElement.outerHTML; }; const onOpenLiveFork = async () => { if (state.stage === 'computing' || state.stage === 'publishing') return; const slug = String(state.liveForkSlug || '').trim(); if (!/^@[a-z0-9][a-z0-9-]*\/[a-z0-9][a-z0-9-]*$/.test(slug)) { state.liveForkError = 'module id must look like @handle/slug \u2014 lowercase, hyphens'; renderSourceSection(); return; } const title = slug.split('/')[1].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()); state.liveForkError = null; renderSourceSection(); try { const {source: html} = await exportToHTML({ mains: globalThis.__ojs_runtime?.mains }); const forged = forgeLiveForkHtml(html, slug, title); const blob = new Blob([forged], { type: 'text/html' }); const url = URL.createObjectURL(blob); const hash = `#view=S100(${ slug },@tomlarkworthy/at-write,@tomlarkworthy/exporter-3,@tomlarkworthy/module-selection)&open=${ slug }`; window.open(url + hash, '_blank', 'noopener'); } catch (err) { state.liveForkError = err.message; renderSourceSection(); } }; const renderDiff = () => { if (!state.files) { diffSection.innerHTML = ''; return; } const known = state.knownCids; const totalSize = state.files.reduce((a, f) => a + f.size, 0); const newFiles = state.files.filter(f => !known.has(f.cid)); const cachedFiles = state.files.filter(f => known.has(f.cid)); const newSize = newFiles.reduce((a, f) => a + f.size, 0); const all = [ ...newFiles, ...cachedFiles ]; const rows = all.map((f, i) => { const isNew = !known.has(f.cid); const color = isNew ? T.accent : T.ok; const tag = isNew ? 'NEW' : 'CACHED'; return `

${ tag }${ esc(f.id) }${ esc(fmtSize(f.size)) }

`; }).join(''); diffSection.innerHTML = `${ monoLabel('file table \xB7 diffed against your repo') }

${ state.files.length } files total${ cachedFiles.length } already pinned${ newFiles.length } new uploads${ fmtSize(totalSize) } → ${ fmtSize(newSize) } to upload

${ rows }

`; }; const renderMeta = () => { if (state.stage === 'pick' || state.stage === 'computing') { metaSection.innerHTML = ''; return; } let rkeyPreview; try { rkeyPreview = state.title ? utils.slugifyTitle(state.title) : '(generated on publish)'; } catch { rkeyPreview = '(invalid title)'; } const card = state.card || {}; // Poster preview: the freshly picked bytes if any, else whatever // og:image the source head already carries. const posterSrc = state.poster?.previewSrc || card.coverSrc || null; const posterNote = state.posterError ? esc(state.posterError) : state.poster ? `${ esc(state.poster.name || state.poster.sourceId || 'poster') } · ${ esc(fmtSize(state.poster.bytes.length)) } · written to og:image as ${ esc(mediaProxy.origin) }/{did}/{poster CID}` : card.coverSrc ? `from the source head · ${ mediaProxy.parse(card.coverSrc) ? 'already a media record — blobs reused, no upload' : 'legacy URL — re-uploaded into a media record on publish' }` : `required for a link preview · ≤ ${ fmtSize(MAX_POSTER_BYTES) }`; const attachments = imageAttachments(); const pickPanel = state.posterPick ? `

${ attachments.length ? attachments.map(f => `

${ esc(f.id) }${ esc(fmtSize(f.size)) }

`).join('') : `

no image/* blocks in this notebook

` }

` : ''; const videoNote = state.videoError ? esc(state.videoError) : state.video ? `${ esc(state.video.name) } · ${ esc(fmtSize(state.video.bytes.length)) } · og:video` : card.videoSrc ? `${ esc(card.videoSrc) }` : `optional · ≤ ${ fmtSize(MAX_VIDEO_BYTES) } · adds og:video to the head`; metaSection.innerHTML = `${ monoLabel('head metadata \xB7 the file is the authority') }

${ monoLabel('title') }

${ monoLabel('rkey') }

${ esc(rkeyPreview) }

${ monoLabel('description') }

${ monoLabel('poster') }

${ posterSrc ? `

` : '' }${ state.poster ? `` : '' }

${ pickPanel }

${ posterNote }

${ monoLabel('video') }

${ state.video ? `

` : '' }${ state.video ? `` : '' }

${ videoNote }

`; const titleInput = metaSection.querySelector('[data-field="title"]'); titleInput.addEventListener('input', e => { state.title = e.target.value; const rkeyEl = metaSection.querySelector('[data-field="rkey"]'); try { rkeyEl.textContent = state.title ? utils.slugifyTitle(state.title) : '(generated on publish)'; } catch { rkeyEl.textContent = '(invalid title)'; } }); const descInput = metaSection.querySelector('[data-field="description"]'); descInput.addEventListener('input', e => { (state.card ||= { description: null, coverSrc: null }); const v = e.target.value.slice(0, 2000); state.card.description = v.trim() ? v : null; }); metaSection.querySelector('[data-btn="poster-upload"]')?.addEventListener('click', () => coverInput.click()); metaSection.querySelector('[data-btn="poster-pick"]')?.addEventListener('click', () => { state.posterPick = !state.posterPick; renderMeta(); }); metaSection.querySelector('[data-btn="poster-clear"]')?.addEventListener('click', () => { setPoster(null); }); metaSection.querySelectorAll('[data-attach]').forEach(el => { el.addEventListener('click', () => { const f = imageAttachments().find(x => x.id === el.getAttribute('data-attach')); if (!f) return; if (f.size > MAX_POSTER_BYTES) { state.posterError = `${ f.id } is ${ fmtSize(f.size) } — poster must be ≤ ${ fmtSize(MAX_POSTER_BYTES) }`; renderMeta(); return; } state.posterPick = false; setPoster({ kind: 'attachment', bytes: f.bytes, mime: f.mime, name: f.id, sourceId: f.id, previewSrc: previewFor(f) }); }); }); metaSection.querySelector('[data-btn="video-pick"]')?.addEventListener('click', () => videoInput.click()); metaSection.querySelector('[data-btn="video-clear"]')?.addEventListener('click', () => { state.video = null; state.videoError = null; renderMeta(); }); }; // The bundle + site.standard.document/publication are always written (the // publish). The Bluesky post is opt-in — the only record that broadcasts. const renderSidecars = () => { if (state.stage === 'pick' || state.stage === 'computing') { sidecarsSection.innerHTML = ''; return; } const checked = state.sidecars.bskyPost; const textareaHtml = checked ? `` : ''; sidecarsSection.innerHTML = `${ monoLabel('share \xB7 optional') }

${ checked ? '✓' : '' }

Share to Bluesky

app.bsky.feed.post \xB7 link card to did-…lopecode.com/r/{rkey} \xB7 embed.associatedRefs strong-ref the standard.site document + publication

${ textareaHtml }

`; sidecarsSection.querySelector('[data-toggle="bskyPost"]')?.addEventListener('click', e => { if (e.target.tagName === 'TEXTAREA') return; state.sidecars.bskyPost = !state.sidecars.bskyPost; renderSidecars(); }); sidecarsSection.querySelector('[data-bsky-text]')?.addEventListener('input', e => { state.bskyText = e.target.value; }); }; const renderFooter = () => { let summaryText; if (!signedIn) summaryText = 'sign in to continue'; else if (state.stage === 'pick') summaryText = 'pick a source to continue'; else if (state.stage === 'computing') summaryText = 'computing diff\u2026'; else if (state.stage === 'publishing') summaryText = state.publishStatus || 'publishing\u2026'; else if (state.stage === 'error') summaryText = `error: ${ state.error }`; else if (state.stage === 'done') summaryText = 'published'; else { const known = state.knownCids; const newFiles = state.files.filter(f => !known.has(f.cid)); const newSize = newFiles.reduce((a, f) => a + f.size, 0); summaryText = `${ newFiles.length } blob${ newFiles.length === 1 ? '' : 's' } · ${ fmtSize(newSize) } to upload`; } const canPublish = signedIn && state.stage === 'diff'; const isBusy = state.stage === 'publishing'; footer.innerHTML = `${ esc(summaryText) }`; const btn = footer.querySelector('[data-btn="publish"]'); if (btn && canPublish) btn.addEventListener('click', onPublish); }; const renderDone = () => { body.innerHTML = ''; const r = state.result; const card = document.createElement('div'); card.style.cssText = css(`padding:14px 18px;border:1px solid ${ T.rule }`, `background:${ T.paperWarm };font-family:${ T.sans };font-size:13px;color:${ T.ink }`, `display:flex;flex-direction:column;gap:10px`); card.innerHTML = `

● Published ${ r.uploaded } uploaded · ${ r.skipped } cached

${ esc(r.webUri) } ${ esc(r.bundleUri) } ${ r.posterUrl ? `

og:image · ${ esc(r.posterUrl) }${ r.videoUrl ? `
og:video · ${ esc(r.videoUrl) }` : '' }

` : '' } ${ r.bskyUrl ? `

✓ shared to bluesky · ${ esc(r.bskyUrl) }

` : '' } ${ (r.sidecarWarning || r.posterSkipped) ? `

⚠ ${ esc([r.posterSkipped ? 'poster/card image' : null, 'standard.site / bluesky'].filter(Boolean).join(' + ')) } skipped — bundle published.${ r.sidecarWarning ? ` ${ esc(r.sidecarWarning) }` : '' }${ r.posterError && r.posterError !== r.sidecarWarning ? ` · poster: ${ esc(r.posterError) }` : '' }

` : '' } `; body.append(card); body.querySelector('[data-btn="another"]').addEventListener('click', () => { state.stage = 'pick'; state.source = null; state.sourceFileName = null; state.files = null; state.sourceHtml = null; state.knownCids = null; state.poster = null; state.video = null; state.posterError = null; state.videoError = null; state.posterPick = false; state.error = null; state.result = null; renderAll(); }); }; const renderAll = () => { renderHeader(); if (state.stage === 'done') { renderDone(); } else { body.innerHTML = ''; body.append(sourceSection, diffSection, metaSection, sidecarsSection); renderSourceSection(); renderDiff(); renderMeta(); renderSidecars(); } renderFooter(); }; // com.lopecode.media blob caps. const MAX_POSTER_BYTES = 1000000; const MAX_VIDEO_BYTES = 5000000; const objectUrl = (bytes, mime) => URL.createObjectURL(new Blob([bytes], { type: mime })); const previewUrls = new Map(); const previewFor = f => { if (!previewUrls.has(f.cid)) previewUrls.set(f.cid, objectUrl(f.bytes, f.mime)); return previewUrls.get(f.cid); }; const imageAttachments = () => (state.files || []).filter(f => /^image\//.test(f.mime || '')); const setPoster = p => { if (state.poster?.kind === 'upload' && state.poster.previewSrc) URL.revokeObjectURL(state.poster.previewSrc); state.poster = p ? { ...p, previewSrc: p.previewSrc || objectUrl(p.bytes, p.mime) } : null; state.posterError = null; renderMeta(); }; const computeDiff = async html => { const files = await extractFiles(html); if (files.length === 0) throw new Error('no