@treasuryspatial/render-kit 0.1.1

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './render-api';
+export * from './render-prompt';
+export * from './postcard';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './render-api';
+export * from './render-prompt';
+export * from './postcard';

package/dist/postcard.d.ts

@@ -0,0 +1,20 @@
+export type PostcardFontKey = 'neusa' | 'nunito' | 'mono' | 'serif';
+export type PostcardFontOption = {
+    key: PostcardFontKey;
+    label: string;
+    fontFamily: string;
+};
+export declare const POSTCARD_FONT_OPTIONS: PostcardFontOption[];
+export declare const DEFAULT_POSTCARD_FONT: PostcardFontKey;
+export type PostcardText = {
+    to: string;
+    from: string;
+    greeting: string;
+    font: PostcardFontKey;
+};
+type DecorationOptions = {
+    postcard?: PostcardText | null;
+};
+export declare function decoratePostcardImage(imageDataUrl: string, options?: DecorationOptions): Promise<string>;
+export {};
+//# sourceMappingURL=postcard.d.ts.map

package/dist/postcard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"postcard.d.ts","sourceRoot":"","sources":["../src/postcard.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,eAAe,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,kBAAkB,EAKrD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,eAAyB,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,eAAe,CAAC;CACvB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AA4HF,wBAAsB,qBAAqB,CACzC,YAAY,EAAE,MAAM,EACpB,OAAO,GAAE,iBAAsB,GAC9B,OAAO,CAAC,MAAM,CAAC,CAsJjB"}

package/dist/postcard.js

