@appaflytech/zeyrek-ai-mcp 0.0.49 → 0.0.50

package/dist/resources/store-art/editor.js

@@ -0,0 +1,990 @@
+/*
+ * Mağaza görseli editörü (zeyrek-mcp ADR 0004 §Ek). Sunucu galeri uçlarını sunar: deck · preview · render · order ·
+ * duplicate · upload. Önizleme sunucunun ürettiği, son JPEG'i çizen HTML'in kendisidir; bu dosya ikinci bir çizici
+ * taşımaz. Çizilmemiş değişiklikler (taslak) tarayıcıda tutulur ve sayfa yenilense de localStorage'dan döner.
+ */
+(() => {
+  'use strict'
+
+  const FIELDS = ['raw', 'eyebrow', 'title', 'subtitle', 'style', 'layout', 'captionPosition', 'accent', 'text', 'frame']
+  const TEXT_FIELDS = [['eyebrow', 'Üst etiket'], ['title', 'Başlık'], ['subtitle', 'Alt başlık']]
+  const LAYOUT_LABELS = { classic: 'Klasik', bleed: 'Taşan', tilt: 'Eğik', text: 'Metin' }
+  const CAPTION_FIXED = new Set(['bleed', 'text'])
+  const DICE_ACCENTS = ['#FF5A5F', '#00C2A8', '#7C5CFF', '#FFB020', '#2F80ED', '#FF7A00', '#E4007C', '#1F7A5C', '#00A3FF', '#C6F432']
+  const LAYOUT_ICONS = {
+    classic: '<rect x="7" y="4" width="18" height="3" rx="1.5"/><rect x="10" y="12" width="12" height="27" rx="3"/>',
+    bleed: '<rect x="7" y="4" width="18" height="3" rx="1.5"/><path d="M6 44V15a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v29z"/>',
+    tilt: '<rect x="7" y="4" width="18" height="3" rx="1.5"/><rect x="10" y="12" width="12" height="27" rx="3" transform="rotate(-12 16 25)"/>',
+    text: '<rect x="11" y="15" width="10" height="2" rx="1"/><rect x="5" y="20" width="22" height="4" rx="2"/><rect x="7" y="26" width="18" height="4" rx="2"/><rect x="9" y="33" width="14" height="2" rx="1"/>'
+  }
+
+  const $ = (selector, root = document) => root.querySelector(selector)
+  const $$ = (selector, root = document) => Array.from(root.querySelectorAll(selector))
+  const ui = {
+    meta: $('#meta'),
+    cards: $('#cards'),
+    preview: $('#preview'),
+    previewBox: $('#previewBox'),
+    problem: $('#problem'),
+    panel: $('#panel'),
+    cardTitle: $('#cardTitle'),
+    dirtyBadge: $('#dirtyBadge'),
+    styles: $('#styles'),
+    layouts: $('#layouts'),
+    caption: $('#caption'),
+    raws: $('#raws'),
+    upload: $('#upload'),
+    renderAll: $('#renderAll'),
+    render: $('#render'),
+    toast: $('#toast'),
+    undo: $('#undo'),
+    redo: $('#redo')
+  }
+
+  const state = {
+    deck: null,
+    current: null,
+    drafts: new Map(),
+    selected: new Set(),
+    overflow: new Map(),
+    history: [],
+    future: [],
+    busy: false,
+    inline: false,
+    previewSeq: 0
+  }
+
+  const draftKey = 'store-art-drafts:' + location.pathname
+
+  /* ---------- yardımcılar ---------- */
+
+  const element = (tag, attributes = {}, children = []) => {
+    const node = document.createElement(tag)
+
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value === undefined || value === null || value === false) continue
+      if (key === 'text') node.textContent = value
+      else if (key === 'html') node.innerHTML = value
+      else node.setAttribute(key, value === true ? '' : value)
+    }
+
+    node.append(...children)
+
+    return node
+  }
+
+  const normalize = spec => Object.fromEntries(FIELDS.filter(key => spec[key] !== undefined && spec[key] !== null && spec[key] !== '').map(key => [key, spec[key]]))
+  const same = (left, right) => JSON.stringify(normalize(left)) === JSON.stringify(normalize(right))
+  const cardOf = name => state.deck.cards.find(card => card.name === name)
+  const specOf = name => state.drafts.get(name) || cardOf(name).spec
+  const isDirty = name => state.drafts.has(name) && !same(state.drafts.get(name), cardOf(name).spec)
+  const styleOf = id => state.deck.styles.find(style => style.id === id)
+  const layoutOf = id => state.deck.layouts.find(layout => layout.id === id)
+  const pick = list => list[Math.floor(Math.random() * list.length)]
+  const isTyping = target => target instanceof HTMLElement && (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName))
+
+  async function api(action, body) {
+    const response = await fetch(action, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) })
+    const json = (response.headers.get('content-type') || '').includes('json')
+    const payload = json ? await response.json() : await response.text()
+
+    if (!response.ok) throw new Error((payload && payload.error) || 'HTTP ' + response.status)
+
+    return payload
+  }
+
+  let toastTimer
+  function toast(message, kind = 'info') {
+    ui.toast.textContent = message
+    ui.toast.className = 'toast show ' + kind
+    clearTimeout(toastTimer)
+    toastTimer = setTimeout(() => { ui.toast.className = 'toast' }, kind === 'err' ? 5200 : 3200)
+  }
+
+  /**
+   * Taslak dayandığı kart sürümüyle saklanır: başka sekmede yeniden çizilmiş kartın eski taslağı geri yüklenmez.
+   * Sekmeler aynı anahtarı paylaşır; en son yazan kazanır, ama sürümü tutmayan taslak açılışta atılır.
+   */
+  function saveDrafts() {
+    try {
+      localStorage.setItem(draftKey, JSON.stringify([...state.drafts].map(([name, spec]) => [name, { spec, base: cardOf(name).version }])))
+    } catch (error) {
+      // Gizli pencere ya da kapalı depolama: taslak yalnız bu sekmede yaşar.
+    }
+  }
+
+  function restoreDrafts() {
+    try {
+      const stored = JSON.parse(localStorage.getItem(draftKey) || '[]')
+
+      for (const [name, entry] of stored) {
+        const card = cardOf(name)
+
+        if (card && entry && entry.base === card.version && !same(entry.spec, card.spec)) state.drafts.set(name, entry.spec)
+      }
+    } catch (error) {
+      // Okunamayan taslak yok sayılır.
+    }
+  }
+
+  /* ---------- değişiklik, geçmiş ---------- */
+
+  function apply(name, spec, { preview = true } = {}) {
+    if (same(spec, cardOf(name).spec)) state.drafts.delete(name)
+    else state.drafts.set(name, normalize(spec))
+
+    saveDrafts()
+    paintCard(name)
+    scheduleScan(name)
+
+    if (name === state.current) {
+      syncPanel()
+      if (preview) schedulePreview()
+    }
+
+    refreshActions()
+  }
+
+  function record(changes, group) {
+    const last = state.history[state.history.length - 1]
+
+    if (group && last && last.group === group && Date.now() - last.at < 1500 && last.changes.length === 1 && changes.length === 1 && last.changes[0].name === changes[0].name) {
+      last.changes[0].after = changes[0].after
+      last.at = Date.now()
+    } else {
+      state.history.push({ group, at: Date.now(), changes })
+      if (state.history.length > 50) state.history.shift()
+    }
+
+    state.future = []
+    refreshActions()
+  }
+
+  function change(name, patch, { group = null, preview = true } = {}) {
+    const before = specOf(name)
+    const after = normalize({ ...before, ...patch })
+
+    if (same(before, after)) return
+
+    record([{ name, before, after }], group)
+    apply(name, after, { preview })
+  }
+
+  function undo() {
+    const entry = state.history.pop()
+
+    if (!entry) return toast('Geri alınacak bir şey yok')
+
+    state.future.push(entry)
+    for (const item of entry.changes) apply(item.name, item.before)
+    toast(entry.changes.length > 1 ? 'Seri geri alındı' : 'Geri alındı')
+  }
+
+  function redo() {
+    const entry = state.future.pop()
+
+    if (!entry) return toast('Yinelenecek bir şey yok')
+
+    state.history.push(entry)
+    for (const item of entry.changes) apply(item.name, item.after)
+    toast('Yinelendi')
+  }
+
+  /* ---------- kartlar ---------- */
+
+  const thumbUrl = card => encodeURIComponent(card.name) + '.jpg?v=' + card.version
+
+  function cardNode(card) {
+    const box = element('input', { type: 'checkbox', class: 'pick', 'aria-label': 'Yüklemek için seç' })
+    const node = element('article', { class: 'card', draggable: 'true', 'data-name': card.name, tabindex: '0' }, [
+      element('div', { class: 'thumb' }, [element('img', { alt: '', loading: 'lazy' }), element('span', { class: 'changed', text: 'değişti' })]),
+      element('div', { class: 'card-row' }, [box, element('span', { class: 'card-name' })]),
+      element('div', { class: 'badges' })
+    ])
+
+    node.addEventListener('click', event => {
+      if (event.target !== box) select(card.name)
+    })
+    box.addEventListener('change', () => {
+      if (box.checked) state.selected.add(card.name)
+      else state.selected.delete(card.name)
+      refreshActions()
+    })
+    node.addEventListener('dragstart', event => {
+      event.dataTransfer.setData('text/plain', card.name)
+      event.dataTransfer.effectAllowed = 'move'
+      node.classList.add('dragging')
+    })
+    node.addEventListener('dragend', () => {
+      node.classList.remove('dragging')
+      clearDropMarks()
+    })
+    node.addEventListener('dragover', event => {
+      event.preventDefault()
+      clearDropMarks()
+      node.classList.add(dropAfter(event, node) ? 'drop-after' : 'drop-before')
+    })
+    node.addEventListener('dragleave', () => node.classList.remove('drop-before', 'drop-after'))
+    node.addEventListener('drop', event => {
+      event.preventDefault()
+      const dragged = event.dataTransfer.getData('text/plain')
+
+      clearDropMarks()
+      if (dragged && dragged !== card.name) move(dragged, card.name, dropAfter(event, node))
+    })
+
+    return node
+  }
+
+  const dropAfter = (event, node) => {
+    const box = node.getBoundingClientRect()
+
+    return event.clientX > box.left + box.width / 2
+  }
+
+  const clearDropMarks = () => $$('.drop-before, .drop-after', ui.cards).forEach(node => node.classList.remove('drop-before', 'drop-after'))
+
+  function paintCards() {
+    ui.meta.textContent = state.deck.slot + ' · ' + state.deck.cards.length + ' kart · ' + state.deck.canvas.width + '×' + state.deck.canvas.height
+    ui.cards.replaceChildren(...state.deck.cards.map(cardNode))
+    for (const card of state.deck.cards) paintCard(card.name)
+    fitThumbs()
+    refreshActions()
+  }
+
+  function paintCard(name) {
+    const node = ui.cards.querySelector('[data-name="' + CSS.escape(name) + '"]')
+
+    if (!node) return
+
+    const card = cardOf(name)
+    const spec = specOf(name)
+    const dirty = isDirty(name)
+    const uploadedNow = card.uploadedVersion === card.version
+    const cut = state.overflow.get(name) || []
+    const box = $('.pick', node)
+
+    node.classList.toggle('current', name === state.current)
+    node.classList.toggle('dirty', dirty)
+    $('.card-name', node).textContent = 'Kare ' + (card.slide + 1) + ' · ' + styleOf(spec.style).label
+    box.checked = state.selected.has(name)
+    box.disabled = uploadedNow && !dirty
+    paintThumb(node, card, dirty)
+
+    $('.badges', node).replaceChildren(...[
+      dirty && element('span', { class: 'badge warn', text: 'çizilmedi' }),
+      cut.length > 0 && element('span', { class: 'badge err', text: 'metin kesiliyor', title: cut.join(', ') }),
+      uploadedNow && element('span', { class: 'badge ok', text: 'yüklendi' }),
+      card.uploadedVersion !== undefined && !uploadedNow && element('span', { class: 'badge muted', text: 'eski sürümü yüklü' })
+    ].filter(Boolean))
+  }
+
+  /** Çizilmiş kart JPEG'iyle, taslak kart canlı önizlemesiyle görünür: seri karıştırınca bütün şerit değişir */
+  const thumbRequests = new Map()
+  function paintThumb(node, card, dirty) {
+    const thumb = $('.thumb', node)
+    const img = $('img', thumb)
+
+    if (!dirty) {
+      clearTimeout(thumbRequests.get(card.name))
+      $('iframe', thumb)?.remove()
+      img.hidden = false
+      if (img.getAttribute('src') !== thumbUrl(card)) img.setAttribute('src', thumbUrl(card))
+
+      return
+    }
+
+    clearTimeout(thumbRequests.get(card.name))
+    thumbRequests.set(card.name, setTimeout(async () => {
+      try {
+        const html = await api('preview', { spec: specOf(card.name) })
+
+        // Yanıt gelene kadar kart çizilmiş ya da geri alınmış olabilir: temiz kartın üstüne canlı önizleme konmaz.
+        if (!isDirty(card.name)) return
+
+        const frame = $('iframe', thumb) || thumb.insertBefore(element('iframe', { sandbox: 'allow-same-origin', tabindex: '-1', 'aria-hidden': 'true' }), img)
+
+        frame.srcdoc = html
+        img.hidden = true
+        fitThumbs()
+      } catch (error) {
+        // Geçersiz taslak (ör. boş başlık) önizlenemez; küçük resim son çizimde kalır.
+      }
+    }, 160))
+  }
+
+  function fitThumbs() {
+    const { width, height } = state.deck.canvas
+    const sample = $('.thumb', ui.cards)
+
+    if (!sample) return
+
+    const scale = sample.clientWidth / width
+
+    for (const frame of $$('.thumb iframe', ui.cards)) {
+      frame.style.width = width + 'px'
+      frame.style.height = height + 'px'
+      frame.style.transform = 'scale(' + scale + ')'
+    }
+  }
+
+  function select(name) {
+    if (!cardOf(name)) return
+
+    state.current = name
+    for (const card of state.deck.cards) ui.cards.querySelector('[data-name="' + CSS.escape(card.name) + '"]')?.classList.toggle('current', card.name === name)
+    ui.cards.querySelector('[data-name="' + CSS.escape(name) + '"]')?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    syncPanel()
+    schedulePreview(0)
+  }
+
+  function step(direction) {
+    const names = state.deck.cards.map(card => card.name)
+    const index = names.indexOf(state.current)
+
+    select(names[(index + direction + names.length) % names.length])
+  }
+
+  /**
+   * Sıra istekleri sırayla gider. Düşen bir istekte yerel sıra sunucudan yeniden okunur: yerel geri alma, arkasından
+   * başarılı olan ikinci taşımayı da geri alıp istemciyi sunucudan ayırıyordu (taze inceleme).
+   */
+  let moves = Promise.resolve()
+  function move(dragged, target, after) {
+    const previous = state.deck.cards
+    const names = previous.map(card => card.name).filter(name => name !== dragged)
+
+    names.splice(names.indexOf(target) + (after ? 1 : 0), 0, dragged)
+    state.deck.cards = names.map(name => previous.find(card => card.name === name))
+    paintCards()
+
+    moves = moves.then(async () => {
+      try {
+        await api('order', { cards: names })
+        toast('Sıra güncellendi — yükleme bu sırayla yapılır')
+      } catch (error) {
+        await reloadOrder()
+        toast('Sıra kaydedilemedi: ' + error.message, 'err')
+      }
+    })
+  }
+
+  async function reloadOrder() {
+    try {
+      const fresh = await (await fetch('deck')).json()
+      const known = new Map(state.deck.cards.map(card => [card.name, card]))
+
+      state.deck.cards = fresh.cards.map(card => known.get(card.name) || card)
+      paintCards()
+    } catch (error) {
+      // Okunamadıysa ekran olduğu gibi kalır; sayfa yenilemesi düzeltir.
+    }
+  }
+
+  function moveCurrent(direction) {
+    const names = state.deck.cards.map(card => card.name)
+    const index = names.indexOf(state.current)
+    const target = names[index + direction]
+
+    if (target) move(state.current, target, direction > 0)
+  }
+
+  /* ---------- panel ---------- */
+
+  function buildPanel() {
+    ui.styles.replaceChildren(...state.deck.styles.map(style => {
+      const swatch = element('span', { class: 'swatch' }, [element('i')])
+
+      swatch.style.background = 'linear-gradient(135deg, ' + style.colors.base + ' 0 58%, ' + style.colors.second + ' 58% 100%)'
+      swatch.firstChild.style.background = style.colors.accent
+
+      const chip = element('button', { type: 'button', class: 'chip', 'data-value': style.id, title: style.label }, [swatch, element('span', { text: style.label })])
+
+      chip.addEventListener('click', () => change(state.current, { style: style.id }))
+
+      return chip
+    }))
+
+    ui.layouts.replaceChildren(...state.deck.layouts.map(layout => {
+      const icon = '<svg viewBox="0 0 32 44" fill="currentColor" aria-hidden="true">' + (LAYOUT_ICONS[layout.id] || LAYOUT_ICONS.classic) + '</svg>'
+      const button = element('button', { type: 'button', class: 'layout-button', 'data-value': layout.id, html: icon }, [element('span', { text: LAYOUT_LABELS[layout.id] || layout.id })])
+
+      button.addEventListener('click', () => {
+        const spec = specOf(state.current)
+        const patch = { layout: layout.id }
+
+        if (layout.needsScreen && spec.raw === undefined) patch.raw = 0
+        change(state.current, patch)
+      })
+
+      return button
+    }))
+
+    for (const button of $$('button', ui.caption)) button.addEventListener('click', () => change(state.current, { captionPosition: button.dataset.value }))
+
+    for (const [field] of TEXT_FIELDS) {
+      const input = ui.panel.elements[field]
+
+      input.maxLength = state.deck.limits[field]
+      input.addEventListener('input', () => {
+        counter(field, input.value)
+        // Başlık boş bırakılamaz; panelde silinen başlık önizlemede son hâliyle kalır.
+        if (field === 'title' && input.value.trim() === '') return
+        change(state.current, { [field]: input.value }, { group: 'text:' + field })
+      })
+    }
+
+    ui.panel.elements.accent.addEventListener('input', event => change(state.current, { accent: event.target.value.toUpperCase() }, { group: 'accent' }))
+    ui.panel.elements.text.addEventListener('input', event => change(state.current, { text: event.target.value.toUpperCase() }, { group: 'text-color' }))
+    $('#resetColors').addEventListener('click', () => change(state.current, { accent: undefined, text: undefined }))
+    ui.panel.elements.frame.addEventListener('change', event => change(state.current, { frame: event.target.checked }))
+    ui.panel.addEventListener('submit', event => event.preventDefault())
+  }
+
+  function counter(field, value) {
+    const max = state.deck.limits[field]
+    const node = ui.panel.querySelector('[data-count="' + field + '"]')
+    const length = (value || '').length
+
+    node.textContent = length + '/' + max
+    node.classList.toggle('near', length >= max * 0.85 && length < max)
+    node.classList.toggle('full', length >= max)
+  }
+
+  function syncPanel() {
+    const name = state.current
+    const card = cardOf(name)
+    const spec = specOf(name)
+    const style = styleOf(spec.style)
+
+    ui.cardTitle.textContent = 'Kare ' + (card.slide + 1) + ' · ' + card.name
+    ui.dirtyBadge.hidden = !isDirty(name)
+
+    for (const [field] of TEXT_FIELDS) {
+      const input = ui.panel.elements[field]
+
+      if (document.activeElement !== input) input.value = spec[field] || ''
+      counter(field, input.value)
+    }
+
+    for (const chip of $$('.chip', ui.styles)) chip.setAttribute('aria-pressed', String(chip.dataset.value === spec.style))
+    for (const button of $$('.layout-button', ui.layouts)) {
+      const layout = layoutOf(button.dataset.value)
+
+      button.setAttribute('aria-pressed', String(layout.id === spec.layout))
+      button.disabled = layout.needsScreen && state.deck.raws.length === 0
+    }
+    for (const button of $$('button', ui.caption)) {
+      button.setAttribute('aria-pressed', String(button.dataset.value === spec.captionPosition))
+      button.disabled = CAPTION_FIXED.has(spec.layout)
+    }
+
+    ui.panel.elements.accent.value = (spec.accent || style.colors.accent).toLowerCase()
+    ui.panel.elements.text.value = (spec.text || style.colors.text).toLowerCase()
+    $('#resetColors').hidden = !spec.accent && !spec.text
+    ui.panel.elements.frame.checked = spec.frame
+    ui.panel.elements.frame.disabled = !layoutOf(spec.layout).needsScreen
+
+    ui.raws.replaceChildren(...state.deck.raws.map((raw, index) => {
+      const button = element('button', { type: 'button', class: 'raw', 'aria-pressed': String(spec.raw === index), title: 'Ekran ' + (index + 1) }, [element('img', { src: raw.name, alt: 'Ekran ' + (index + 1) })])
+
+      button.addEventListener('click', () => change(name, { raw: index }))
+
+      return button
+    }))
+    if (state.deck.raws.length === 0) ui.raws.append(element('span', { class: 'raw none', text: 'yok' }))
+
+    refreshActions()
+  }
+
+  /* ---------- önizleme, yerinde yazma, taşma ---------- */
+
+  let previewTimer
+  function schedulePreview(delay = 120) {
+    clearTimeout(previewTimer)
+    previewTimer = setTimeout(loadPreview, delay)
+  }
+
+  async function loadPreview() {
+    if (state.inline) return
+
+    const sequence = ++state.previewSeq
+    const name = state.current
+
+    try {
+      const html = await api('preview', { spec: specOf(name) })
+
+      if (sequence !== state.previewSeq) return
+      ui.preview.dataset.card = name
+      ui.preview.srcdoc = html
+      ui.problem.hidden = true
+      delete ui.problem.dataset.kind
+    } catch (error) {
+      if (sequence !== state.previewSeq) return
+      ui.problem.textContent = error.message
+      ui.problem.hidden = false
+    }
+  }
+
+  function fitPreview() {
+    const { width, height } = state.deck.canvas
+    const available = ui.previewBox.parentElement.clientWidth
+    const scale = Math.min(available / width, Math.max(window.innerHeight - 150, 320) / height)
+
+    ui.preview.style.width = width + 'px'
+    ui.preview.style.height = height + 'px'
+    ui.preview.style.transform = 'scale(' + scale + ')'
+    ui.previewBox.style.width = Math.round(width * scale) + 'px'
+    ui.previewBox.style.height = Math.round(height * scale) + 'px'
+  }
+
+  function wireInline() {
+    const doc = ui.preview.contentDocument
+
+    if (!doc || !doc.head) return
+
+    const hover = doc.createElement('style')
+
+    // Cihaz grubu (.phone) bütün tuvali kaplar ve DOM'da başlıktan sonra gelir: tıklamayı başlığın üstünde yutuyordu.
+    hover.textContent = '.phone{pointer-events:none}[data-edit]{cursor:text;outline:8px dashed transparent;outline-offset:18px;border-radius:14px}[data-edit]:hover{outline-color:rgba(128,128,128,.6)}[data-edit]:focus{outline:8px solid #4c8dff}'
+    doc.head.append(hover)
+
+    for (const [field, label] of TEXT_FIELDS) {
+      const node = doc.querySelector('.' + field)
+
+      if (!node) continue
+
+      node.dataset.edit = field
+      node.setAttribute('contenteditable', 'plaintext-only')
+      node.spellcheck = false
+      node.addEventListener('focus', () => { state.inline = true })
+      node.addEventListener('blur', () => {
+        state.inline = false
+        schedulePreview(0)
+      })
+      node.addEventListener('keydown', event => {
+        if (event.key === 'Enter') {
+          event.preventDefault()
+          if (event.metaKey || event.ctrlKey) renderNames([state.current])
+          else node.blur()
+        }
+        if (event.key === 'Escape') node.blur()
+      })
+      node.addEventListener('input', () => {
+        const max = state.deck.limits[field]
+        let value = node.textContent.replace(/\s+/g, ' ')
+
+        if (value.length > max) {
+          value = value.slice(0, max)
+          node.textContent = value
+          toast(label + ' en çok ' + max + ' karakter')
+        }
+
+        if (field === 'title' && value.trim() === '') return
+        change(state.current, { [field]: value }, { group: 'text:' + field, preview: false })
+        measure(state.current, doc)
+      })
+    }
+  }
+
+  /**
+   * Kesilme satır sayısıyla ölçülür: kırpmasız kopyanın yüksekliği kırpılmış kutuyu yarım satırdan fazla aşıyorsa metin
+   * kesiliyordur. `scrollHeight > clientHeight` ş, ç, g gibi harflerin alt uzantısını (iPhone başlığında 4 px) kesilme
+   * sayıyordu ve her kart "metin kesiliyor" çıkıyordu (2026-10-26).
+   */
+  function unclampedHeight(node) {
+    const clone = node.cloneNode(true)
+
+    clone.removeAttribute('contenteditable')
+    // Ortalanmış başlığın genişliği metnin kendisidir; clientWidth aşağı yuvarlar ve kopya bir satır fazla kırılırdı.
+    clone.style.cssText = 'display:block;-webkit-line-clamp:unset;overflow:visible;position:absolute;visibility:hidden;left:0;top:0;width:' + (Math.ceil(node.getBoundingClientRect().width) + 1) + 'px'
+    node.ownerDocument.body.append(clone)
+
+    const height = clone.getBoundingClientRect().height
+
+    clone.remove()
+
+    return height
+  }
+
+  function measure(name, doc) {
+    if (!doc || !cardOf(name) || !doc.defaultView) return
+
+    const cut = []
+
+    for (const [field, label] of [['title', 'Başlık'], ['subtitle', 'Alt başlık']]) {
+      const node = doc.querySelector('.' + field)
+
+      if (!node) continue
+
+      const lineHeight = parseFloat(doc.defaultView.getComputedStyle(node).lineHeight) || 0
+
+      if (unclampedHeight(node) > node.clientHeight + lineHeight / 2) cut.push(label)
+    }
+
+    const caption = doc.querySelector('.caption')
+    const title = doc.querySelector('.title')
+    const slack = title ? (parseFloat(doc.defaultView.getComputedStyle(title).lineHeight) || 0) / 2 : 0
+
+    if (caption && caption.scrollHeight > caption.clientHeight + slack) cut.push('başlık alanı')
+
+    state.overflow.set(name, cut)
+    paintCard(name)
+
+    if (name === state.current && cut.length > 0 && ui.problem.hidden) {
+      ui.problem.textContent = cut.join(', ') + ' kesiliyor — metni kısalt ya da yerleşimi "Metin" yap'
+      ui.problem.hidden = false
+      ui.problem.dataset.kind = 'overflow'
+    } else if (name === state.current && cut.length === 0 && ui.problem.dataset.kind === 'overflow') {
+      ui.problem.hidden = true
+      delete ui.problem.dataset.kind
+    }
+  }
+
+  /** Bütün kartların taşmasını arka planda gizli bir iframe'de ölçer (yalnız önizlenen kart değil) */
+  const scanQueue = new Set()
+  let scanTimer
+  let scanning = false
+  const scanFrame = element('iframe', { sandbox: 'allow-same-origin', tabindex: '-1', 'aria-hidden': 'true' })
+
+  scanFrame.style.cssText = 'position:fixed;left:-99999px;top:0;border:0;visibility:hidden'
+  document.body.append(scanFrame)
+
+  function scheduleScan(name) {
+    if (name) scanQueue.add(name)
+    else for (const card of state.deck.cards) scanQueue.add(card.name)
+    clearTimeout(scanTimer)
+    scanTimer = setTimeout(runScan, 400)
+  }
+
+  async function runScan() {
+    if (scanning) return
+
+    scanning = true
+    scanFrame.style.width = state.deck.canvas.width + 'px'
+    scanFrame.style.height = state.deck.canvas.height + 'px'
+
+    while (scanQueue.size > 0) {
+      const name = scanQueue.values().next().value
+
+      scanQueue.delete(name)
+      if (!cardOf(name)) continue
+
+      try {
+        const html = await api('preview', { spec: specOf(name) })
+
+        await new Promise(resolve => {
+          scanFrame.onload = resolve
+          scanFrame.srcdoc = html
+        })
+        measure(name, scanFrame.contentDocument)
+      } catch (error) {
+        // Önizlenemeyen taslak ölçülmez.
+      }
+    }
+
+    scanning = false
+  }
+
+  /* ---------- çizim, kopya, yükleme ---------- */
+
+  function busy(on, label) {
+    state.busy = on
+    document.body.setAttribute('aria-busy', String(on))
+    if (label) toast(label)
+    refreshActions()
+  }
+
+  async function renderNames(names) {
+    if (state.busy) {
+      toast('Önceki iş sürüyor — bitince yeniden dene')
+
+      return false
+    }
+
+    const targets = names.filter(isDirty)
+
+    if (targets.length === 0) {
+      toast('Çizilecek değişiklik yok')
+
+      return true
+    }
+
+    busy(true, targets.length + ' kart mağaza ölçüsünde çiziliyor…')
+
+    // Gönderilen spec saklanır: çizim sürerken yapılan düzenleme taslakta kalır, yanıt onu silmez (taze inceleme M1).
+    const sent = new Map(targets.map(name => [name, specOf(name)]))
+
+    try {
+      const { cards } = await api('render', { cards: targets.map(name => ({ name, version: cardOf(name).version, spec: sent.get(name) })) })
+
+      for (const rendered of cards) {
+        Object.assign(cardOf(rendered.name), rendered)
+        if (same(state.drafts.get(rendered.name) || rendered.spec, sent.get(rendered.name))) state.drafts.delete(rendered.name)
+        paintCard(rendered.name)
+      }
+
+      saveDrafts()
+      if (state.current) syncPanel()
+      toast(cards.length + ' kart çizildi', 'ok')
+
+      return true
+    } catch (error) {
+      toast('Çizilemedi: ' + error.message, 'err')
+
+      return false
+    } finally {
+      busy(false)
+    }
+  }
+
+  let duplicating = false
+  async function duplicateCurrent() {
+    if (duplicating) return
+    if (state.deck.cards.length >= state.deck.limits.cards) return toast('Deste en çok ' + state.deck.limits.cards + ' kart alır', 'err')
+
+    const name = state.current
+
+    duplicating = true
+
+    try {
+      const { card } = await api('duplicate', { card: name })
+      const draft = state.drafts.get(name)
+
+      state.deck.cards.splice(state.deck.cards.findIndex(item => item.name === name) + 1, 0, card)
+      if (draft) state.drafts.set(card.name, { ...draft })
+      saveDrafts()
+      paintCards()
+      select(card.name)
+      toast('Kopya hazır — A/B için başka bir başlık ya da stil dene')
+    } catch (error) {
+      toast('Kopyalanamadı: ' + error.message, 'err')
+    } finally {
+      duplicating = false
+    }
+  }
+
+  async function uploadSelected() {
+    const names = state.deck.cards.map(card => card.name).filter(name => state.selected.has(name))
+
+    if (names.length === 0 || state.busy) return
+
+    if (names.some(isDirty) && !(await renderNames(names))) return
+
+    busy(true, names.length + ' kart yuvaya yükleniyor…')
+
+    try {
+      const { results } = await api('upload', { files: names.map(name => name + '.jpg') })
+      const failed = []
+
+      for (const result of results) {
+        const name = result.file.replace(/\.jpg$/, '')
+        const card = cardOf(name)
+
+        if (result.ok) {
+          card.uploadedVersion = card.version
+          state.selected.delete(name)
+        } else {
+          failed.push(name + ': ' + result.error)
+        }
+
+        paintCard(name)
+      }
+
+      const summary = (results.length - failed.length) + ' / ' + results.length + ' kart yuvaya yüklendi'
+
+      toast(failed.length === 0 ? summary : summary + ' — ' + failed.join(' · '), failed.length === 0 ? 'ok' : 'err')
+    } catch (error) {
+      toast('Yükleme başarısız: ' + error.message, 'err')
+    } finally {
+      busy(false)
+    }
+  }
+
+  /* ---------- zar ---------- */
+
+  function roll(spec, previous) {
+    const hasRaw = spec.raw !== undefined
+    const layouts = state.deck.layouts.filter(layout => layout.needsScreen === hasRaw).map(layout => layout.id)
+    const freshLayouts = layouts.filter(id => id !== spec.layout && (!previous || id !== previous.layout))
+    const styles = state.deck.styles.map(style => style.id).filter(id => id !== spec.style && (!previous || id !== previous.style))
+
+    return normalize({
+      ...spec,
+      style: pick(styles.length ? styles : state.deck.styles.map(style => style.id)),
+      layout: pick(freshLayouts.length ? freshLayouts : layouts),
+      captionPosition: Math.random() < 0.25 ? 'bottom' : 'top',
+      accent: Math.random() < 0.45 ? pick(DICE_ACCENTS) : undefined,
+      text: undefined
+    })
+  }
+
+  function wobble() {
+    ui.previewBox.classList.remove('rolled')
+    void ui.previewBox.offsetWidth
+    ui.previewBox.classList.add('rolled')
+  }
+
+  function rollCurrent() {
+    const before = specOf(state.current)
+    const after = roll(before)
+
+    record([{ name: state.current, before, after }], null)
+    apply(state.current, after)
+    wobble()
+  }
+
+  function shuffleSeries() {
+    let previous = null
+    const changes = state.deck.cards.map(card => {
+      const before = specOf(card.name)
+      const after = roll(before, previous)
+
+      previous = after
+
+      return { name: card.name, before, after }
+    })
+
+    record(changes, null)
+    for (const item of changes) apply(item.name, item.after, { preview: item.name === state.current })
+    wobble()
+    toast('Seri karıştırıldı — beğenmezsen ⌘Z, beğendiysen "Değişenleri çiz"')
+  }
+
+  /* ---------- vitrin ---------- */
+
+  function openShowcase() {
+    const chosen = state.deck.cards.filter(card => state.selected.has(card.name))
+    const cards = (chosen.length > 0 ? chosen : state.deck.cards).slice(0, 3)
+    const first = styleOf(specOf(cards[0].name).style)
+    const icon = $('#showcaseIcon')
+    const dirty = cards.filter(card => isDirty(card.name)).length
+
+    icon.style.background = 'linear-gradient(135deg, ' + first.colors.accent + ', ' + first.colors.base + ')'
+    $('#showcaseShots').replaceChildren(...cards.map(card => element('img', { src: thumbUrl(card), alt: 'Kare ' + (card.slide + 1) })))
+    $('#showcaseNote').textContent = [
+      chosen.length > 0 ? 'Seçili kartların ilk üçü.' : 'Destenin ilk üç kartı.',
+      'Aramada yalnız ilk üç kare görünür: hikâyeyi bu üçü anlatmalı.',
+      dirty > 0 ? dirty + ' kartın çizilmemiş değişikliği var; vitrin son çizimi gösterir.' : ''
+    ].join(' ')
+    $('#showcaseDialog').showModal()
+  }
+
+  /* ---------- eylem durumu, klavye ---------- */
+
+  function refreshActions() {
+    if (!state.deck) return
+
+    const dirty = state.deck.cards.filter(card => isDirty(card.name))
+    const selected = state.deck.cards.filter(card => state.selected.has(card.name))
+    const slides = selected.map(card => card.slide)
+
+    ui.upload.textContent = 'Seçilenleri yükle (' + selected.length + ')'
+    ui.upload.disabled = state.busy || selected.length === 0
+    ui.upload.title = new Set(slides).size < slides.length ? 'Aynı karenin iki varyantı seçili: ikisi de yuvaya eklenir' : 'Yuva en çok ' + state.deck.maxPerSlot + ' görsel alır'
+    ui.renderAll.textContent = dirty.length > 0 ? 'Değişenleri çiz (' + dirty.length + ')' : 'Değişenleri çiz'
+    ui.renderAll.disabled = state.busy || dirty.length === 0
+    ui.render.disabled = state.busy || !state.current || !isDirty(state.current)
+    ui.undo.disabled = state.history.length === 0
+    ui.redo.disabled = state.future.length === 0
+    if (state.current) ui.dirtyBadge.hidden = !isDirty(state.current)
+  }
+
+  function onKey(event) {
+    const mod = event.metaKey || event.ctrlKey
+    const key = event.key.toLowerCase()
+
+    if (mod && key === 'enter') {
+      event.preventDefault()
+      renderNames([state.current])
+
+      return
+    }
+
+    if (mod && key === 'd') {
+      event.preventDefault()
+      if (!event.repeat) duplicateCurrent()
+
+      return
+    }
+
+    if (isTyping(event.target) || $('#showcaseDialog').open) return
+    // Odaktaki düğme ve onay kutusu Space/oklarla kendi işini yapar.
+    if (event.target instanceof HTMLElement && ['BUTTON', 'A'].includes(event.target.tagName) && (key === ' ' || key === 'enter')) return
+
+    if (mod && key === 'z') {
+      event.preventDefault()
+      if (event.shiftKey) redo()
+      else undo()
+    } else if (key === 'arrowleft' || key === 'arrowright') {
+      event.preventDefault()
+      const direction = key === 'arrowleft' ? -1 : 1
+
+      if (event.altKey) moveCurrent(direction)
+      else step(direction)
+    } else if (key === ' ') {
+      event.preventDefault()
+      const card = cardOf(state.current)
+
+      if (card.uploadedVersion === card.version && !isDirty(card.name)) return
+      if (state.selected.has(card.name)) state.selected.delete(card.name)
+      else state.selected.add(card.name)
+      paintCard(card.name)
+      refreshActions()
+    } else if (key === 'r' && !mod) {
+      rollCurrent()
+    }
+  }
+
+  /* ---------- açılış ---------- */
+
+  async function load() {
+    const response = await fetch('deck')
+
+    if (!response.ok) throw new Error('Deste okunamadı (HTTP ' + response.status + '). Gateway yeniden başlamış olabilir.')
+
+    state.deck = await response.json()
+    document.documentElement.style.setProperty('--ratio', String(state.deck.canvas.width / state.deck.canvas.height))
+    document.title = 'Mağaza görselleri · ' + state.deck.slot
+    restoreDrafts()
+    buildPanel()
+    paintCards()
+    state.current = state.deck.cards[0].name
+    select(state.current)
+    fitPreview()
+    scheduleScan()
+
+    if (state.drafts.size > 0) toast(state.drafts.size + ' kartın çizilmemiş taslağı geri yüklendi')
+  }
+
+  // Önizlemenin kartı `data-card`'dadır: seçili kart değiştiyse eski kartın belgesine yerinde yazma bağlanmaz.
+  ui.preview.addEventListener('load', () => {
+    if (ui.preview.dataset.card !== state.current) return
+    wireInline()
+    measure(state.current, ui.preview.contentDocument)
+  })
+  $('#render').addEventListener('click', () => renderNames([state.current]))
+  ui.renderAll.addEventListener('click', () => renderNames(state.deck.cards.map(card => card.name)))
+  ui.upload.addEventListener('click', uploadSelected)
+  $('#dice').addEventListener('click', rollCurrent)
+  $('#shuffle').addEventListener('click', shuffleSeries)
+  $('#duplicate').addEventListener('click', duplicateCurrent)
+  $('#showcase').addEventListener('click', openShowcase)
+  $('#closeShowcase').addEventListener('click', () => $('#showcaseDialog').close())
+  ui.undo.addEventListener('click', undo)
+  ui.redo.addEventListener('click', redo)
+  document.addEventListener('keydown', onKey)
+  window.addEventListener('resize', () => {
+    if (!state.deck) return
+    fitPreview()
+    fitThumbs()
+  })
+  window.addEventListener('beforeunload', event => {
+    if (state.deck && state.deck.cards.some(card => isDirty(card.name))) event.preventDefault()
+  })
+
+  load().catch(error => {
+    ui.meta.textContent = error.message
+    toast(error.message, 'err')
+  })
+})()