/** * Shareable links: the whole look, packed into the URL fragment. * * A studio session is a lot of state, and "save a JSON file and send it" is a * poor answer to "how do I show you what I made" - one link you can paste into * chat is much better. So the state is JSON-encoded, deflated and * base64url-encoded into something short enough to sit in a `#` fragment. * * Three details make it survive the trip: * * - `view.backgroundImage` can be a multi-megabyte data URL (a photo the user * loaded). No link can carry that, so `stripForUrl` replaces just that one * field with `null` and keeps everything else - caption text, story panels, * props. Nothing else is ever dropped. * * - The payload starts with a version tag ('1' = raw deflate, '0' = plain * bytes) so the decoder knows whether to inflate. A browser without * `CompressionStream` falls back to the uncompressed form rather than * failing to produce a link at all. * * - base64url uses `-` and `_` and carries no `=` padding, so the fragment is * safe to paste into chat, Markdown or HTML without being mangled or escaped. * * `decodeState` is deliberately total: any malformed, truncated or hostile input * returns `null` rather than throwing, because it is fed whatever came out of * the address bar. */ /** Above this length a `data:` background image is a photo, not a link. */ const MAX_INLINE_IMAGE = 2048; /** Version tags. '1' is the deflated body, '0' the fallback plain body. */ const TAG_DEFLATE = '1'; const TAG_PLAIN = '0'; const BASE64URL = /^[A-Za-z0-9_-]+$/; /** * A copy of `state` that is safe to put in a URL. Only the inline background * image is dropped (replaced with `null`), and only when it is a `data:` URL * long enough to blow up the link. */ export function stripForUrl(state) { // A JSON round-trip gives the copy for free and drops anything that could not // be serialised anyway, so the link and the live state cannot diverge. const copy = JSON.parse(JSON.stringify(state ?? null)); if (!copy || typeof copy !== 'object' || Array.isArray(copy)) return copy; const image = copy.view && copy.view.backgroundImage; if (typeof image === 'string' && image.startsWith('data:') && image.length > MAX_INLINE_IMAGE) { copy.view.backgroundImage = null; } return copy; } /** True when the encoded fragment is bigger than a URL can comfortably hold. */ export function isTooLong(text, limit = 1800) { return typeof text === 'string' && text.length > limit; } /** * base64url, without padding. Chunked so a large payload does not blow the * argument limit of `String.fromCharCode`. */ function toBase64Url(bytes) { let binary = ''; const chunk = 0x8000; for (let i = 0; i < bytes.length; i += chunk) { binary += String.fromCharCode(...bytes.subarray(i, i + chunk)); } return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); } /** The inverse of `toBase64Url`. Throws on text that is not valid base64. */ function fromBase64Url(text) { const base64 = text.replace(/-/g, '+').replace(/_/g, '/'); const pad = (4 - (base64.length % 4)) % 4; const binary = atob(base64 + '='.repeat(pad)); const bytes = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i); return bytes; } /** Read a whole ReadableStream into one Uint8Array. */ async function drain(stream) { const chunks = []; let length = 0; for await (const chunk of stream) { const bytes = chunk instanceof Uint8Array ? chunk : new Uint8Array(chunk); chunks.push(bytes); length += bytes.length; } const out = new Uint8Array(length); let offset = 0; for (const bytes of chunks) { out.set(bytes, offset); offset += bytes.length; } return out; } async function deflateRaw(bytes) { const stream = new Blob([bytes]).stream().pipeThrough(new CompressionStream('deflate-raw')); return drain(stream); } async function inflateRaw(bytes) { const stream = new Blob([bytes]).stream().pipeThrough(new DecompressionStream('deflate-raw')); return drain(stream); } /** * Serialise, deflate and base64url-encode a state. The result is a fragment * payload: it survives a URL, a chat message and an HTML attribute. * * @param {object} state the studio state * @returns {Promise} a URL-safe string (tag + base64url) */ export async function encodeState(state) { const json = JSON.stringify(stripForUrl(state) ?? null); const bytes = new TextEncoder().encode(json); if (typeof CompressionStream === 'function') { try { return TAG_DEFLATE + toBase64Url(await deflateRaw(bytes)); } catch { // Fall through: an unusable compressing stream should not cost the link. } } return TAG_PLAIN + toBase64Url(bytes); } /** * The inverse of `encodeState`. Never throws: a bad tag, bad base64, a failed * inflate or JSON that is not a plain object all come back as `null`. * * @param {string} text the fragment payload * @returns {Promise<{ state: object } | null>} */ export async function decodeState(text) { try { if (typeof text !== 'string' || text.length < 2) return null; const tag = text[0]; if (tag !== TAG_DEFLATE && tag !== TAG_PLAIN) return null; const body = text.slice(1); if (!BASE64URL.test(body)) return null; let bytes = fromBase64Url(body); if (tag === TAG_DEFLATE) { if (typeof DecompressionStream !== 'function') return null; bytes = await inflateRaw(bytes); } const parsed = JSON.parse(new TextDecoder().decode(bytes)); if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) return null; return { state: parsed }; } catch { return null; } }