@@ -0,0 +1,242 @@
+export const POSTCARD_FONT_OPTIONS = [
+    { key: 'neusa', label: 'neusa serif', fontFamily: "'Neusa', 'Times New Roman', serif" },
+    { key: 'nunito', label: 'nunito sans', fontFamily: "'Nunito Sans', Arial, sans-serif" },
+    { key: 'mono', label: 'typewriter mono', fontFamily: "ui-monospace, 'SFMono-Regular', Menlo, monospace" },
+    { key: 'serif', label: 'classic serif', fontFamily: "'Times New Roman', Georgia, serif" },
+];
+export const DEFAULT_POSTCARD_FONT = 'neusa';
+const BADGE_LEFT_SRC = '/treasury-spatial-composer-pill.png';
+const BADGE_RIGHT_SRC = '/postcard/courtyard-urbanist.png';
+const imageCache = new Map();
+const boundsCache = new Map();
+const loadImage = (src) => {
+    if (!imageCache.has(src)) {
+        const promise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => resolve(img);
+            img.onerror = () => {
+                imageCache.delete(src);
+                reject(new Error(`Failed to load image: ${src}`));
+            };
+            img.src = src;
+        });
+        imageCache.set(src, promise);
+    }
+    return imageCache.get(src);
+};
+const loadBadge = async (svgSrc, pngSrc) => {
+    try {
+        return await loadImage(svgSrc);
+    }
+    catch {
+        return await loadImage(pngSrc);
+    }
+};
+const getOpaqueBounds = async (image, cacheKey) => {
+    if (!boundsCache.has(cacheKey)) {
+        const promise = new Promise((resolve) => {
+            const width = image.naturalWidth || image.width;
+            const height = image.naturalHeight || image.height;
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            if (!ctx || width === 0 || height === 0) {
+                resolve({ minX: 0, minY: 0, maxX: width, maxY: height });
+                return;
+            }
+            ctx.drawImage(image, 0, 0, width, height);
+            const data = ctx.getImageData(0, 0, width, height).data;
+            let minX = width;
+            let minY = height;
+            let maxX = 0;
+            let maxY = 0;
+            let found = false;
+            for (let y = 0; y < height; y += 1) {
+                for (let x = 0; x < width; x += 1) {
+                    const alpha = data[(y * width + x) * 4 + 3];
+                    if (alpha > 0) {
+                        found = true;
+                        if (x < minX)
+                            minX = x;
+                        if (y < minY)
+                            minY = y;
+                        if (x > maxX)
+                            maxX = x;
+                        if (y > maxY)
+                            maxY = y;
+                    }
+                }
+            }
+            if (!found) {
+                resolve({ minX: 0, minY: 0, maxX: width, maxY: height });
+                return;
+            }
+            resolve({ minX, minY, maxX: maxX + 1, maxY: maxY + 1 });
+        });
+        boundsCache.set(cacheKey, promise);
+    }
+    return boundsCache.get(cacheKey);
+};
+const loadImageNoCache = (src) => {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+        img.src = src;
+    });
+};
+const scaleToFit = (width, height, maxWidth, maxHeight) => {
+    const scale = Math.min(maxWidth / width, maxHeight / height, 1);
+    return { width: Math.round(width * scale), height: Math.round(height * scale) };
+};
+// Badge scale is relative to the image, not the original asset size.
+const BADGE_SCALE = 0.147;
+const wrapText = (ctx, text, maxWidth) => {
+    const words = text.split(/\s+/).filter(Boolean);
+    const lines = [];
+    let line = '';
+    words.forEach((word) => {
+        const testLine = line ? `${line} ${word}` : word;
+        const metrics = ctx.measureText(testLine);
+        if (metrics.width > maxWidth && line) {
+            lines.push(line);
+            line = word;
+        }
+        else {
+            line = testLine;
+        }
+    });
+    if (line)
+        lines.push(line);
+    return lines;
+};
+const resolveFontFamily = (key) => {
+    return POSTCARD_FONT_OPTIONS.find((option) => option.key === key)?.fontFamily || POSTCARD_FONT_OPTIONS[0].fontFamily;
+};
+export async function decoratePostcardImage(imageDataUrl, options = {}) {
+    if (typeof window === 'undefined' || !imageDataUrl)
+        return imageDataUrl;
+    try {
+        const [baseImage, leftBadge, rightBadge] = await Promise.all([
+            loadImageNoCache(imageDataUrl),
+            loadBadge(BADGE_LEFT_SRC, BADGE_LEFT_SRC.replace(/\.svg$/i, '.png')),
+            loadBadge(BADGE_RIGHT_SRC, BADGE_RIGHT_SRC.replace(/\.svg$/i, '.png')),
+        ]);
+        const canvas = document.createElement('canvas');
+        canvas.width = baseImage.width;
+        canvas.height = baseImage.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return imageDataUrl;
+        ctx.drawImage(baseImage, 0, 0, canvas.width, canvas.height);
+        const pad = Math.round(Math.min(canvas.width, canvas.height) * 0.02);
+        const badgeMaxWidth = canvas.width * BADGE_SCALE;
+        const badgeMaxHeight = canvas.height * BADGE_SCALE;
+        const leftSize = scaleToFit(leftBadge.width, leftBadge.height, badgeMaxWidth, badgeMaxHeight);
+        const rightSize = scaleToFit(rightBadge.width, rightBadge.height, badgeMaxWidth, badgeMaxHeight);
+        const [leftBounds, rightBounds] = await Promise.all([
+            getOpaqueBounds(leftBadge, BADGE_LEFT_SRC),
+            getOpaqueBounds(rightBadge, BADGE_RIGHT_SRC),
+        ]);
+        const baselineY = canvas.height - pad;
+        const leftScaleX = leftSize.width / leftBadge.width;
+        const leftScaleY = leftSize.height / leftBadge.height;
+        const rightScaleX = rightSize.width / rightBadge.width;
+        const rightScaleY = rightSize.height / rightBadge.height;
+        const leftX = pad - leftBounds.minX * leftScaleX;
+        const leftY = baselineY - leftBounds.maxY * leftScaleY;
+        const rightX = canvas.width - pad - rightBounds.maxX * rightScaleX;
+        const rightY = baselineY - rightBounds.maxY * rightScaleY;
+        ctx.drawImage(leftBadge, leftX, leftY, leftSize.width, leftSize.height);
+        ctx.drawImage(rightBadge, rightX, rightY, rightSize.width, rightSize.height);
+        if (options.postcard) {
+            const { to, from, greeting, font } = options.postcard;
+            const fontFamily = resolveFontFamily(font);
+            const tabWidth = Math.round(canvas.width * 0.33);
+            const tabHeight = Math.round(canvas.height * 0.26);
+            const tabX = 0;
+            const tabY = 0;
+            const tabRadius = Math.round(tabHeight * 0.18);
+            const tabPadding = Math.round(tabHeight * 0.12);
+            const leftColWidth = Math.round(tabWidth * 0.33);
+            const rightColWidth = tabWidth - leftColWidth;
+            const availableHeight = Math.max(0, tabHeight - tabPadding * 2);
+            const labelFontSize = Math.max(10, Math.round(Math.min(tabHeight * 0.16, availableHeight / 2.4)));
+            const lineGap = Math.round(labelFontSize * 0.4);
+            const baseGreetingFont = Math.max(12, Math.round(tabHeight * 0.24));
+            if (document.fonts?.load) {
+                try {
+                    await document.fonts.load(`${labelFontSize}px ${fontFamily}`);
+                    await document.fonts.load(`${baseGreetingFont}px ${fontFamily}`);
+                }
+                catch {
+                    // ignore font loading failures
+                }
+            }
+            ctx.save();
+            ctx.textBaseline = 'top';
+            ctx.fillStyle = 'rgba(255, 255, 255, 0.65)';
+            ctx.beginPath();
+            ctx.moveTo(tabX, tabY);
+            ctx.lineTo(tabX + tabWidth, tabY);
+            ctx.lineTo(tabX + tabWidth, tabY + tabHeight - tabRadius);
+            ctx.quadraticCurveTo(tabX + tabWidth, tabY + tabHeight, tabX + tabWidth - tabRadius, tabY + tabHeight);
+            ctx.lineTo(tabX, tabY + tabHeight);
+            ctx.closePath();
+            ctx.fill();
+            const toText = (to || '').trim();
+            const fromText = (from || '').trim();
+            const hasRecipients = Boolean(toText || fromText);
+            if (hasRecipients) {
+                ctx.fillStyle = 'rgba(15, 23, 42, 0.9)';
+                ctx.font = `${labelFontSize}px ${fontFamily}`;
+                const leftX = tabX + tabPadding;
+                const leftBlockHeight = labelFontSize * 2 + lineGap;
+                const leftTop = tabY + Math.round((tabHeight - leftBlockHeight) / 2);
+                let leftY = leftTop;
+                ctx.fillText(`to: ${toText}`, leftX, leftY);
+                leftY += labelFontSize + lineGap;
+                ctx.fillText(`from: ${fromText}`, leftX, leftY);
+            }
+            const greetingX = tabX + (hasRecipients ? leftColWidth : 0) + tabPadding;
+            const greetingWidth = (hasRecipients ? rightColWidth : tabWidth) - tabPadding * 2;
+            const computeGreeting = (fontSize) => {
+                ctx.font = `${fontSize}px ${fontFamily}`;
+                const lines = greeting ? wrapText(ctx, greeting, greetingWidth) : [];
+                const capped = lines.slice(0, 4);
+                const gap = Math.round(fontSize * 0.28);
+                const height = capped.length > 0 ? capped.length * fontSize + (capped.length - 1) * gap : 0;
+                return { lines: capped, gap, height, fontSize };
+            };
+            let greetingLayout = computeGreeting(baseGreetingFont);
+            if (greetingLayout.height > availableHeight && greetingLayout.height > 0) {
+                const scale = availableHeight / greetingLayout.height;
+                const nextFont = Math.max(10, Math.round(baseGreetingFont * scale));
+                greetingLayout = computeGreeting(nextFont);
+            }
+            while (greetingLayout.height > availableHeight && greetingLayout.lines.length > 1) {
+                greetingLayout.lines.pop();
+                greetingLayout.height =
+                    greetingLayout.lines.length * greetingLayout.fontSize +
+                        Math.max(0, greetingLayout.lines.length - 1) * greetingLayout.gap;
+            }
+            const greetingTop = tabY + Math.round((tabHeight - greetingLayout.height) / 2);
+            let greetingY = greetingTop;
+            ctx.font = `${greetingLayout.fontSize}px ${fontFamily}`;
+            ctx.fillStyle = 'rgba(15, 23, 42, 0.95)';
+            greetingLayout.lines.forEach((line) => {
+                ctx.fillText(line, greetingX, greetingY);
+                greetingY += greetingLayout.fontSize + greetingLayout.gap;
+            });
+            ctx.restore();
+        }
+        return canvas.toDataURL('image/png');
+    }
+    catch (error) {
+        console.warn('[postcard] Failed to decorate image', error);
+        return imageDataUrl;
+    }
+}

