crossmate

link-worker.js (22275B)

---

 // Crossmate link worker: a stateless pass-through shortener for CKShare
 // links. The app rewrites an iCloud share URL
 //
 //   https://www.icloud.com/share/<token>#<Title_Slug>
 //
 // into
 //
 //   https://<this worker>/s/<token>[/<deco>][/<deco>]
 //
 // so that the link people actually paste into chat is short, carries no
 // legible puzzle title, and serves Crossmate's own Open Graph metadata
 // instead of iCloud's. Link-preview crawlers get a 200 HTML page with OG
 // tags; everyone else gets a 302 straight to iCloud. The share token is the
 // entire state, so nothing is stored and a link can never expire on this
 // side.
 //
 // Up to two optional decoration segments personalise the preview. Each is
 // self-typed by its leading character, so order doesn't matter and either
 // may be absent: a single 0–6 is a weekday-name title, a `t` prefix is a
 // custom base64url title, an `s`/`f` structure is the grid silhouette, and
 // anything else is a legacy bare-base64url title (links minted before the
 // types existed). Decoration is ignored by the redirect, so a stale or
 // mangled segment still lands on the right share.
 
 // Bundled by the Data module rule in wrangler.link.toml; served at /og.png.
 import ogImage from "./og.png";
 
 const ICLOUD_SHARE_BASE = "https://www.icloud.com/share/";
 
 // Claims the share-link paths as universal links for the app. `/s/*` is all the
 // app needs to intercept; the AASA fetch itself and /og(.png)/og image routes
 // are unaffected because they don't match.
 const APPLE_APP_SITE_ASSOCIATION = JSON.stringify({
   applinks: {
     details: [
       { appIDs: ["7TD7PZBNXP.net.inqk.crossmate"], components: [{ "/": "/s/*" }] }
     ]
   }
 });
 
 // iCloud share tokens are short base62-ish strings. Restricting the charset
 // to RFC 3986 unreserved characters means the redirect target cannot contain
 // a path separator, query, or authority — the worker can only ever redirect
 // into https://www.icloud.com/share/, never act as an open redirector.
 const TOKEN_PATTERN = /^[A-Za-z0-9._~-]{8,128}$/;
 
 // The optional title segment is unpadded base64url, encoded by
 // ShareLinkShortener in the app. The cap bounds the decode work and the
 // rendered tag; anything that fails the pattern or the decode falls back to
 // the generic preview rather than erroring.
 const TITLE_SEGMENT_PATTERN = /^[A-Za-z0-9_-]{1,256}$/;
 const MAX_TITLE_LENGTH = 80;
 
 // Apple Messages fetches previews with a Facebook/Twitter crawler UA, so the
 // explicit names cover iMessage as well. The generic bot/crawler/spider tail
 // catches the long tail of preview fetchers; a human misclassified as a bot
 // still gets through via the page's meta refresh and visible link.
 const CRAWLER_PATTERN = new RegExp(
   [
     "facebookexternalhit", "facebot", "twitterbot", "slackbot", "discordbot",
     "telegrambot", "whatsapp", "linkedinbot", "pinterest", "redditbot",
     "applebot", "googlebot", "bingbot", "duckduckbot", "yandex", "mastodon",
     "bluesky", "skypeuripreview", "iframely", "embedly", "snapchat", "vkshare",
     "bot", "crawler", "spider", "preview"
   ].join("|"),
   "i"
 );
 
 export default {
   async fetch(request) {
     if (request.method !== "GET" && request.method !== "HEAD") {
       return new Response("Method not allowed", { status: 405 });
     }
 
     const url = new URL(request.url);
 
     // Apple fetches this to authorise universal links, so a tapped share link
     // opens the app directly (which paints a placeholder and accepts the share)
     // instead of bouncing through Safari and iCloud. Must be served as JSON
     // over https with no redirect.
     if (
       url.pathname === "/apple-app-site-association" ||
       url.pathname === "/.well-known/apple-app-site-association"
     ) {
       return new Response(APPLE_APP_SITE_ASSOCIATION, {
         headers: {
           "Content-Type": "application/json",
           "Cache-Control": "public, max-age=3600"
         }
       });
     }
 
     if (url.pathname === "/og.png") {
       return new Response(ogImage, {
         headers: {
           "Content-Type": "image/png",
           "Cache-Control": "public, max-age=86400"
         }
       });
     }
 
     // The per-puzzle preview image. The grid silhouette rides in the path, so
     // the image is a pure function of it — deterministic and immutably
     // cacheable. A malformed or too-small segment falls back to the generic
     // card image rather than erroring, so a link preview never breaks on a bad
     // shape.
     const imageMatch = url.pathname.match(/^\/g\/([A-Za-z0-9_-]+)\.png$/);
     if (imageMatch) {
       const grid = decodeSilhouette(imageMatch[1]);
       if (!grid || !meetsDynamicMinimum(grid)) {
         return new Response(ogImage, {
           headers: { "Content-Type": "image/png", "Cache-Control": "public, max-age=86400" }
         });
       }
       return new Response(await renderSilhouettePNG(grid.width, grid.height, grid.blocks), {
         headers: {
           "Content-Type": "image/png",
           "Cache-Control": "public, max-age=86400, immutable"
         }
       });
     }
 
     const match = url.pathname.match(/^\/s\/([^/]+)(?:\/([^/]+))?(?:\/([^/]+))?$/);
     if (!match) {
       return new Response("Not found", { status: 404 });
     }
 
     const token = match[1];
     if (!TOKEN_PATTERN.test(token)) {
       return new Response("Not found", { status: 404 });
     }
     const target = ICLOUD_SHARE_BASE + token;
 
     const userAgent = request.headers.get("User-Agent") || "";
     if (!CRAWLER_PATTERN.test(userAgent)) {
       // The token→target mapping is immutable, so the redirect can sit in
       // the edge cache indefinitely; an hour keeps revalidation cheap.
       return new Response(null, {
         status: 302,
         headers: {
           "Location": target,
           "Cache-Control": "public, max-age=3600"
         }
       });
     }
 
     return new Response(previewPage(url.origin, token, target, [match[2], match[3]]), {
       status: 200,
       headers: {
         "Content-Type": "text/html; charset=utf-8",
         "Cache-Control": "public, max-age=3600"
       }
     });
   }
 };
 
 function previewPage(origin, token, target, segments) {
   const { title: gameTitle, shape } = classifySegments(segments);
   const title = gameTitle
     ? `Solve ‘${gameTitle}’ together on Crossmate`
     : "Solve a crossword together on Crossmate";
   const description =
     "You’re invited to a collaborative crossword. " +
     "Open the link to join the puzzle in Crossmate.";
 
   // A valid shape with both sides 10-or-larger gets its own rendered
   // silhouette; otherwise the generic card. The dimension hints let clients lay
   // the card out before the fetch.
   const grid = shape ? decodeSilhouette(shape) : null;
   const usesDynamicImage = grid && meetsDynamicMinimum(grid);
   const imageURL = usesDynamicImage ? `${origin}/g/${shape}.png` : `${origin}/og.png`;
   const imageWidth = usesDynamicImage ? silhouettePixelSize(grid.width) : null;
   const imageHeight = usesDynamicImage ? silhouettePixelSize(grid.height) : null;
 
   // og:url stays the token-only canonical form so scrapers collapse links
   // that differ only in their title segment onto the same card. The meta
   // refresh and visible link are a fallback for anything the UA sniff
   // misclassifies as a crawler: real crawlers ignore the refresh and read
   // the OG tags, while a human lands on iCloud after a beat.
   return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>${escapeHTML(title)}</title>
 <meta property="og:type" content="website">
 <meta property="og:site_name" content="Crossmate">
 <meta property="og:title" content="${escapeHTML(title)}">
 <meta property="og:description" content="${description}">
 <meta property="og:image" content="${imageURL}">${imageWidth ? `
 <meta property="og:image:width" content="${imageWidth}">
 <meta property="og:image:height" content="${imageHeight}">` : ""}
 <meta property="og:url" content="${origin}/s/${token}">
 <meta name="twitter:card" content="summary">
 <meta http-equiv="refresh" content="0; url=${target}">
 </head>
 <body>
 <p><a href="${target}">Open the puzzle in Crossmate</a></p>
 </body>
 </html>
 `;
 }
 
 const WEEKDAYS = [
   "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
 ];
 
 // A grid-silhouette segment: a tag, one or two base-36 side digits (2…35), then
 // the base64url bit payload. Lowercase `s`/`f` carry a single side digit (square
 // grids); uppercase `S`/`F` carry a width digit then a height digit (rectangular
 // grids). `s`/`S` are 180°-symmetric (half the cells stored); `f`/`F` are a full
 // dump. Returns the parsed geometry, or `null` when the structure or the payload
 // byte count doesn't line up — so a legacy base64url title is very unlikely to
 // be mistaken for a shape, and an unknown tag falls through to the generic card.
 function parseShape(seg) {
   if (seg.length < 2) return null;
   const tag = seg[0];
   let width;
   let height;
   let payload;
   if (tag === "s" || tag === "f") {
     width = height = parseInt(seg[1], 36);
     payload = seg.slice(2);
   } else if (tag === "S" || tag === "F") {
     if (seg.length < 3) return null;
     width = parseInt(seg[1], 36);
     height = parseInt(seg[2], 36);
     payload = seg.slice(3);
   } else {
     return null;
   }
   if (!(width >= 2 && width <= 35) || !(height >= 2 && height <= 35)) return null;
   if (!/^[A-Za-z0-9_-]+$/.test(payload)) return null;
 
   const symmetric = tag === "s" || tag === "S";
   const cells = width * height;
   const bits = symmetric ? Math.ceil(cells / 2) : cells;
   const payloadBytes = Math.floor((payload.length * 6) / 8);
   if (payloadBytes < Math.ceil(bits / 8)) return null;
   return { symmetric, width, height, payload };
 }
 
 function isShapeSegment(seg) {
   return parseShape(seg) !== null;
 }
 
 // Sorts the up-to-two decoration segments into a display title and a
 // (reserved) shape segment, classifying each by its leading character so the
 // order the app emits them in doesn't matter.
 function classifySegments(segments) {
   let title = null;
   let shape = null;
   for (const seg of segments) {
     if (!seg) continue;
     if (shape === null && isShapeSegment(seg)) {
       shape = seg;
       continue;
     }
     if (title === null) {
       title = decodeTitleSegment(seg);
     }
   }
   return { title, shape };
 }
 
 function decodeTitleSegment(seg) {
   if (/^[0-6]$/.test(seg)) {
     return `${WEEKDAYS[Number(seg)]} Crossword`;
   }
   // A `t` prefix marks a tagged custom title; an untagged segment is a legacy
   // bare-base64url title from before the types existed.
   return seg[0] === "t" ? decodeBase64Title(seg.slice(1)) : decodeBase64Title(seg);
 }
 
 // The decoded title lands inside HTML the worker serves, so it is treated as
 // hostile input end to end: charset-checked while encoded, decoded strictly
 // (an invalid UTF-8 sequence falls back to the generic preview), stripped of
 // control characters, capped, and entity-escaped at the interpolation site.
 function decodeBase64Title(encoded) {
   if (!encoded || !TITLE_SEGMENT_PATTERN.test(encoded)) {
     return null;
   }
   try {
     const base64 = encoded.replaceAll("-", "+").replaceAll("_", "/");
     const padded = base64 + "=".repeat((4 - (base64.length % 4)) % 4);
     const bytes = Uint8Array.from(atob(padded), (c) => c.charCodeAt(0));
     const text = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
     const cleaned = text.replace(/[\x00-\x1f\x7f]/g, "").trim();
     return cleaned ? cleaned.slice(0, MAX_TITLE_LENGTH) : null;
   } catch {
     return null;
   }
 }
 
 function escapeHTML(text) {
   return text
     .replaceAll("&", "&amp;")
     .replaceAll("<", "&lt;")
     .replaceAll(">", "&gt;")
     .replaceAll('"', "&quot;");
 }
 
 // MARK: - Grid silhouette
 
 // The JS counterpart of the app's `GridSilhouette` codec — decode only, since
 // the worker never mints links. Mirrors the wire format `<tag><size…><payload>`:
 // a symmetric tag stores the first ⌈N/2⌉ cells (the rest mirror by 180°
 // rotation), a full tag stores all N; the payload is the cell bits MSB-first as
 // base64url. The 180° partner of cell `k` is `n-1-k` for any `w×h` grid.
 function decodeSilhouette(seg) {
   const parsed = parseShape(seg);
   if (!parsed) return null;
   const { symmetric, width, height, payload } = parsed;
   const n = width * height;
   const storedCount = symmetric ? Math.ceil(n / 2) : n;
   const bytes = base64urlToBytes(payload);
   if (!bytes || bytes.length * 8 < storedCount) return null;
 
   const stored = new Array(storedCount);
   for (let i = 0; i < storedCount; i++) {
     stored[i] = (bytes[i >> 3] & (0x80 >> (i & 7))) !== 0;
   }
   const blocks = new Array(n);
   for (let k = 0; k < n; k++) {
     blocks[k] = k < storedCount ? stored[k] : stored[n - 1 - k];
   }
   return { width, height, blocks };
 }
 
 function base64urlToBytes(s) {
   try {
     const base64 = s.replaceAll("-", "+").replaceAll("_", "/");
     const padded = base64 + "=".repeat((4 - (base64.length % 4)) % 4);
     return Uint8Array.from(atob(padded), (c) => c.charCodeAt(0));
   } catch {
     return null;
   }
 }
 
 // Render constants: each cell is CELL px with a MARGIN-px quiet border, so each
 // image dimension is a pure function of that grid dimension (35 → 842px is the
 // largest).
 const CELL = 22;
 const MARGIN = 36;
 const BG = [255, 255, 255];       // empty square / background
 const LINE = [205, 205, 205];     // grid line gray
 const BLOCK = [0, 0, 0];          // block square / black logo line
 const DYNAMIC_IMAGE_MIN_SIDE = 10;
 
 const LOGO_SOURCE_SIZE = 512;
 const LOGO_MIN_SIZE = 64;
 const LOGO_MAX_SIZE = 152;
 const LOGO_SCALE = 0.22;
 const LOGO_PADDING_SCALE = 0.035;
 const LOGO_MIN_PADDING = 10;
 const LOGO_DARK = [42, 42, 42];
 const LOGO_CORAL = [255, 135, 132];
 const LOGO_BLUE = [109, 173, 240];
 const LOGO_PALE_BLUE = [207, 226, 246];
 const LOGO_WHITE = BG;
 const LOGO_BLACK = BLOCK;
 const SHADOW_OFFSET_X = 0.035;
 const SHADOW_OFFSET_Y = 0.055;
 const SHADOW_BLUR = 0.150;
 const SHADOW_ALPHA = 0.26;
 
 function silhouettePixelSize(cells) {
   return MARGIN * 2 + cells * CELL;
 }
 
 // A grid earns its own rendered silhouette only when both sides clear the
 // minimum, so a thin strip never renders as a rich preview.
 function meetsDynamicMinimum(grid) {
   return Math.min(grid.width, grid.height) >= DYNAMIC_IMAGE_MIN_SIDE;
 }
 
 // Paints the grid and a scaled Crossmate icon into a truecolor PNG. `cols` and
 // `rows` are the grid's width and height; the image may be non-square.
 async function renderSilhouettePNG(cols, rows, blocks) {
   const dimW = silhouettePixelSize(cols);
   const dimH = silhouettePixelSize(rows);
   const pixels = new Uint8Array(dimW * dimH * 3).fill(255);
   const set = (x, y, color) => setRGB(pixels, dimW, x, y, color);
 
   // Grid lines bounding every cell: cols+1 verticals over the full height, and
   // rows+1 horizontals over the full width.
   const extentX = cols * CELL;
   const extentY = rows * CELL;
   for (let i = 0; i <= cols; i++) {
     const at = MARGIN + i * CELL;
     for (let t = 0; t <= extentY; t++) set(at, MARGIN + t, LINE);
   }
   for (let i = 0; i <= rows; i++) {
     const at = MARGIN + i * CELL;
     for (let t = 0; t <= extentX; t++) set(MARGIN + t, at, LINE);
   }
   // Block squares fill their interior solid, leaving the gray lines between.
   for (let r = 0; r < rows; r++) {
     for (let c = 0; c < cols; c++) {
       if (!blocks[r * cols + c]) continue;
       const x0 = MARGIN + c * CELL;
       const y0 = MARGIN + r * CELL;
       for (let y = 1; y < CELL; y++) {
         for (let x = 1; x < CELL; x++) set(x0 + x, y0 + y, BLOCK);
       }
     }
   }
 
   drawCrossmateIcon(pixels, dimW, dimH);
   return await encodeTruecolorPNG(dimW, dimH, pixels);
 }
 
 function setRGB(pixels, width, x, y, color) {
   const offset = (y * width + x) * 3;
   pixels[offset] = color[0];
   pixels[offset + 1] = color[1];
   pixels[offset + 2] = color[2];
 }
 
 function drawCrossmateIcon(pixels, dimW, dimH) {
   // Size off the smaller image dimension so a tall or wide grid doesn't get an
   // oversized badge; anchor it in the bottom-right corner of the canvas.
   const basis = Math.min(dimW, dimH);
   const size = clamp(Math.round(basis * LOGO_SCALE), LOGO_MIN_SIZE, LOGO_MAX_SIZE);
   const padding = Math.max(LOGO_MIN_PADDING, Math.round(basis * LOGO_PADDING_SCALE));
   const originX = dimW - padding - size;
   const originY = dimH - padding - size;
   const radius = Math.round(size * 0.135);
   drawRoundedShadow(pixels, dimW, dimH, originX, originY, size, radius);
 
   for (let y = 0; y < size; y++) {
     const sourceY = Math.floor((y * LOGO_SOURCE_SIZE) / size);
     for (let x = 0; x < size; x++) {
       const coverage = roundedRectCoverage(x, y, size, radius);
       if (coverage <= 0) continue;
       const sourceX = Math.floor((x * LOGO_SOURCE_SIZE) / size);
       blendPixel(pixels, dimW, originX + x, originY + y, crossmateIconColor(sourceX, sourceY), coverage);
     }
   }
 }
 
 function drawRoundedShadow(pixels, dimW, dimH, iconOriginX, iconOriginY, size, radius) {
   const blur = Math.max(10, Math.round(size * SHADOW_BLUR));
   const shadowX = iconOriginX + Math.round(size * SHADOW_OFFSET_X);
   const shadowY = iconOriginY + Math.round(size * SHADOW_OFFSET_Y);
   const minX = shadowX - blur;
   const minY = shadowY - blur;
   const maxX = shadowX + size + blur;
   const maxY = shadowY + size + blur;
 
   for (let py = minY; py < maxY; py++) {
     if (py < 0 || py >= dimH) continue;
     for (let px = minX; px < maxX; px++) {
       if (px < 0 || px >= dimW) continue;
 
       const distance = distanceToRoundedRect(px - shadowX, py - shadowY, size, radius);
       if (distance > blur) continue;
 
       const strength = Math.pow(1 - Math.max(distance, 0) / blur, 1.85);
       blendPixel(pixels, dimW, px, py, BLOCK, strength * SHADOW_ALPHA);
     }
   }
 }
 
 function blendPixel(pixels, width, x, y, color, alpha) {
   const offset = (y * width + x) * 3;
   const keep = 1 - alpha;
   pixels[offset] = Math.round(pixels[offset] * keep + color[0] * alpha);
   pixels[offset + 1] = Math.round(pixels[offset + 1] * keep + color[1] * alpha);
   pixels[offset + 2] = Math.round(pixels[offset + 2] * keep + color[2] * alpha);
 }
 
 function distanceToRoundedRect(x, y, size, radius) {
   const half = size / 2;
   const qx = Math.abs(x - half + 0.5) - (half - radius);
   const qy = Math.abs(y - half + 0.5) - (half - radius);
   const outsideX = Math.max(qx, 0);
   const outsideY = Math.max(qy, 0);
   return Math.hypot(outsideX, outsideY) + Math.min(Math.max(qx, qy), 0) - radius;
 }
 
 function roundedRectCoverage(x, y, size, radius) {
   return clamp(0.5 - distanceToRoundedRect(x, y, size, radius), 0, 1);
 }
 
 function crossmateIconColor(x, y) {
   if (x >= 252 && x <= 263) return LOGO_BLACK;
   if (y >= 124 && y <= 134) return LOGO_BLACK;
   if (y >= 390 && y <= 400) return LOGO_BLACK;
 
   const right = x >= 264;
   if (y < 124) return right ? LOGO_CORAL : LOGO_DARK;
   if (y < 390) return right ? LOGO_WHITE : LOGO_BLUE;
   return right ? LOGO_DARK : LOGO_PALE_BLUE;
 }
 
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 
 // MARK: - Minimal PNG encoder (8-bit truecolor, stored DEFLATE)
 
 async function encodeTruecolorPNG(width, height, pixels) {
   // Each scanline is prefixed with a filter-type byte (0 = None).
   const stride = width * 3;
   const raw = new Uint8Array(height * (stride + 1));
   for (let y = 0; y < height; y++) {
     raw[y * (stride + 1)] = 0;
     raw.set(pixels.subarray(y * stride, (y + 1) * stride), y * (stride + 1) + 1);
   }
 
   const ihdr = new Uint8Array(13);
   const dv = new DataView(ihdr.buffer);
   dv.setUint32(0, width);
   dv.setUint32(4, height);
   ihdr[8] = 8;   // bit depth
   ihdr[9] = 2;   // color type: truecolor
   // [10..12] compression/filter/interlace = 0
 
   const signature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
   return concatBytes([
     signature,
     pngChunk("IHDR", ihdr),
     pngChunk("IDAT", await zlibDeflate(raw)),
     pngChunk("IEND", new Uint8Array(0))
   ]);
 }
 
 async function zlibDeflate(raw) {
   if (typeof CompressionStream === "undefined") {
     return zlibStore(raw);
   }
   try {
     const stream = new Blob([raw]).stream().pipeThrough(new CompressionStream("deflate"));
     return new Uint8Array(await new Response(stream).arrayBuffer());
   } catch {
     return zlibStore(raw);
   }
 }
 
 function pngChunk(type, data) {
   const out = new Uint8Array(12 + data.length);
   const dv = new DataView(out.buffer);
   dv.setUint32(0, data.length);
   for (let i = 0; i < 4; i++) out[4 + i] = type.charCodeAt(i);
   out.set(data, 8);
   dv.setUint32(8 + data.length, crc32(out.subarray(4, 8 + data.length)));
   return out;
 }
 
 // A zlib stream whose payload is one or more uncompressed (stored) DEFLATE
 // blocks — no compression code, just framing — terminated by the Adler-32 of
 // the raw data. Fine here: the response is small and edge-cached.
 function zlibStore(raw) {
   const parts = [new Uint8Array([0x78, 0x01])]; // zlib header
   for (let off = 0; off < raw.length; off += 65535) {
     const len = Math.min(65535, raw.length - off);
     const final = off + len >= raw.length ? 1 : 0;
     const header = new Uint8Array(5);
     header[0] = final;                 // BFINAL bit; BTYPE 00 = stored
     header[1] = len & 0xff;
     header[2] = (len >> 8) & 0xff;
     const nlen = ~len & 0xffff;
     header[3] = nlen & 0xff;
     header[4] = (nlen >> 8) & 0xff;
     parts.push(header, raw.subarray(off, off + len));
   }
   const adler = new Uint8Array(4);
   new DataView(adler.buffer).setUint32(0, adler32(raw));
   parts.push(adler);
   return concatBytes(parts);
 }
 
 function crc32(bytes) {
   let crc = 0xffffffff;
   for (let i = 0; i < bytes.length; i++) {
     crc ^= bytes[i];
     for (let j = 0; j < 8; j++) {
       crc = crc & 1 ? 0xedb88320 ^ (crc >>> 1) : crc >>> 1;
     }
   }
   return (crc ^ 0xffffffff) >>> 0;
 }
 
 function adler32(bytes) {
   let a = 1;
   let b = 0;
   for (let i = 0; i < bytes.length; i++) {
     a = (a + bytes[i]) % 65521;
     b = (b + a) % 65521;
   }
   return ((b << 16) | a) >>> 0;
 }
 
 function concatBytes(chunks) {
   const total = chunks.reduce((sum, c) => sum + c.length, 0);
   const out = new Uint8Array(total);
   let off = 0;
   for (const c of chunks) {
     out.set(c, off);
     off += c.length;
   }
   return out;
 }