@ideare/kit 0.0.0-stage → 0.1.0-next.0

package/dist/posts/templates.js

@@ -0,0 +1,868 @@
+import { FORMATS } from "../scene/schema.js";
+import { pixCode } from "./pix.js";
+/**
+ * The launch templates: a starting design for each job an owner posts for, in every size they
+ * post at. Each is plain scene data the editor opens and the API draws. Paints are brand tokens
+ * only, in the pairs every brand's palette keeps readable (ink and muted on ground and surface,
+ * onPrimary on primary, primary as large type on ground), and type uses the brand's two font
+ * roles, so a template looks like the brand it is made for. Photo spots are art layers named
+ * `photo`, which the editor fills with an upload or AI art; text the owner changes is a slot,
+ * and slots marked live can be filled by a live image link (`t.<slot>`).
+ */
+export const POST_TEMPLATES = [
+    "promotion",
+    "hours",
+    "menu",
+    "pix",
+    "new-product",
+    "status-offer",
+    "carousel",
+];
+export const POST_FORMATS = [
+    "ig-post",
+    "ig-square",
+    "ig-story",
+    "wa-status",
+    "share-card",
+];
+/** What the template picker shows, and the size each template starts at. */
+export const POST_TEMPLATE_INFO = {
+    promotion: {
+        format: "ig-post",
+        text: {
+            "pt-BR": { name: "Promoção", description: "Um desconto ou uma oferta, com foto." },
+            en: { name: "Promotion", description: "A discount or a deal, with a photo." },
+            es: { name: "Promoción", description: "Un descuento o una oferta, con foto." },
+        },
+    },
+    hours: {
+        format: "ig-post",
+        text: {
+            "pt-BR": { name: "Horário", description: "Os dias e os horários em que você abre." },
+            en: { name: "Opening hours", description: "The days and times you're open." },
+            es: { name: "Horario", description: "Los días y las horas en que abres." },
+        },
+    },
+    menu: {
+        format: "ig-post",
+        text: {
+            "pt-BR": {
+                name: "Cardápio ou preços",
+                description: "Seus itens e preços, em uma lista.",
+            },
+            en: { name: "Menu or price list", description: "Your items and prices, in one list." },
+            es: { name: "Menú o precios", description: "Tus productos y precios, en una lista." },
+        },
+    },
+    pix: {
+        format: "ig-post",
+        text: {
+            "pt-BR": { name: "Cartão de Pix", description: "Um QR code para pagarem com Pix." },
+            en: { name: "Pix card", description: "A QR code people scan to pay you with Pix." },
+            es: { name: "Tarjeta de Pix", description: "Un código QR para que te paguen con Pix." },
+        },
+    },
+    "new-product": {
+        format: "ig-post",
+        text: {
+            "pt-BR": { name: "Novidade", description: "Um produto novo, com foto e preço." },
+            en: { name: "New product", description: "Something new, with a photo and a price." },
+            es: { name: "Novedad", description: "Un producto nuevo, con foto y precio." },
+        },
+    },
+    "status-offer": {
+        format: "wa-status",
+        text: {
+            "pt-BR": {
+                name: "Oferta no status",
+                description: "Uma oferta para o status do WhatsApp.",
+            },
+            en: { name: "Status offer", description: "A deal for your WhatsApp status." },
+            es: {
+                name: "Oferta en estados",
+                description: "Una oferta para tu estado de WhatsApp.",
+            },
+        },
+    },
+    carousel: {
+        format: "ig-post",
+        text: {
+            "pt-BR": { name: "Carrossel", description: "Cinco páginas para arrastar para o lado." },
+            en: { name: "Carousel", description: "Five pages people swipe through." },
+            es: { name: "Carrusel", description: "Cinco páginas para deslizar." },
+        },
+    },
+};
+/** The sample words in each language. Owners replace them; they only show the layout. */
+const COPY = {
+    "pt-BR": {
+        promotion: {
+            badge: "-20%",
+            title: "Promoção da semana",
+            detail: "20% de desconto em tudo, até sábado.",
+            cta: "Chame no WhatsApp",
+            prompt: "O produto em oferta, em um fundo simples",
+        },
+        hours: {
+            title: "Nosso horário",
+            days: ["Segunda a sexta", "Sábado", "Domingo"],
+            times: ["7h às 19h", "7h às 13h", "Fechado"],
+        },
+        menu: {
+            title: "Cardápio do dia",
+            items: ["Pão de queijo", "Café coado", "Bolo do dia", "Suco natural"],
+            prices: ["R$ 6,00", "R$ 5,00", "R$ 8,00", "R$ 9,00"],
+            cta: "Peça pelo WhatsApp",
+        },
+        pix: {
+            title: "Pague com Pix",
+            detail: "Abra o app do seu banco e leia o código.",
+            key: "Chave Pix",
+        },
+        newProduct: {
+            tag: "Novidade",
+            title: "Bolo de cenoura",
+            detail: "Feito todo dia, com a receita da casa.",
+            price: "R$ 12,00",
+            prompt: "O produto novo de perto, com luz natural",
+        },
+        statusOffer: {
+            eyebrow: "Só hoje",
+            title: "Leve 3, pague 2",
+            detail: "Válido até as 18h.",
+            cta: "Responda este status para pedir",
+        },
+        carousel: {
+            title: "3 motivos para nos visitar",
+            hint: "Arraste para o lado",
+            tips: [
+                { title: "Feito com cuidado", detail: "Cada detalhe é pensado para você." },
+                {
+                    title: "Atendimento de verdade",
+                    detail: "A gente conhece cada cliente pelo nome.",
+                },
+                {
+                    title: "Perto de você",
+                    detail: "Fácil de chegar, e também atendemos pelo WhatsApp.",
+                },
+            ],
+            end: "Venha nos ver",
+            cta: "Chame no WhatsApp",
+        },
+        slots: {
+            title: "Título",
+            detail: "Detalhe",
+            badge: "Desconto",
+            cta: "Como pedir",
+            contact: "Contato",
+            photo: "Foto",
+            days: "Dias",
+            times: "Horários",
+            items: "Itens",
+            prices: "Preços",
+            tag: "Etiqueta",
+            name: "Nome do produto",
+            price: "Preço",
+        },
+    },
+    en: {
+        promotion: {
+            badge: "-20%",
+            title: "This week's deal",
+            detail: "20% off everything, until Saturday.",
+            cta: "Message us on WhatsApp",
+            prompt: "The product on sale, on a simple background",
+        },
+        hours: {
+            title: "Opening hours",
+            days: ["Monday to Friday", "Saturday", "Sunday"],
+            times: ["7 am to 7 pm", "7 am to 1 pm", "Closed"],
+        },
+        menu: {
+            title: "Today's menu",
+            items: ["Cheese bread", "Drip coffee", "Cake of the day", "Fresh juice"],
+            prices: ["$4.00", "$3.50", "$5.00", "$6.00"],
+            cta: "Order on WhatsApp",
+        },
+        pix: {
+            title: "Pay with Pix",
+            detail: "Open your bank app and scan the code.",
+            key: "Pix key",
+        },
+        newProduct: {
+            tag: "New",
+            title: "Carrot cake",
+            detail: "Made fresh every day, from our own recipe.",
+            price: "$9.00",
+            prompt: "The new product up close, in natural light",
+        },
+        statusOffer: {
+            eyebrow: "Today only",
+            title: "Buy 2, get 1 free",
+            detail: "Until 6 pm.",
+            cta: "Reply to this status to order",
+        },
+        carousel: {
+            title: "3 reasons to visit us",
+            hint: "Swipe to see more",
+            tips: [
+                { title: "Made with care", detail: "We think through every detail for you." },
+                { title: "Real service", detail: "We know our customers by name." },
+                { title: "Close to you", detail: "Easy to get to, and we answer on WhatsApp too." },
+            ],
+            end: "Come and see us",
+            cta: "Message us on WhatsApp",
+        },
+        slots: {
+            title: "Title",
+            detail: "Details",
+            badge: "Discount",
+            cta: "How to order",
+            contact: "Contact",
+            photo: "Photo",
+            days: "Days",
+            times: "Hours",
+            items: "Items",
+            prices: "Prices",
+            tag: "Label",
+            name: "Product name",
+            price: "Price",
+        },
+    },
+    es: {
+        promotion: {
+            badge: "-20%",
+            title: "Oferta de la semana",
+            detail: "20% de descuento en todo, hasta el sábado.",
+            cta: "Escríbenos por WhatsApp",
+            prompt: "El producto en oferta, sobre un fondo simple",
+        },
+        hours: {
+            title: "Nuestro horario",
+            days: ["Lunes a viernes", "Sábado", "Domingo"],
+            times: ["7:00 a 19:00", "7:00 a 13:00", "Cerrado"],
+        },
+        menu: {
+            title: "Menú del día",
+            items: ["Pan de queso", "Café de filtro", "Postre del día", "Jugo natural"],
+            prices: ["$60", "$45", "$70", "$80"],
+            cta: "Pide por WhatsApp",
+        },
+        pix: {
+            title: "Paga con Pix",
+            detail: "Abre la app de tu banco y escanea el código.",
+            key: "Clave Pix",
+        },
+        newProduct: {
+            tag: "Novedad",
+            title: "Pastel de zanahoria",
+            detail: "Hecho todos los días, con la receta de la casa.",
+            price: "$90",
+            prompt: "El producto nuevo de cerca, con luz natural",
+        },
+        statusOffer: {
+            eyebrow: "Solo hoy",
+            title: "Lleva 3, paga 2",
+            detail: "Hasta las 18:00.",
+            cta: "Responde este estado para pedir",
+        },
+        carousel: {
+            title: "3 razones para visitarnos",
+            hint: "Desliza para ver más",
+            tips: [
+                { title: "Hecho con cuidado", detail: "Pensamos cada detalle para ti." },
+                { title: "Atención de verdad", detail: "Conocemos a cada cliente por su nombre." },
+                {
+                    title: "Cerca de ti",
+                    detail: "Fácil de llegar, y también atendemos por WhatsApp.",
+                },
+            ],
+            end: "Ven a visitarnos",
+            cta: "Escríbenos por WhatsApp",
+        },
+        slots: {
+            title: "Título",
+            detail: "Detalle",
+            badge: "Descuento",
+            cta: "Cómo pedir",
+            contact: "Contacto",
+            photo: "Foto",
+            days: "Días",
+            times: "Horarios",
+            items: "Productos",
+            prices: "Precios",
+            tag: "Etiqueta",
+            name: "Nombre del producto",
+            price: "Precio",
+        },
+    },
+};
+/** A sample Pix key from Banco Central's manual, so the card shows a code until the owner's
+ *  own key replaces it. It pays no one. */
+const SAMPLE_PIX_KEY = "123e4567-e12b-12d1-a456-426655440000";
+/** The margins of each size. Stories and status keep clear of the strips their app draws over
+ *  the top (the name) and the bottom (the reply box). */
+const MARGINS = {
+    "ig-post": { side: 80, top: 80, bottom: 80 },
+    "ig-square": { side: 72, top: 72, bottom: 72 },
+    "ig-story": { side: 80, top: 250, bottom: 320 },
+    "wa-status": { side: 80, top: 220, bottom: 300 },
+    "share-card": { side: 64, top: 64, bottom: 64 },
+};
+function canvasOf(format) {
+    const { w, h } = FORMATS[format];
+    const margin = MARGINS[format];
+    const safe = {
+        x: margin.side,
+        y: margin.top,
+        w: w - 2 * margin.side,
+        h: h - margin.top - margin.bottom,
+    };
+    return { w, h, safe, wide: w > h, k: Math.min(safe.w / 920, safe.h / 1190) };
+}
+const r = Math.round;
+const rounded = (box) => ({ x: r(box.x), y: r(box.y), w: r(box.w), h: r(box.h) });
+/** A text box `lines` tall, or `box.h` tall when given. */
+function words(id, text, box, spec, slot) {
+    const lineHeight = lineHeightOf(spec);
+    const lines = spec.lines ?? 1;
+    const size = r(spec.size);
+    return {
+        id,
+        type: "text",
+        text,
+        ...(slot ? { slot } : {}),
+        frame: rounded({ ...box, h: box.h ?? tall(spec) }),
+        style: {
+            font: spec.weight ? { role: spec.font, weight: spec.weight } : { role: spec.font },
+            size,
+            lineHeight,
+            ...(spec.align ? { align: spec.align } : {}),
+            ...(spec.valign ? { valign: spec.valign } : {}),
+            ...(spec.caps ? { uppercase: true, tracking: 0.08 } : {}),
+            fill: { token: spec.fill ?? "ink" },
+        },
+        ...(spec.fixed
+            ? {}
+            : { fit: { mode: "shrink", min: r(size * 0.6), maxLines: lines } }),
+    };
+}
+const lineHeightOf = (spec) => spec.lineHeight ?? (spec.font === "display" ? 1.06 : 1.3);
+/** The height a `words` box takes. */
+function tall(spec) {
+    return Math.ceil((spec.lines ?? 1) * r(spec.size) * lineHeightOf(spec));
+}
+function rect(id, box, fill, radius = 0) {
+    return {
+        id,
+        type: "shape",
+        shape: "rect",
+        frame: rounded(box),
+        ...(radius ? { radius: r(radius) } : {}),
+        fill: { token: fill },
+    };
+}
+function ellipse(id, box, fill) {
+    return { id, type: "shape", shape: "ellipse", frame: rounded(box), fill: { token: fill } };
+}
+function clock(box) {
+    return {
+        id: "clock",
+        type: "icon",
+        icon: "clock",
+        stroke: { token: "primary" },
+        frame: rounded(box),
+    };
+}
+function photo(box, radius, prompt) {
+    return {
+        id: "photo",
+        type: "art",
+        slot: "photo",
+        prompt,
+        radius: r(radius),
+        frame: rounded(box),
+    };
+}
+function logo(id, box, align = "start") {
+    return { id, type: "logo", variant: "horizontal", tone: "color", align, frame: rounded(box) };
+}
+/** A group whose layers are given in its own space. */
+function group(id, box, layers, rotate) {
+    const frame = rounded(box);
+    return { id, type: "group", frame: rotate ? { ...frame, rotate } : frame, layers };
+}
+/** Words on a rounded bar of a color, as one group. */
+function pill(id, text, box, fill, ink, size, slot, caps = false) {
+    const inset = box.h * 0.45;
+    return group(id, box, [
+        rect(`${id}-bar`, { x: 0, y: 0, w: box.w, h: box.h }, fill, box.h / 2),
+        words(`${id}-text`, text, { x: inset, y: 0, w: box.w - 2 * inset, h: box.h }, { font: "text", size, weight: 600, fill: ink, align: "center", valign: "middle", caps }, slot),
+    ]);
+}
+/** The line a post ends with: the brand's public Instagram, its site, or its WhatsApp. */
+function contactLine(brand) {
+    const { instagram, site, whatsapp } = brand.links;
+    if (instagram?.public)
+        return `@${instagram.value.replace(/^@/, "").replace(/^.*\//, "")}`;
+    if (site?.public)
+        return site.value.replace(/^https?:\/\//, "").replace(/\/$/, "");
+    if (brand.domain)
+        return brand.domain;
+    if (whatsapp?.public)
+        return whatsapp.value;
+    return brand.name;
+}
+/** The logo on the left of a row and a line of words on the right. */
+function footer(box, text, size, fill, slot) {
+    return [
+        logo("logo", { ...box, w: box.w * 0.46 }),
+        words("contact", text, { x: box.x + box.w * 0.5, y: box.y, w: box.w * 0.5, h: box.h }, { font: "text", size, weight: 600, fill, align: "end", valign: "middle" }, slot),
+    ];
+}
+const ROW_LINE = 2;
+/** A card for `rows` rows of `size` type, with room for one more before the words overflow. */
+function tableHeight(rows, size, pad) {
+    return Math.ceil((rows + 1) * r(size) * ROW_LINE + 2 * pad);
+}
+/** Two columns of rows on a card: names on the left, values on the right, lined up. */
+function table(card, pad, left, right, size, slots) {
+    const inner = { x: card.x + pad, y: card.y + pad, w: card.w - 2 * pad, h: card.h - 2 * pad };
+    const row = { font: "text", size, lineHeight: ROW_LINE, valign: "middle", fixed: true };
+    return [
+        rect("card", card, "surface", pad * 0.6),
+        words("names", left.join("\n"), { ...inner, w: inner.w * 0.6 }, row, slots[0]),
+        words("values", right.join("\n"), { ...inner, x: inner.x + inner.w * 0.6, w: inner.w * 0.4 }, { ...row, weight: 600, align: "end" }, slots[1]),
+    ];
+}
+function page(id, layers, background = "ground") {
+    return { id, background: { token: background }, layers };
+}
+function promotion(c, copy) {
+    const t = copy.promotion;
+    const s = c.safe;
+    const badge = (box) => group("badge", box, [
+        ellipse("badge-disc", { ...box, x: 0, y: 0 }, "primary"),
+        words("badge-text", t.badge, { x: box.w * 0.12, y: 0, w: box.w * 0.76, h: box.h }, {
+            font: "display",
+            size: box.w * 0.3,
+            fill: "onPrimary",
+            align: "center",
+            valign: "middle",
+        }, "badge"),
+    ], -8);
+    if (c.wide) {
+        const photoW = 470;
+        const textW = s.w - photoW - 48;
+        const title = { font: "display", size: 72, lines: 2 };
+        return [
+            page("p", [
+                photo({ x: s.x + s.w - photoW, y: s.y, w: photoW, h: s.h }, 28, t.prompt),
+                badge({ x: s.x + s.w - photoW + 24, y: s.y + 24, w: 150, h: 150 }),
+                words("title", t.title, { x: s.x, y: s.y, w: textW }, title, "title"),
+                words("detail", t.detail, { x: s.x, y: s.y + tall(title) + 20, w: textW }, { font: "text", size: 34, lines: 2, fill: "muted" }, "detail"),
+                ...footer({ x: s.x, y: s.y + s.h - 56, w: textW, h: 56 }, t.cta, 28, "primary", "cta"),
+            ]),
+        ];
+    }
+    const k = c.k;
+    const gap = 40 * k;
+    const footerH = 72 * k;
+    const title = { font: "display", size: 104 * k, lines: 2 };
+    const detail = { font: "text", size: 48 * k, lines: 2, fill: "muted" };
+    const photoH = s.h - footerH - tall(title) - tall(detail) - 2.5 * gap;
+    const titleY = s.y + photoH + gap;
+    const size = 230 * k;
+    return [
+        page("p", [
+            photo({ x: s.x, y: s.y, w: s.w, h: photoH }, 36 * k, t.prompt),
+            badge({ x: s.x + s.w - size - 28 * k, y: s.y + 28 * k, w: size, h: size }),
+            words("title", t.title, { x: s.x, y: titleY, w: s.w }, title, "title"),
+            words("detail", t.detail, { x: s.x, y: titleY + tall(title) + gap / 2, w: s.w }, detail, "detail"),
+            ...footer({ x: s.x, y: s.y + s.h - footerH, w: s.w, h: footerH }, t.cta, 38 * k, "primary", "cta"),
+        ]),
+    ];
+}
+function hours(c, copy, brand) {
+    const t = copy.hours;
+    const s = c.safe;
+    const slots = ["days", "times"];
+    if (c.wide) {
+        const left = 400;
+        const title = { font: "display", size: 64, lines: 2 };
+        return [
+            page("p", [
+                clock({ x: s.x, y: s.y, w: 72, h: 72 }),
+                words("title", t.title, { x: s.x, y: s.y + 96, w: left }, title, "title"),
+                logo("logo", { x: s.x, y: s.y + s.h - 56, w: left, h: 56 }),
+                ...table({ x: s.x + left + 48, y: s.y, w: s.w - left - 48, h: s.h }, 40, t.days, t.times, 32, slots),
+            ]),
+        ];
+    }
+    const k = c.k;
+    const gap = 40 * k;
+    const icon = 96 * k;
+    const footerH = 72 * k;
+    const pad = 56 * k;
+    const row = 52 * k;
+    const title = { font: "display", size: 104 * k, lines: 2 };
+    const room = s.h - footerH - gap;
+    const head = icon + 24 * k + tall(title) + gap;
+    const cardH = Math.min(tableHeight(t.days.length, row, pad), room - head);
+    const top = s.y + (room - head - cardH) / 2;
+    return [
+        page("p", [
+            clock({ x: s.x, y: top, w: icon, h: icon }),
+            words("title", t.title, { x: s.x, y: top + icon + 24 * k, w: s.w }, title, "title"),
+            ...table({ x: s.x, y: top + head, w: s.w, h: cardH }, pad, t.days, t.times, row, slots),
+            ...footer({ x: s.x, y: s.y + s.h - footerH, w: s.w, h: footerH }, contactLine(brand), 38 * k, "muted", "contact"),
+        ]),
+    ];
+}
+function menu(c, copy) {
+    const t = copy.menu;
+    const s = c.safe;
+    const slots = ["items", "prices"];
+    if (c.wide) {
+        const left = 380;
+        const title = { font: "display", size: 64, lines: 3 };
+        return [
+            page("p", [
+                words("title", t.title, { x: s.x, y: s.y, w: left }, title, "title"),
+                words("cta", t.cta, { x: s.x, y: s.y + tall(title) + 24, w: left }, { font: "text", size: 28, weight: 600, fill: "primary" }, "cta"),
+                logo("logo", { x: s.x, y: s.y + s.h - 56, w: left, h: 56 }),
+                ...table({ x: s.x + left + 48, y: s.y, w: s.w - left - 48, h: s.h }, 40, t.items, t.prices, 32, slots),
+            ]),
+        ];
+    }
+    const k = c.k;
+    const gap = 40 * k;
+    const footerH = 72 * k;
+    const pad = 56 * k;
+    const row = 52 * k;
+    const title = { font: "display", size: 104 * k, lines: 2 };
+    const room = s.h - footerH - gap;
+    const head = tall(title) + gap;
+    const cardH = Math.min(tableHeight(t.items.length, row, pad), room - head);
+    const top = s.y + (room - head - cardH) / 2;
+    return [
+        page("p", [
+            words("title", t.title, { x: s.x, y: top, w: s.w }, title, "title"),
+            ...table({ x: s.x, y: top + head, w: s.w, h: cardH }, pad, t.items, t.prices, row, slots),
+            ...footer({ x: s.x, y: s.y + s.h - footerH, w: s.w, h: footerH }, t.cta, 38 * k, "primary", "cta"),
+        ]),
+    ];
+}
+function pix(c, copy, brand, options) {
+    const t = copy.pix;
+    const s = c.safe;
+    const details = {
+        key: options.pix?.key ?? SAMPLE_PIX_KEY,
+        name: brand.name,
+        city: options.pix?.city ?? "BRASIL",
+        amount: options.pix?.amount,
+    };
+    const qr = (box) => ({
+        id: "pix-qr",
+        type: "qr",
+        value: pixCode(details),
+        fill: { token: "ink" },
+        background: { token: "ground" },
+        ecc: "M",
+        frame: rounded(box),
+    });
+    const keyLine = `${t.key}: ${details.key}`;
+    if (c.wide) {
+        const side = s.h;
+        const textX = s.x + side + 48;
+        const textW = s.w - side - 48;
+        const title = { font: "display", size: 68, lines: 2 };
+        const detail = { font: "text", size: 34, lines: 2, fill: "muted" };
+        return [
+            page("p", [
+                rect("card", { x: s.x, y: s.y, w: side, h: side }, "surface", 28),
+                qr({ x: s.x + 32, y: s.y + 32, w: side - 64, h: side - 64 }),
+                words("title", t.title, { x: textX, y: s.y, w: textW }, title, "title"),
+                words("detail", t.detail, { x: textX, y: s.y + tall(title) + 16, w: textW }, detail, "detail"),
+                words("pix-key", keyLine, { x: textX, y: s.y + tall(title) + tall(detail) + 40, w: textW }, { font: "text", size: 28, lines: 2, weight: 600 }),
+                logo("logo", { x: textX, y: s.y + s.h - 56, w: textW, h: 56 }),
+            ]),
+        ];
+    }
+    const k = c.k;
+    const gap = 40 * k;
+    const footerH = 72 * k;
+    const pad = 48 * k;
+    const title = { font: "display", size: 104 * k, lines: 1 };
+    const detail = { font: "text", size: 44 * k, lines: 2, fill: "muted" };
+    const key = { font: "text", size: 36 * k, lines: 2, weight: 600, align: "center" };
+    const cardY = s.y + tall(title) + 20 * k + tall(detail) + gap;
+    const card = { x: s.x, y: cardY, w: s.w, h: s.y + s.h - footerH - gap - cardY };
+    const side = Math.min(card.w - 2 * pad, card.h - 2 * pad - tall(key) - 24 * k);
+    return [
+        page("p", [
+            words("title", t.title, { x: s.x, y: s.y, w: s.w }, title, "title"),
+            words("detail", t.detail, { x: s.x, y: s.y + tall(title) + 20 * k, w: s.w }, detail, "detail"),
+            rect("card", card, "surface", 36 * k),
+            qr({ x: card.x + (card.w - side) / 2, y: card.y + pad, w: side, h: side }),
+            words("pix-key", keyLine, { x: card.x + pad, y: card.y + pad + side + 24 * k, w: card.w - 2 * pad }, key),
+            ...footer({ x: s.x, y: s.y + s.h - footerH, w: s.w, h: footerH }, brand.name, 38 * k, "muted"),
+        ]),
+    ];
+}
+function newProduct(c, copy) {
+    const t = copy.newProduct;
+    const s = c.safe;
+    if (c.wide) {
+        const photoW = 470;
+        const textX = s.x + photoW + 48;
+        const textW = s.w - photoW - 48;
+        const name = { font: "display", size: 60, lines: 2 };
+        const detail = { font: "text", size: 32, lines: 2, fill: "muted" };
+        return [
+            page("p", [
+                photo({ x: s.x, y: s.y, w: photoW, h: s.h }, 28, t.prompt),
+                pill("tag", t.tag, { x: textX, y: s.y, w: 220, h: 52 }, "primary", "onPrimary", 24, "tag", true),
+                words("title", t.title, { x: textX, y: s.y + 76, w: textW }, name, "name"),
+                words("detail", t.detail, { x: textX, y: s.y + 76 + tall(name) + 16, w: textW }, detail, "detail"),
+                words("price", t.price, { x: textX, y: s.y + s.h - 64, w: textW * 0.5, h: 64 }, { font: "display", size: 52, fill: "primary", valign: "middle" }, "price"),
+                logo("logo", { x: textX + textW * 0.5, y: s.y + s.h - 56, w: textW * 0.5, h: 56 }, "end"),
+            ]),
+        ];
+    }
+    const k = c.k;
+    const gap = 40 * k;
+    const tagH = 68 * k;
+    const rowH = 88 * k;
+    const name = { font: "display", size: 96 * k, lines: 2 };
+    const detail = { font: "text", size: 44 * k, lines: 2, fill: "muted" };
+    const photoY = s.y + tagH + 28 * k;
+    const photoH = s.y + s.h - rowH - gap - tall(detail) - 16 * k - tall(name) - gap - photoY;
+    const nameY = photoY + photoH + gap;
+    const rowY = s.y + s.h - rowH;
+    return [
+        page("p", [
+            pill("tag", t.tag, { x: s.x, y: s.y, w: 300 * k, h: tagH }, "primary", "onPrimary", 32 * k, "tag", true),
+            photo({ x: s.x, y: photoY, w: s.w, h: photoH }, 36 * k, t.prompt),
+            words("title", t.title, { x: s.x, y: nameY, w: s.w }, name, "name"),
+            words("detail", t.detail, { x: s.x, y: nameY + tall(name) + 16 * k, w: s.w }, detail, "detail"),
+            words("price", t.price, { x: s.x, y: rowY, w: s.w * 0.55, h: rowH }, { font: "display", size: 80 * k, fill: "primary", valign: "middle" }, "price"),
+            logo("logo", { x: s.x + s.w * 0.55, y: rowY + (rowH - 72 * k) / 2, w: s.w * 0.45, h: 72 * k }, "end"),
+        ]),
+    ];
+}
+function statusOffer(c, copy) {
+    const t = copy.statusOffer;
+    const s = c.safe;
+    /** The logo on a ground chip, since the brand color behind it may be close to the mark's. */
+    const chip = (box) => group("logo-chip", box, [
+        rect("logo-chip-bar", { x: 0, y: 0, w: box.w, h: box.h }, "ground", box.h / 2),
+        logo("logo", { x: box.h * 0.45, y: box.h * 0.2, w: box.w - box.h * 0.9, h: box.h * 0.6 }, "center"),
+    ]);
+    const reply = (box, size) => group("reply", box, [
+        rect("reply-bar", { x: 0, y: 0, w: box.w, h: box.h }, "ground", box.h / 2),
+        {
+            id: "reply-icon",
+            type: "icon",
+            icon: "message-circle",
+            stroke: { token: "primary" },
+            frame: rounded({
+                x: box.h * 0.35,
+                y: box.h * 0.25,
+                w: box.h * 0.5,
+                h: box.h * 0.5,
+            }),
+        },
+        words("cta", t.cta, { x: box.h, y: 0, w: box.w - box.h * 1.35, h: box.h }, { font: "text", size, weight: 600, valign: "middle" }, "cta"),
+    ]);
+    /** The offer, centered between `top` and `bottom`: a line above, the deal, a line below. */
+    const middle = (top, bottom, x, w, sizes, align) => {
+        const eyebrow = {
+            font: "text",
+            size: sizes.eyebrow,
+            weight: 600,
+            fill: "onPrimary",
+            align,
+            caps: true,
+        };
+        const title = {
+            font: "display",
+            size: sizes.title,
+            lines: sizes.titleLines,
+            lineHeight: 1,
+            fill: "onPrimary",
+            align,
+            valign: "middle",
+        };
+        const detail = { font: "text", size: sizes.detail, fill: "onPrimary", align };
+        const block = tall(eyebrow) + tall(title) + tall(detail) + 2 * sizes.gap;
+        const y = top + (bottom - top - block) / 2;
+        const titleY = y + tall(eyebrow) + sizes.gap;
+        return [
+            words("eyebrow", t.eyebrow, { x, y, w }, eyebrow),
+            words("title", t.title, { x, y: titleY, w }, title, "title"),
+            words("detail", t.detail, { x, y: titleY + tall(title) + sizes.gap, w }, detail, "detail"),
+        ];
+    };
+    if (c.wide) {
+        return [
+            page("p", [
+                chip({ x: s.x, y: s.y, w: 300, h: 84 }),
+                ...middle(s.y + 84, s.y + s.h - 84, s.x, s.w * 0.8, { eyebrow: 28, title: 100, titleLines: 2, detail: 32, gap: 12 }, "start"),
+                reply({ x: s.x, y: s.y + s.h - 84, w: 640, h: 84 }, 28),
+            ], "primary"),
+        ];
+    }
+    const k = c.k;
+    const chipH = 104 * k;
+    const replyH = 120 * k;
+    return [
+        page("p", [
+            chip({ x: s.x + (s.w - 380 * k) / 2, y: s.y, w: 380 * k, h: chipH }),
+            ...middle(s.y + chipH, s.y + s.h - replyH, s.x, s.w, { eyebrow: 40 * k, title: 150 * k, titleLines: 3, detail: 48 * k, gap: 24 * k }, "center"),
+            reply({ x: s.x, y: s.y + s.h - replyH, w: s.w, h: replyH }, 40 * k),
+        ], "primary"),
+    ];
+}
+/** An arrow pointing right, drawn as a path in a 56 by 40 box. */
+function arrow(id, box) {
+    return {
+        id,
+        type: "shape",
+        shape: "path",
+        d: "M4 20H50M32 4L50 20L32 36",
+        stroke: { paint: { token: "primary" }, width: 6 },
+        frame: rounded(box),
+    };
+}
+function carousel(c, copy, brand) {
+    const t = copy.carousel;
+    const s = c.safe;
+    // The share card holds the portrait layout at a smaller scale.
+    const k = c.wide ? 0.6 : c.k;
+    const count = t.tips.length + 2;
+    const gap = 40 * k;
+    const footerH = 72 * k;
+    const footerY = s.y + s.h - footerH;
+    const cover = { font: "display", size: 128 * k, lines: 4, valign: "middle" };
+    const coverY = s.y + 80 * k + (footerY - gap - s.y - 80 * k - tall(cover)) / 2;
+    const hint = {
+        font: "text",
+        size: 38 * k,
+        fill: "muted",
+        align: "end",
+        valign: "middle",
+    };
+    const pages = [
+        page("cover", [
+            words("brand", brand.name, { x: s.x, y: s.y, w: s.w }, { font: "text", size: 36 * k, weight: 600, fill: "primary", caps: true }),
+            words("title", t.title, { x: s.x, y: coverY, w: s.w }, cover, "title"),
+            logo("logo", { x: s.x, y: footerY, w: s.w * 0.4, h: footerH }),
+            words("hint", t.hint, { x: s.x + s.w * 0.42, y: footerY, w: s.w * 0.58 - 84 * k, h: footerH }, hint),
+            arrow("hint-arrow", {
+                x: s.x + s.w - 56 * k,
+                y: footerY + (footerH - 40 * k) / 2,
+                w: 56 * k,
+                h: 40 * k,
+            }),
+        ]),
+    ];
+    t.tips.forEach((tip, index) => {
+        const circle = 150 * k;
+        const head = { font: "display", size: 96 * k, lines: 2 };
+        const text = { font: "text", size: 50 * k, lines: 4, fill: "muted" };
+        const block = circle + gap + tall(head) + 24 * k + tall(text);
+        const y = s.y + (footerY - gap - s.y - block) / 2;
+        const n = index + 1;
+        pages.push(page(`tip-${n}`, [
+            words("count", `${n + 1}/${count}`, { x: s.x + s.w - 200 * k, y: s.y, w: 200 * k }, { font: "text", size: 36 * k, fill: "muted", align: "end" }),
+            group("number", { x: s.x, y, w: circle, h: circle }, [
+                ellipse("number-disc", { x: 0, y: 0, w: circle, h: circle }, "primary"),
+                words("number-text", String(n), { x: 0, y: 0, w: circle, h: circle }, {
+                    font: "display",
+                    size: circle * 0.5,
+                    fill: "onPrimary",
+                    align: "center",
+                    valign: "middle",
+                }),
+            ]),
+            words("title", tip.title, { x: s.x, y: y + circle + gap, w: s.w }, head, `tip-${n}-title`),
+            words("detail", tip.detail, { x: s.x, y: y + circle + gap + tall(head) + 24 * k, w: s.w }, text, `tip-${n}-detail`),
+            {
+                id: "mark",
+                type: "logo",
+                variant: "mark",
+                tone: "color",
+                frame: rounded({ x: s.x, y: footerY, w: footerH, h: footerH }),
+            },
+        ]));
+    });
+    const end = { font: "display", size: 120 * k, lines: 2 };
+    const contact = { font: "text", size: 48 * k, weight: 600 };
+    const ctaH = 112 * k;
+    const block = tall(end) + gap + tall(contact) + gap + ctaH;
+    const y = s.y + (footerY - gap - s.y - block) / 2;
+    pages.push(page("end", [
+        words("title", t.end, { x: s.x, y, w: s.w }, end, "end-title"),
+        words("contact", contactLine(brand), { x: s.x, y: y + tall(end) + gap, w: s.w }, contact, "contact"),
+        pill("cta", t.cta, { x: s.x, y: y + tall(end) + tall(contact) + 2 * gap, w: s.w * 0.8, h: ctaH }, "primary", "onPrimary", 40 * k, "cta"),
+        logo("logo", { x: s.x, y: footerY, w: s.w * 0.4, h: footerH }),
+    ]));
+    return pages;
+}
+const BUILDERS = {
+    promotion,
+    hours,
+    menu,
+    pix,
+    "new-product": newProduct,
+    "status-offer": statusOffer,
+    carousel,
+};
+/** The text slots of a scene's pages, labeled in its language, and its photo slot. */
+function slotsOf(pages, labels) {
+    const slots = {};
+    // A carousel numbers its slots by page (tip-2-title); the label is the one for "title".
+    const label = (slot) => {
+        const base = slot.replace(/^(tip-\d+|end)-/, "");
+        return labels[base] ?? base;
+    };
+    const walk = (layers) => {
+        for (const layer of layers) {
+            if (layer.type === "group")
+                walk(layer.layers);
+            else if (layer.type === "text" && layer.slot)
+                slots[layer.slot] = { kind: "text", label: label(layer.slot), live: true };
+            else if (layer.type === "art" && layer.slot)
+                slots[layer.slot] = { kind: "image", label: label(layer.slot) };
+        }
+    };
+    for (const each of pages)
+        walk(each.layers);
+    return slots;
+}
+/**
+ * A starting design for one of the owner's jobs, in one size and language, for one brand.
+ *
+ * ```ts
+ * const scene = postTemplate("promotion", brand); // an Instagram post, in the brand's language
+ * ```
+ */
+export function postTemplate(id, brand, options = {}) {
+    const info = POST_TEMPLATE_INFO[id];
+    const format = options.format ?? info.format;
+    const locale = options.locale ?? brand.defaultLocale;
+    const copy = COPY[locale];
+    const canvas = canvasOf(format);
+    const pages = BUILDERS[id](canvas, copy, brand, options);
+    return {
+        v: 1,
+        format,
+        size: { w: canvas.w, h: canvas.h },
+        theme: "light",
+        locale,
+        pages,
+        slots: slotsOf(pages, copy.slots),
+        meta: { name: info.text[locale].name, template: id, source: "template" },
+    };
+}