package/dist/render-api.d.ts

@@ -0,0 +1,17 @@
+export type RenderRequestKind = 'render' | 'adapt';
+export type RenderRequestPayload = {
+    prompt: string;
+    image?: string;
+    referenceImages?: string[];
+    requestKind: RenderRequestKind;
+    previousInteractionId?: string;
+    meta?: Record<string, any>;
+    aspectRatio?: string;
+    imageSize?: '1K' | '2K' | '4K';
+};
+export type RenderRequestResult = {
+    imageUrl: string;
+    interactionId?: string;
+};
+export declare function renderRequest(payload: RenderRequestPayload): Promise<RenderRequestResult>;
+//# sourceMappingURL=render-api.d.ts.map

package/dist/render-api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-api.d.ts","sourceRoot":"","sources":["../src/render-api.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAKF,wBAAsB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CA2B/F"}

package/dist/render-api.js

@@ -0,0 +1,28 @@
+const DEFAULT_ASPECT_RATIO = '1:1';
+const DEFAULT_IMAGE_SIZE = '2K';
+export async function renderRequest(payload) {
+    const res = await fetch('/api/gemini/generate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            ...payload,
+            aspectRatio: payload.aspectRatio ?? DEFAULT_ASPECT_RATIO,
+            imageSize: payload.imageSize ?? DEFAULT_IMAGE_SIZE,
+        }),
+    });
+    const text = await res.text();
+    let json = null;
+    try {
+        json = text ? JSON.parse(text) : null;
+    }
+    catch {
+        // ignore
+    }
+    if (!res.ok || !json?.success) {
+        throw new Error(json?.error || `Gemini failed (HTTP ${res.status})`);
+    }
+    const imageUrl = json.enhanced_image || json.imageUrl || '';
+    if (!imageUrl)
+        throw new Error('Gemini response missing image');
+    return { imageUrl, interactionId: json.interactionId };
+}