@appaflytech/zeyrek-ai-mcp 0.0.49 → 0.0.51

package/dist/platform/storeArt/gallery.js

@@ -0,0 +1,331 @@
+import { randomBytes } from 'node:crypto';
+import { copyFile, rename, rm, writeFile } from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import express from 'express';
+import { MAX_IMAGES_PER_SLOT } from '../../knowledge/mobileStore.js';
+import { cardHtml, renderCards, storeCanvas } from './compose.js';
+import { EYEBROW_MAX, MAX_CARDS, SUBTITLE_MAX, TITLE_MAX, buildDeck, cardFileName, duplicateCard, parseCardSpec, saveDeck } from './deck.js';
+import { LAYOUT_IDS, STORE_ART_LAYOUTS } from './layouts.js';
+import { STORE_ART_STYLES, STYLE_IDS } from './styles.js';
+const editorDirectory = fileURLToPath(new URL('../../resources/store-art/', import.meta.url));
+const editorAssets = ['editor.css', 'editor.js'];
+/**
+ * Önizleme `srcdoc` iframe'i bu politikayı devralır: kare HTML'i satır içi `<style>` taşır, betik taşımaz.
+ * Betik yalnız `editor.js`'tir.
+ */
+const contentSecurityPolicy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'none'; base-uri 'none'; form-action 'none'";
+/**
+ * En büyük geçerli `render` gövdesi: 40 kart × en uzun metinler (UTF-8'de karakter başına en çok 4 bayt) + spec'in
+ * geri kalanı. Sabit 16 kb, en uzun Türkçe metinli 40 kartlık desteyi (24 kb) 413'le reddediyordu (taze inceleme).
+ */
+const bodyLimit = MAX_CARDS * ((EYEBROW_MAX + TITLE_MAX + SUBTITLE_MAX) * 4 + 512);
+const pendingName = (card) => `.pending-${cardFileName(card)}`;
+const escapeHtml = (value) => value.replace(/[&<>"']/g, character => `&#${character.charCodeAt(0)};`);
+const isObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const uniqueStrings = (value) => Array.isArray(value) && value.length > 0 && value.every(item => typeof item === 'string') && new Set(value).size === value.length;
+/** Diskteki `index.html`: sunucu kapandıktan sonra da açılır, salt görüntüdür */
+export function staticGalleryHtml(deck, uploadEnabled) {
+    const canvas = storeCanvas(deck.deviceClass);
+    const note = uploadEnabled
+        ? 'Bu sayfa dosyadan açıldı ve salt görüntüdür: düzenleme ve yükleme mobile_asset_preview yanıtındaki galleryUrl adresinden yapılır.'
+        : 'Yükleme kapalı: gateway AUTH_MODE=passthrough ile çalışıyor. Kareleri mobile_asset_create { path } ile yükleyin.';
+    const figures = deck.cards.map(card => [
+        `<figure><img src="${escapeHtml(cardFileName(card))}" width="${canvas.width}" height="${canvas.height}" alt="">`,
+        `<figcaption>Kare ${card.slide + 1} · ${escapeHtml(STORE_ART_STYLES[card.spec.style].label)}</figcaption></figure>`
+    ].join('')).join('');
+    return [
+        '<!doctype html><html lang="tr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">',
+        `<title>Mağaza görselleri · ${escapeHtml(deck.slot)}</title><style>`,
+        ':root{--bg:#f6f6f4;--text:#1b1b1b;--muted:#6b6b6b}@media (prefers-color-scheme:dark){:root{--bg:#141414;--text:#ececec;--muted:#9a9a9a}}',
+        'body{margin:0;padding:24px;background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}',
+        'h1{font-size:20px;margin:0 0 4px}.meta{color:var(--muted);font-size:13px;margin:0 0 20px}',
+        'main{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}figure{margin:0}img{display:block;width:100%;height:auto;border-radius:12px}',
+        'figcaption{font-size:13px;color:var(--muted);padding-top:6px}',
+        '</style></head><body>',
+        `<h1>Mağaza görselleri</h1><p class="meta">Yuva <code>${escapeHtml(deck.slot)}</code> · ${deck.cards.length} kart · ${canvas.width}×${canvas.height}<br>${note}</p>`,
+        `<main>${figures}</main></body></html>`
+    ].join('\n');
+}
+export class GalleryServer {
+    galleries = new Map();
+    origin;
+    server;
+    async open(key, gallery) {
+        this.galleries.set(key, { ...gallery, uploaded: new Map(), queue: Promise.resolve() });
+        this.origin ??= this.listen().catch(error => {
+            this.origin = undefined;
+            throw error;
+        });
+        return `${await this.origin}/g/${key}/`;
+    }
+    async close() {
+        const server = this.server;
+        this.server = undefined;
+        this.origin = undefined;
+        await new Promise(resolve => server ? server.close(() => resolve()) : resolve());
+    }
+    listen() {
+        const app = express();
+        let origin = '';
+        app.disable('x-powered-by');
+        app.use((request, response, next) => {
+            if (request.headers.host !== new URL(origin).host) {
+                response.status(421).json({ error: `Bu sunucu yalnız ${origin} adresinden açılır.` });
+                return;
+            }
+            response.set({ 'Cache-Control': 'no-store', 'Content-Security-Policy': contentSecurityPolicy, 'X-Content-Type-Options': 'nosniff' });
+            next();
+        });
+        app.post('/g/:key/:action', express.json({ limit: bodyLimit }), (request, response) => {
+            void this.post(request.params.key, request.params.action, request, origin)
+                .catch((error) => ({ status: 500, body: { error: error instanceof Error ? error.message : String(error) } }))
+                .then(reply => 'html' in reply ? response.status(reply.status).type('html').send(reply.html) : response.status(reply.status).json(reply.body));
+        });
+        app.get('/g/:key/:file?', (request, response) => {
+            const gallery = this.galleries.get(request.params.key);
+            if (!gallery) {
+                response.status(404).type('text').send('Galeri yok: gateway yeniden başlamış olabilir. mobile_asset_preview yeniden çağrılır.');
+                return;
+            }
+            const file = request.params.file;
+            if (file === undefined) {
+                if (request.path.endsWith('/'))
+                    response.sendFile(path.join(editorDirectory, 'editor.html'));
+                else
+                    response.redirect(`/g/${request.params.key}/`);
+                return;
+            }
+            if (file === 'deck') {
+                response.json(deckView(gallery));
+                return;
+            }
+            if (editorAssets.includes(file)) {
+                response.sendFile(path.join(editorDirectory, file));
+                return;
+            }
+            // Yalnız bu destenin kart ve ham kare dosyaları sunulur; ad listeden seçildiği için yol geçişi olamaz.
+            if (!gallery.deck.cards.some(card => cardFileName(card) === file) && !gallery.deck.raws.some(raw => raw.name === file)) {
+                response.status(404).type('text').send('Dosya yok.');
+                return;
+            }
+            response.sendFile(path.join(gallery.directory, file));
+        });
+        // Bozuk JSON gövdesi Express'in HTML hata sayfasına düşüyordu; editör JSON hata bekler. Durum kodu hatanın
+        // kendisinden gelir (body-parser 400/413, sendFile 404).
+        app.use((error, _request, response, _next) => {
+            const status = error.status;
+            response.status(typeof status === 'number' ? status : 500).json({ error: error instanceof Error ? error.message : String(error) });
+        });
+        return new Promise((resolve, reject) => {
+            const server = app.listen(0, '127.0.0.1');
+            server.once('error', reject);
+            server.once('listening', () => {
+                // stdio sürecini bu sunucu ayakta tutmaz: istemci kapanınca gateway de kapanır.
+                server.unref();
+                origin = `http://127.0.0.1:${server.address().port}`;
+                this.server = server;
+                resolve(origin);
+            });
+        });
+    }
+    async post(key, action, request, origin) {
+        const gallery = this.galleries.get(key);
+        if (!gallery)
+            return { status: 404, body: { error: 'Galeri yok: gateway yeniden başlamış olabilir.' } };
+        if (request.headers.origin !== origin)
+            return { status: 403, body: { error: 'İstek yalnız galeri sayfasının kendisinden yapılır.' } };
+        if (!request.is('application/json'))
+            return { status: 415, body: { error: 'Gövde application/json olmalı.' } };
+        const body = isObject(request.body) ? request.body : {};
+        if (action === 'preview')
+            return preview(gallery, key, body);
+        if (action === 'render')
+            return render(gallery, body);
+        if (action === 'order')
+            return order(gallery, body);
+        if (action === 'duplicate')
+            return duplicate(gallery, body);
+        if (action === 'upload')
+            return upload(gallery, body);
+        return { status: 404, body: { error: `Bilinmeyen işlem '${action}'.` } };
+    }
+}
+/**
+ * Galeriye yazan işler (çizim, sıra, kopya, yükleme) sırayla koşar: aynı anda iki çizim üç profil yuvasını
+ * tüketir, yükleme yarım yazılmış bir JPEG'i okuyabilirdi.
+ */
+function queued(gallery, task) {
+    const next = gallery.queue.then(task, task);
+    gallery.queue = next.catch(() => undefined);
+    return next;
+}
+const cardView = (gallery, card) => ({ ...card, uploadedVersion: gallery.uploaded.get(card.name) });
+function deckView(gallery) {
+    const { deck } = gallery;
+    return {
+        slot: deck.slot,
+        deviceClass: deck.deviceClass,
+        locale: deck.locale,
+        canvas: storeCanvas(deck.deviceClass),
+        maxPerSlot: MAX_IMAGES_PER_SLOT,
+        limits: { title: TITLE_MAX, subtitle: SUBTITLE_MAX, eyebrow: EYEBROW_MAX, cards: MAX_CARDS },
+        styles: STYLE_IDS.map(id => ({ id, label: STORE_ART_STYLES[id].label, colors: STORE_ART_STYLES[id].colors })),
+        layouts: LAYOUT_IDS.map(id => ({ id, needsScreen: STORE_ART_LAYOUTS[id].needsScreen })),
+        raws: deck.raws.map(({ name, width, height }) => ({ name, width, height })),
+        cards: deck.cards.map(card => cardView(gallery, card))
+    };
+}
+/** Önizleme son JPEG'i çizen HTML'in kendisidir; ham kare galeri adresinden okunur. Hiçbir şey yazmaz. */
+function preview(gallery, key, body) {
+    const parsed = parseCardSpec(gallery.deck, body.spec);
+    if ('error' in parsed)
+        return { status: 400, body: { error: parsed.error } };
+    return { status: 200, html: cardHtml(gallery.deck, parsed.spec, raw => `/g/${key}/${raw.name}`) };
+}
+async function render(gallery, body) {
+    const items = body.cards;
+    if (!Array.isArray(items) || items.length === 0 || items.length > MAX_CARDS) {
+        return { status: 400, body: { error: `cards 1–${MAX_CARDS} öğeli { name, spec } dizisi olmalı.` } };
+    }
+    const targets = [];
+    for (const [index, item] of items.entries()) {
+        // Kartlar desteden hiç çıkmaz (yalnız eklenir); burada bulunan kart kuyrukta da geçerlidir.
+        const card = isObject(item) ? gallery.deck.cards.find(candidate => candidate.name === item.name) : undefined;
+        if (!card || targets.some(target => target.card === card))
+            return { status: 400, body: { error: `cards[${index}].name destede yok ya da tekrar ediyor.` } };
+        const version = item.version;
+        if (version !== undefined && !Number.isInteger(version))
+            return { status: 400, body: { error: `cards[${index}].version tam sayı olmalı.` } };
+        const parsed = parseCardSpec(gallery.deck, item.spec);
+        if ('error' in parsed)
+            return { status: 400, body: { error: `cards[${index}] (${card.name}) — ${parsed.error}` } };
+        targets.push({ card, spec: parsed.spec, ...(version === undefined ? {} : { version: version }) });
+    }
+    return queued(gallery, async () => {
+        // İki sekme aynı kartı düzenliyorsa eski sürümden gelen çizim yenisini sessizce ezmez.
+        const stale = targets.find(target => target.version !== undefined && target.version !== target.card.version);
+        if (stale)
+            return { status: 409, body: { error: `${stale.card.name} başka bir sekmede yeniden çizildi (sürüm ${stale.card.version}); sayfayı yenileyip yeniden deneyin.` } };
+        // Çizim geçici dosyalara yapılır; spec, sürüm ve dosya ancak bütün kartlar çizilince birlikte değişir. Önceden
+        // yarıda düşen çizim ilk kartın JPEG'ini ezip sürümü geri alıyordu ve yükleme yeni dosyayı eski sürümle gönderirdi.
+        const drafts = targets.map(target => ({ ...target.card, spec: target.spec }));
+        try {
+            await gallery.render(drafts, pendingName);
+        }
+        catch (error) {
+            await Promise.all(drafts.map(card => rm(path.join(gallery.directory, pendingName(card)), { force: true })));
+            throw error;
+        }
+        for (const target of targets) {
+            await rename(path.join(gallery.directory, pendingName(target.card)), path.join(gallery.directory, cardFileName(target.card)));
+            target.card.spec = target.spec;
+            target.card.version += 1;
+        }
+        await persist(gallery);
+        return { status: 200, body: { cards: targets.map(target => cardView(gallery, target.card)) } };
+    });
+}
+/** Sıra yükleme sırasıdır; gövde destenin BÜTÜN kart adlarını yeni sırayla taşır */
+async function order(gallery, body) {
+    const names = body.cards;
+    if (!uniqueStrings(names))
+        return { status: 400, body: { error: 'cards tekrarsız kart adlarından oluşan boş olmayan bir dizi olmalı.' } };
+    // Deste kuyrukta denetlenir: önünde bekleyen bir kopya desteyi büyütmüş olabilir. Dışarıda denetlenen eski sıra
+    // kopyayı desteden düşürüyordu (taze inceleme 2026-10-26).
+    return queued(gallery, async () => {
+        const byName = new Map(gallery.deck.cards.map(card => [card.name, card]));
+        if (names.some(name => !byName.has(name)))
+            return { status: 400, body: { error: 'cards destede olmayan bir ad taşıyor.' } };
+        if (names.length !== byName.size)
+            return { status: 409, body: { error: `Deste bu arada değişti ya da liste eksik: destede ${byName.size} kart var, sıra ${names.length} ad taşıyor. Desteyi yeniden okuyup gönderin.` } };
+        gallery.deck.cards = names.map(name => byName.get(name));
+        await persist(gallery);
+        return { status: 200, body: { cards: names } };
+    });
+}
+/** Kopya aynı spec ve aynı JPEG'le başlar (dosya kopyalanır, yeniden çizilmez); asılın hemen arkasına girer */
+async function duplicate(gallery, body) {
+    // Sınır kuyrukta denetlenir: eşzamanlı iki kopya dışarıda aynı sayımı görüp 41. kartı açıyordu.
+    return queued(gallery, async () => {
+        const original = gallery.deck.cards.find(card => card.name === body.card);
+        if (!original)
+            return { status: 400, body: { error: 'card destede yok.' } };
+        if (gallery.deck.cards.length >= MAX_CARDS)
+            return { status: 400, body: { error: `Deste en çok ${MAX_CARDS} kart alır.` } };
+        const copy = duplicateCard(gallery.deck, original);
+        await copyFile(path.join(gallery.directory, cardFileName(original)), path.join(gallery.directory, cardFileName(copy)));
+        gallery.deck.cards.splice(gallery.deck.cards.indexOf(original) + 1, 0, copy);
+        await persist(gallery);
+        return { status: 200, body: { card: cardView(gallery, copy) } };
+    });
+}
+async function upload(gallery, body) {
+    const names = body.files;
+    const byFile = new Map(gallery.deck.cards.map(card => [cardFileName(card), card]));
+    if (!uniqueStrings(names) || names.some(name => !byFile.has(name))) {
+        return { status: 400, body: { error: 'files bu destenin dosya adlarından (ör. clean-01.jpg) oluşan, tekrarsız ve boş olmayan bir dizi olmalı.' } };
+    }
+    return queued(gallery, async () => {
+        // Mağazadaki sıra yükleme sırasıdır: seçim sırası değil, deste sırası — kuyrukta okunur, önündeki sıra değişikliği geçerlidir.
+        const chosen = gallery.deck.cards.filter(card => names.includes(cardFileName(card)));
+        const results = [];
+        for (const card of chosen) {
+            const file = cardFileName(card);
+            const version = card.version;
+            // Aynı sürümü ikinci kez yüklemek yuvaya kopya ekler; sayfa yenilense de sunucu hatırlar. Kart yeniden
+            // çizilince yeni sürüm yüklenebilir (öncekisi yuvada kalır).
+            if (gallery.uploaded.get(card.name) === version) {
+                results.push({ file, ok: false, error: 'Bu kare bu galeriden zaten yüklendi.' });
+                continue;
+            }
+            const before = gallery.uploaded.get(card.name);
+            gallery.uploaded.set(card.name, version);
+            try {
+                const asset = await gallery.upload(path.join(gallery.directory, file));
+                results.push({ file, ok: true, ...(typeof asset.id === 'string' ? { assetId: asset.id } : {}) });
+            }
+            catch (error) {
+                if (before === undefined)
+                    gallery.uploaded.delete(card.name);
+                else
+                    gallery.uploaded.set(card.name, before);
+                results.push({ file, ok: false, error: error instanceof Error ? error.message : String(error) });
+            }
+        }
+        return { status: 200, body: { results } };
+    });
+}
+/** Deste değişince `deck.json` ile salt görüntü `index.html` birlikte yazılır (galeri yalnız AUTH_MODE=local'da açılır) */
+async function persist(gallery) {
+    await saveDeck(gallery.directory, gallery.deck);
+    await writeFile(path.join(gallery.directory, 'index.html'), staticGalleryHtml(gallery.deck, true));
+}
+export const sharedGalleryServer = new GalleryServer();
+/**
+ * Desteyi kurar, kartları çizer, `deck.json` ve salt görüntü `index.html`'i diske yazar ve (AUTH_MODE=local'da)
+ * editörü açar. Dizin `MCP_STATE_DIR` altındadır (yoksa işletim sisteminin geçici dizini); `sendFile` mutlak yol
+ * istediği için çözülür — kök `.env`'deki `MCP_STATE_DIR` göreli bir yoldur.
+ */
+export async function previewStoreArt(launch, config, gallery, input, upload) {
+    const key = randomBytes(16).toString('hex');
+    const directory = path.resolve(config.stateDirectory ?? path.join(os.tmpdir(), 'zeyrek-mcp'), 'store-art', key);
+    const { deck, warnings } = await buildDeck(input, directory);
+    const renderDeck = (cards, fileName) => renderCards(launch, deck, directory, cards, fileName);
+    const files = await renderDeck(deck.cards);
+    // passthrough'ta platform kimliği MCP isteğinden gelir; tarayıcıdan gelen yükleme isteğinin kimliği yoktur.
+    const uploadEnabled = config.authMode === 'local';
+    await saveDeck(directory, deck);
+    await writeFile(path.join(directory, 'index.html'), staticGalleryHtml(deck, uploadEnabled));
+    const galleryUrl = uploadEnabled ? await gallery.open(key, { directory, deck, upload, render: renderDeck }) : undefined;
+    return {
+        slot: deck.slot,
+        ...(galleryUrl
+            ? { galleryUrl, galleryNote: 'Adresi kullanıcıya verin: sayfa bir editördür — başlığı, stili ve yerleşimi orada değiştirip kartı yeniden çizer, seçtiklerini yükler. Kartların son hâli directory/deck.json\'dadır. Galeri gateway süreci yaşadıkça açıktır.' }
+            : { galleryNote: `AUTH_MODE=passthrough: galeri sunucusu açılmaz. Sayfa salt görüntü olarak ${path.join(directory, 'index.html')}'dedir; yükleme mobile_asset_create { path } ile.` }),
+        directory,
+        files,
+        ...(warnings.length > 0 ? { warnings } : {})
+    };
+}

package/dist/platform/storeArt/layouts.js

@@ -0,0 +1,121 @@
+import { SCREENSHOT_CAPTURE_DEVICES, STORE_FRAME_LAYOUTS } from '../../knowledge/mobileStore.js';
+/**
+ * Pazarlama karesinin yerleşim kaydı (ADR 0005): her satır tuvaldeki kutuları (başlık, cihaz, ekran, çentik) ve
+ * cihaza uygulanan CSS dönüşümünü hesaplayan saf bir fonksiyondur. Çizim (`slideHtml`) yerleşime göre dallanmaz;
+ * yeni yerleşim bu tabloya bir satırdır. Ölçüler tuvalin pikselidir; tuval mağaza ölçüsüdür.
+ */
+export const LAYOUT_IDS = ['classic', 'bleed', 'tilt', 'text'];
+const edgeShare = 0.04;
+const captionShare = 0.22;
+const gapShare = 0.02;
+const captionInsetShare = 0.08;
+const unframedRadiusShare = 0.06;
+const bleedWidthShare = 0.86;
+const tiltWidthFactor = 0.86;
+export function storeCanvas(deviceClass) {
+    const device = SCREENSHOT_CAPTURE_DEVICES[deviceClass];
+    return { width: device.width * device.scale, height: device.height * device.scale };
+}
+const heightPerWidth = (deviceClass, frame) => {
+    const capture = SCREENSHOT_CAPTURE_DEVICES[deviceClass];
+    const bezel = frame ? STORE_FRAME_LAYOUTS[deviceClass].bezel : 0;
+    return (1 - 2 * bezel) * (capture.height / capture.width) + 2 * bezel;
+};
+/** Dynamic Island ve kamera deliğinin ekran genişliğine oranı (iPhone 16 Pro Max 126×37 pt / 440 pt) */
+function cutoutBox(cutout, screen) {
+    const width = Math.round(screen.width * (cutout === 'island' ? 0.29 : 0.035));
+    const height = Math.round(screen.width * (cutout === 'island' ? 0.085 : 0.035));
+    return { x: screen.x + Math.round((screen.width - width) / 2), y: screen.y + Math.round(screen.width * 0.026), width, height, radius: Math.round(height / 2) };
+}
+/** Sol üst köşesi ve genişliği verilen cihazın kutuları; ekranın en-boy oranı ham karenin oranıdır */
+function phoneBoxes(deviceClass, frame, x, y, width) {
+    const layout = STORE_FRAME_LAYOUTS[deviceClass];
+    const height = Math.round(width * heightPerWidth(deviceClass, frame));
+    const bezelPx = Math.round(width * (frame ? layout.bezel : 0));
+    const deviceRadius = Math.round(width * layout.radius);
+    const screen = {
+        x: x + bezelPx,
+        y: y + bezelPx,
+        width: width - 2 * bezelPx,
+        height: height - 2 * bezelPx,
+        radius: frame ? Math.max(deviceRadius - bezelPx, 0) : Math.round(width * unframedRadiusShare)
+    };
+    return {
+        ...(frame ? { device: { x, y, width, height, radius: deviceRadius } } : {}),
+        screen,
+        ...(frame && layout.cutout !== 'none' ? { cutout: cutoutBox(layout.cutout, screen) } : {})
+    };
+}
+function bands(canvas) {
+    const edge = Math.round(canvas.height * edgeShare);
+    const gap = Math.round(canvas.height * gapShare);
+    const captionHeight = Math.round(canvas.height * captionShare);
+    const inset = Math.round(canvas.width * captionInsetShare);
+    // iPad'de (geniş tuval) üst etiket + iki satır başlık + iki satır alt başlık başlık alanını taşırıyordu: 0.21.
+    const titleSize = Math.round(Math.min(canvas.width * 0.072, captionHeight * 0.21));
+    return { edge, gap, captionHeight, inset, titleSize };
+}
+const captionSizes = (titleSize) => ({ titleSize, subtitleSize: Math.round(titleSize * 0.5), eyebrowSize: Math.round(titleSize * 0.36) });
+/**
+ * Cihaz başlık alanının dışında kalan bölgeye SIĞAR: genişlik çerçeve tablosundaki üst sınırla bölge yüksekliğinin
+ * küçüğüdür (`widthFactor` ile küçültülebilir).
+ */
+function centred({ deviceClass, frame, captionPosition }, widthFactor) {
+    const canvas = storeCanvas(deviceClass);
+    const { edge, gap, captionHeight, inset, titleSize } = bands(canvas);
+    const space = canvas.height - 2 * edge - captionHeight - gap;
+    const width = Math.round(Math.min(canvas.width * STORE_FRAME_LAYOUTS[deviceClass].deviceWidth, space / heightPerWidth(deviceClass, frame)) * widthFactor);
+    const height = Math.round(width * heightPerWidth(deviceClass, frame));
+    const regionTop = captionPosition === 'top' ? edge + captionHeight + gap : edge;
+    return {
+        canvas,
+        caption: { x: inset, y: captionPosition === 'top' ? edge : canvas.height - edge - captionHeight, width: canvas.width - 2 * inset, height: captionHeight },
+        ...phoneBoxes(deviceClass, frame, Math.round((canvas.width - width) / 2), regionTop + Math.round((space - height) / 2), width),
+        ...captionSizes(titleSize),
+        titleLines: 2
+    };
+}
+export const STORE_ART_LAYOUTS = {
+    classic: { needsScreen: true, geometry: context => centred(context, 1) },
+    /** Büyük cihaz başlığın altından başlar ve alt kenardan taşar; başlık her zaman üsttedir */
+    bleed: {
+        needsScreen: true,
+        geometry: ({ deviceClass, frame }) => {
+            const canvas = storeCanvas(deviceClass);
+            const { edge, gap, captionHeight, inset, titleSize } = bands(canvas);
+            const width = Math.round(canvas.width * Math.max(STORE_FRAME_LAYOUTS[deviceClass].deviceWidth, bleedWidthShare));
+            return {
+                canvas,
+                caption: { x: inset, y: edge, width: canvas.width - 2 * inset, height: captionHeight },
+                ...phoneBoxes(deviceClass, frame, Math.round((canvas.width - width) / 2), edge + captionHeight + gap, width),
+                ...captionSizes(titleSize),
+                titleLines: 2
+            };
+        }
+    },
+    /** `classic`'in biraz küçüğü, perspektifle sola dönük; dönüşüm kutuyu bölgesinin dışına taşırmasın diye küçülür */
+    tilt: {
+        needsScreen: true,
+        geometry: context => ({
+            ...centred(context, tiltWidthFactor),
+            phoneTransform: `perspective(${storeCanvas(context.deviceClass).width * 3}px) rotateY(-16deg) rotateX(5deg) rotateZ(-3deg)`
+        })
+    },
+    /** Cihazsız kare: üst etiket, büyük başlık, alt başlık tuvalin ortasında; ham kare istemez */
+    text: {
+        needsScreen: false,
+        geometry: ({ deviceClass }) => {
+            const canvas = storeCanvas(deviceClass);
+            const { inset } = bands(canvas);
+            const titleSize = Math.round(Math.min(canvas.width * 0.12, canvas.height * 0.06));
+            return {
+                canvas,
+                caption: { x: inset, y: Math.round(canvas.height * 0.18), width: canvas.width - 2 * inset, height: Math.round(canvas.height * 0.64) },
+                titleSize,
+                subtitleSize: Math.round(titleSize * 0.42),
+                eyebrowSize: Math.round(titleSize * 0.3),
+                titleLines: 5
+            };
+        }
+    }
+};

package/dist/platform/storeArt/styles.js

@@ -0,0 +1,54 @@
+/**
+ * Pazarlama karesinin stil kaydı (ADR 0005): her satır renk, arka plan, yazı ve sahne verisidir. Çizim
+ * (`slideHtml`) stile göre dallanmaz; arka plan türü `BACKDROPS`'tan, yazı ailesi `FONT_STACKS`'ten okunur.
+ * Yazı tipleri yalnız işletim sisteminindir (paket yazı tipi yok); aynı stil macOS'ta ve Linux'ta farklı
+ * yazı tipiyle çizilebilir.
+ */
+export const STYLE_IDS = ['clean', 'midnight', 'aurora', 'spotlight', 'swiss', 'japandi', 'pastel', 'neon'];
+export const BACKDROP_KINDS = ['solid', 'gradient', 'aurora', 'spotlight', 'grid', 'dots'];
+export const FONT_STACKS = {
+    sans: '-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
+    serif: 'ui-serif,"New York","Iowan Old Style",Georgia,"Times New Roman",serif',
+    rounded: 'ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",Nunito,-apple-system,sans-serif'
+};
+/** Arka plan türü → CSS `background` değeri. Renkler `#RRGGBB`'dir; sona eklenen iki hane alfadır (`#RRGGBBAA`). */
+export const BACKDROPS = {
+    solid: colors => colors.base,
+    gradient: colors => `linear-gradient(180deg, ${colors.base}, ${colors.second})`,
+    aurora: colors => [
+        `radial-gradient(60% 38% at 18% 12%, ${colors.accent}aa 0%, transparent 70%)`,
+        `radial-gradient(55% 35% at 88% 38%, ${colors.second}cc 0%, transparent 70%)`,
+        `radial-gradient(75% 45% at 45% 100%, ${colors.accent}77 0%, transparent 70%)`,
+        colors.base
+    ].join(', '),
+    spotlight: colors => `radial-gradient(60% 38% at 50% 58%, ${colors.second} 0%, ${colors.base} 78%)`,
+    grid: (colors, canvas) => {
+        const step = Math.round(canvas.width / 12);
+        const line = Math.max(Math.round(canvas.width / 600), 2);
+        return [
+            `repeating-linear-gradient(0deg, ${colors.second} 0 ${line}px, transparent ${line}px ${step}px)`,
+            `repeating-linear-gradient(90deg, ${colors.second} 0 ${line}px, transparent ${line}px ${step}px)`,
+            colors.base
+        ].join(', ');
+    },
+    dots: (colors, canvas) => {
+        const step = Math.round(canvas.width / 24);
+        const dot = Math.max(Math.round(canvas.width / 440), 2);
+        return `radial-gradient(circle, ${colors.second} ${dot}px, transparent ${dot + 1}px) 0 0 / ${step}px ${step}px, ${colors.base}`;
+    }
+};
+export const STORE_ART_STYLES = {
+    clean: { label: 'Clean', backdrop: 'solid', colors: { base: '#F5F5F2', second: '#E6E6E1', accent: '#1F6FEB', text: '#111111' }, font: 'sans', titleWeight: 800, titleCase: 'none', align: 'center', shadow: 0.25, glow: false, frameColor: '#1A1A1C' },
+    midnight: { label: 'Midnight', backdrop: 'gradient', colors: { base: '#0B1026', second: '#1F2A5E', accent: '#7C9CFF', text: '#FFFFFF' }, font: 'sans', titleWeight: 800, titleCase: 'none', align: 'center', shadow: 0.5, glow: true, frameColor: '#0B0B0D' },
+    aurora: { label: 'Aurora', backdrop: 'aurora', colors: { base: '#0E0B1F', second: '#2E8B9A', accent: '#B45CFF', text: '#FFFFFF' }, font: 'sans', titleWeight: 800, titleCase: 'none', align: 'center', shadow: 0.45, glow: true, frameColor: '#0B0B0D' },
+    spotlight: { label: 'Spotlight', backdrop: 'spotlight', colors: { base: '#08080A', second: '#34343F', accent: '#FFC857', text: '#FFFFFF' }, font: 'sans', titleWeight: 700, titleCase: 'none', align: 'center', shadow: 0.6, glow: false, frameColor: '#141416' },
+    swiss: { label: 'Swiss', backdrop: 'grid', colors: { base: '#F2F0EA', second: '#DCD8CD', accent: '#E4002B', text: '#111111' }, font: 'sans', titleWeight: 900, titleCase: 'uppercase', align: 'left', shadow: 0.2, glow: false, frameColor: '#111111' },
+    japandi: { label: 'Japandi', backdrop: 'solid', colors: { base: '#EFEAE1', second: '#E2DBCF', accent: '#8A7A63', text: '#2B2A27' }, font: 'serif', titleWeight: 400, titleCase: 'none', align: 'center', shadow: 0.15, glow: false, frameColor: '#2B2A27' },
+    pastel: { label: 'Pastel', backdrop: 'gradient', colors: { base: '#FFD9E8', second: '#D6E4FF', accent: '#7A5CFA', text: '#2A2440' }, font: 'rounded', titleWeight: 800, titleCase: 'none', align: 'center', shadow: 0.2, glow: false, frameColor: '#2A2440' },
+    neon: { label: 'Neon', backdrop: 'dots', colors: { base: '#050505', second: '#262626', accent: '#39FF88', text: '#FFFFFF' }, font: 'sans', titleWeight: 900, titleCase: 'uppercase', align: 'center', shadow: 0.5, glow: true, frameColor: '#111111' }
+};
+/** `palette.primary` stilin vurgu rengini, `palette.text` başlık rengini uygulamanınkine çeker (tema `theme_get`) */
+export function resolveStyle(id, palette = {}) {
+    const style = STORE_ART_STYLES[id];
+    return { ...style, colors: { ...style.colors, ...(palette.primary ? { accent: palette.primary } : {}), ...(palette.text ? { text: palette.text } : {}) } };
+}