app.js

import { makeDraft, makeLayout, parseLayout, toCentralBox, resizeLayout, validateDraft } from './layout.mjs';

const $ = id => document.getElementById(id);
const copy = value => JSON.parse(JSON.stringify(value));
const examples = {
  poster: {
    width: 1024, height: 1024, meta: ['travel poster'], canvas: 'single',
    caption: 'A minimalist travel poster on warm cream paper. A bold dark-blue title sits above a flat blue mountain illustration. A small Japanese subtitle anchors the lower edge. Generous negative space, clean geometric shapes, restrained ink texture.',
    items: [
      { id: 'p-title', label: 'text', text: 'EXPLORE', caption: 'Large dark-blue uppercase title, centered, crisp heavy lettering with generous spacing.', x: 128, y: 96, w: 768, h: 128 },
      { id: 'p-mountain', label: 'object', caption: 'A flat blue mountain illustration with angular peaks and a pale-blue rising sun, filling the lower center.', x: 208, y: 304, w: 608, h: 480 },
      { id: 'p-subtitle', label: 'text', text: 'まだ見ぬ場所へ', caption: 'A small dark-blue Japanese subtitle, centered in light, clean lettering.', x: 224, y: 864, w: 576, h: 64 }
    ]
  },
  cup: {
    width: 1536, height: 1024, meta: ['product campaign', 'studio photography'], canvas: 'single',
    caption: 'A warm studio campaign for a handmade ceramic cup, with an ivory backdrop, soft side lighting and restrained dark-green typography. Keep the ceramic texture tactile and the composition calm.',
    items: [
      { id: 'c-cup', label: 'object', caption: 'An ivory ceramic cup with a rounded handle, fine speckled glaze and a soft contact shadow, photographed at a three-quarter angle.', x: 176, y: 224, w: 624, h: 640 },
      { id: 'c-title', label: 'text', text: '把日常，过成诗。', caption: 'Large dark-green Chinese title in crisp, moderately heavy lettering, with generous spacing and no backing panel.', x: 928, y: 272, w: 480, h: 176 },
      { id: 'c-copy', label: 'text', text: '一杯温暖\n一刻从容', caption: 'Smaller dark-green Chinese supporting copy, comfortably legible on two lines.', x: 928, y: 512, w: 448, h: 144 }
    ]
  },
  type: {
    width: 1024, height: 1280, meta: ['typographic poster'], canvas: 'single',
    caption: 'An expressive typographic poster on pale-yellow paper. Three independent text blocks in English, Arabic and Japanese share an asymmetric composition with a small pink abstract sculpture. Preserve the exact characters and line breaks. Airy spacing, ink-blue and hot-pink accents.',
    items: [
      { id: 't-en', label: 'text', text: 'MAKE\nROOM.', caption: 'Oversized dark-blue condensed Latin lettering, left aligned, two lines.', x: 80, y: 96, w: 704, h: 320 },
      { id: 't-ar', label: 'text', text: 'مساحة للخيال', caption: 'Dark-blue Arabic lettering with clear connected forms, right aligned.', x: 176, y: 496, w: 736, h: 160 },
      { id: 't-ja', label: 'text', text: '想像の余白', caption: 'Small dark-blue Japanese lettering with generous spacing.', x: 96, y: 1056, w: 544, h: 96 },
      { id: 't-sculpture', label: 'object', caption: 'A playful pink abstract folded-paper sculpture, casting one soft shadow.', x: 592, y: 752, w: 288, h: 256 }
    ]
  }
};

let currentExample = 'poster';
let state = copy(examples.poster);
let selectedId = state.items[0].id;
let activeTab = 'prompt';
let history = [copy(state)];
let historyIndex = 0;
let nextId = 1;
let pointerAction = null;
let compiled = null;
let draft = null;
let exportError = '';

function announce(message, error = false) {
  $('status').textContent = message;
  $('status').classList.toggle('error', error);
}

function selected() { return state.items.find(item => item.id === selectedId); }

function pushHistory() {
  if (JSON.stringify(state) === JSON.stringify(history[historyIndex])) return;
  history = history.slice(0, historyIndex + 1);
  history.push(copy(state));
  if (history.length > 60) history.shift();
  historyIndex = history.length - 1;
  renderHistory();
}

function renderHistory() {
  $('undo').disabled = historyIndex < 1;
  $('redo').disabled = historyIndex >= history.length - 1;
}

function renderCanvasSize() {
  $('canvas-width').value = state.width;
  $('canvas-height').value = state.height;
  $('canvas-readout').textContent = `${state.width} × ${state.height} px`;
  $('stage').style.aspectRatio = `${state.width} / ${state.height}`;
  // Preserve the actual aspect ratio even when a tall canvas meets the height limit.
  $('stage').style.maxWidth = `${620 * state.width / state.height}px`;
}

function renderScene() {
  $('scene-caption').value = state.caption;
  $('canvas-kind').value = state.canvas || 'single';
  $('scene-meta').value = '';
  const fragment = document.createDocumentFragment();
  (state.meta || []).forEach((tag, index) => {
    const chip = document.createElement('span'); chip.className = 'tag-chip';
    const text = document.createElement('span'); text.textContent = tag;
    const remove = document.createElement('button'); remove.type = 'button'; remove.textContent = '×'; remove.setAttribute('aria-label', `Remove genre tag ${tag}`);
    remove.addEventListener('click', () => {
      state.meta.splice(index, 1); pushHistory(); renderScene(); renderExport(); announce('Genre tag removed.');
    });
    chip.append(text, remove); fragment.append(chip);
  });
  $('scene-tags').replaceChildren(fragment);
}

function nameOf(item) {
  return item.label === 'text' ? item.text || 'Untitled text' : item.caption || `New ${item.label}`;
}

function renderLayers() {
  $('element-count').textContent = state.items.length;
  const fragment = document.createDocumentFragment();
  state.items.forEach((item, index) => {
    const button = document.createElement('button');
    button.type = 'button'; button.className = 'layer';
    button.dataset.itemId = item.id;
    button.setAttribute('aria-pressed', String(item.id === selectedId));
    button.setAttribute('aria-label', `Select ${item.label} ${index + 1}: ${nameOf(item)}`);
    const dot = document.createElement('span'); dot.className = `dot ${item.label}-dot`; dot.setAttribute('aria-hidden', 'true');
    const title = document.createElement('span'); title.className = 'layer-label'; title.textContent = `${index + 1}. ${nameOf(item)}`;
    const type = document.createElement('span'); type.className = 'layer-type'; type.textContent = item.label;
    button.append(dot, title, type);
    button.addEventListener('click', () => selectItem(item.id, false));
    fragment.append(button);
  });
  $('layers').replaceChildren(fragment);
}

function paintBox(element, item) {
  element.style.left = `${100 * item.x / state.width}%`;
  element.style.top = `${100 * item.y / state.height}%`;
  element.style.width = `${100 * item.w / state.width}%`;
  element.style.height = `${100 * item.h / state.height}%`;
  element.setAttribute('aria-pressed', String(item.id === selectedId));
  const content = element.querySelector('.box-content');
  if (item.label === 'text') {
    const lines = (item.text || '').split('\n');
    const longest = Math.max(1, ...lines.map(line => Array.from(line).length));
    const boardWidth = $('stage').getBoundingClientRect().width;
    const pxWidth = boardWidth * item.w / state.width;
    const pxHeight = boardWidth * item.h / state.width;
    content.style.fontSize = `${Math.max(8, Math.min(62, pxWidth / (longest * .64), pxHeight / (lines.length * 1.45)))}px`;
  }
}

function renderStage() {
  const fragment = document.createDocumentFragment();
  state.items.forEach((item, index) => {
    const box = document.createElement('button');
    box.type = 'button'; box.className = `layout-box ${item.label}`; box.dataset.itemId = item.id;
    box.setAttribute('aria-label', `${item.label} ${index + 1}: ${nameOf(item)}. Arrow keys move; Alt plus arrows resize.`);
    box.title = `${item.label} ${index + 1}. Drag to move. Alt + arrows to resize.`;
    const number = document.createElement('span'); number.className = 'box-number'; number.textContent = `${String(index + 1).padStart(2, '0')} / ${item.label.toUpperCase()}`;
    const content = document.createElement('span'); content.className = 'box-content'; content.dir = 'auto';
    content.textContent = item.label === 'text' ? item.text : item.caption;
    const handle = document.createElement('span'); handle.className = 'resize-handle'; handle.setAttribute('aria-hidden', 'true');
    box.append(number, content, handle);
    box.addEventListener('pointerdown', startPointer);
    box.addEventListener('click', () => selectItem(item.id, false));
    box.addEventListener('keydown', boxKeydown);
    box.addEventListener('focus', () => {
      if (selectedId !== item.id) selectItem(item.id);
    });
    paintBox(box, item);
    fragment.append(box);
  });
  $('stage').replaceChildren(fragment);
}

function renderInspector() {
  const item = selected();
  $('empty-selection').hidden = Boolean(item);
  $('selection-fields').hidden = !item;
  if (!item) return;
  $('item-label').value = item.label;
  $('literal-field').hidden = item.label !== 'text';
  $('item-text').value = item.text || '';
  $('item-caption').value = item.caption;
  ['x', 'y', 'w', 'h'].forEach(key => { $(`box-${key}`).value = item[key]; });
  try { $('centered-readout').textContent = `[${toCentralBox(item, state.width, state.height).join(', ')}]`; }
  catch { $('centered-readout').textContent = 'Review box geometry'; }
}

function renderExport() {
  exportError = '';
  let warnings = [];
  try {
    draft = makeDraft(state);
    const validation = validateDraft(draft);
    if (!validation.valid) throw new Error(validation.errors.join(' '));
    warnings = validation.warnings;
    compiled = makeLayout(state);
  } catch (error) {
    compiled = null; draft = null; exportError = error.message;
  }
  const isPrompt = activeTab === 'prompt';
  $('json-output').value = exportError ? `Draft needs attention:\n${exportError}` : JSON.stringify(isPrompt ? compiled : draft, null, 2);
  $('json-output').setAttribute('aria-label', isPrompt ? 'Compiled MOSS model prompt' : 'Editable MOSS layout draft');
  $('copy').textContent = isPrompt ? 'Copy model prompt ↗' : 'Copy editable draft ↗';
  $('copy').disabled = $('download').disabled = Boolean(exportError);
  $('layout-warning').hidden = !warnings.length;
  $('layout-warning').textContent = warnings.join(' ');
  $('format-help').textContent = isPrompt ? 'Centered pixels · yxyx · image dimensions stay in your generation settings' : 'Top-left pixels · xyxy · includes image dimensions for editing';
  for (const tab of ['prompt', 'draft']) {
    $(`tab-${tab}`).setAttribute('aria-selected', String(tab === activeTab));
    $(`tab-${tab}`).tabIndex = tab === activeTab ? 0 : -1;
  }
}

function renderAll() {
  renderCanvasSize(); renderScene(); renderLayers(); renderStage(); renderInspector(); renderExport(); renderHistory();
}

function selectItem(id, focus = false, keepStage = false) {
  selectedId = id;
  renderLayers(); renderInspector();
  if (!keepStage) {
    for (const box of $('stage').querySelectorAll('.layout-box')) box.setAttribute('aria-pressed', String(box.dataset.itemId === id));
  }
  if (focus) $('stage').querySelector(`[data-item-id="${CSS.escape(id)}"]`)?.focus({ preventScroll: true });
}

function saveEdit(message) {
  pushHistory(); renderAll();
  if (exportError) announce(exportError, true); else if (message) announce(message);
}

function startPointer(event) {
  if (event.button !== 0) return;
  const box = event.currentTarget;
  const item = state.items.find(candidate => candidate.id === box.dataset.itemId);
  selectItem(item.id);
  box.focus({ preventScroll: true });
  const rect = $('stage').getBoundingClientRect();
  pointerAction = {
    id: item.id, pointerId: event.pointerId,
    startX: event.clientX, startY: event.clientY,
    initial: copy(item), scaleX: state.width / rect.width, scaleY: state.height / rect.height,
    resize: event.target.classList.contains('resize-handle'), changed: false
  };
  box.classList.add('dragging');
  box.setPointerCapture(event.pointerId);
  event.preventDefault();
}

$('stage').addEventListener('pointermove', event => {
  if (!pointerAction || pointerAction.pointerId !== event.pointerId) return;
  const action = pointerAction;
  const item = state.items.find(candidate => candidate.id === action.id);
  const dx = Math.round((event.clientX - action.startX) * action.scaleX);
  const dy = Math.round((event.clientY - action.startY) * action.scaleY);
  const before = action.initial;
  if (action.resize) {
    item.w = Math.max(1, Math.min(state.width - before.x, Math.round(before.w + dx)));
    item.h = Math.max(1, Math.min(state.height - before.y, Math.round(before.h + dy)));
  } else {
    item.x = Math.max(0, Math.min(state.width - before.w, Math.round(before.x + dx)));
    item.y = Math.max(0, Math.min(state.height - before.h, Math.round(before.y + dy)));
  }
  action.changed = true;
  paintBox(event.target.closest('.layout-box'), item);
  renderInspector(); renderExport();
});

function endPointer(event) {
  if (!pointerAction || event.pointerId !== pointerAction.pointerId) return;
  const changed = pointerAction.changed;
  pointerAction = null;
  for (const box of $('stage').querySelectorAll('.dragging')) box.classList.remove('dragging');
  if (changed) {
    pushHistory(); renderLayers(); renderExport();
    announce('Box updated. Model coordinates and JSON are ready.');
  }
}
$('stage').addEventListener('pointerup', endPointer);
$('stage').addEventListener('pointercancel', endPointer);
$('stage').addEventListener('lostpointercapture', endPointer);

function boxKeydown(event) {
  if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
  event.preventDefault();
  const item = state.items.find(candidate => candidate.id === event.currentTarget.dataset.itemId);
  selectedId = item.id;
  const step = event.shiftKey ? 10 : 1;
  const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
  const sign = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -1 : 1;
  if (event.altKey) {
    const key = horizontal ? 'w' : 'h';
    item[key] = Math.max(1, Math.min((horizontal ? state.width - item.x : state.height - item.y), item[key] + step * sign));
  } else {
    const key = horizontal ? 'x' : 'y';
    item[key] = Math.max(0, Math.min((horizontal ? state.width - item.w : state.height - item.h), item[key] + step * sign));
  }
  paintBox(event.currentTarget, item);
  renderInspector(); renderExport(); pushHistory();
}

for (const [field, key] of [['scene-caption', 'caption'], ['canvas-kind', 'canvas']]) {
  $(field).addEventListener('change', () => {
    state[key] = $(field).value;
    pushHistory(); renderExport();
    announce(exportError || 'Scene updated.', Boolean(exportError));
  });
}
function addGenre() {
  const tag = $('scene-meta').value;
  if (!tag.trim()) return;
  if (!state.meta) state.meta = [];
  state.meta.push(tag); pushHistory(); renderScene(); renderExport(); announce('Genre tag added.');
}
$('add-meta').addEventListener('click', addGenre);
$('scene-meta').addEventListener('keydown', event => { if (event.key === 'Enter') { event.preventDefault(); addGenre(); } });

$('apply-size').addEventListener('click', () => {
  const width = Number($('canvas-width').value), height = Number($('canvas-height').value);
  try {
    if (width > 8192 || height > 8192) throw new Error('This editor supports canvas edges up to 8192 px. MOSS hardware requirements depend on your generation setup.');
    if (!$('scale-boxes').checked && state.items.some(item => item.x + item.w > width || item.y + item.h > height)) {
      throw new Error('Some boxes would fall outside the new canvas. Enable scaling, or move and resize those boxes first.');
    }
    state = resizeLayout(state, width, height, { scale: $('scale-boxes').checked });
    saveEdit(`Canvas set to ${width} × ${height} px. ${$('scale-boxes').checked ? 'Boxes scaled proportionally.' : 'Box pixel positions preserved.'}`);
  } catch (error) { announce(error.message, true); }
});

$('show-grid').addEventListener('change', () => $('stage').classList.toggle('grid', $('show-grid').checked));

for (const label of ['text', 'object', 'character']) {
  $(`add-${label}`).addEventListener('click', () => {
    const w = Math.max(1, Math.round(state.width * .4)), h = Math.max(1, Math.round(state.height * (label === 'text' ? .15 : .35)));
    const item = { id: `new-${nextId++}`, label, caption: label === 'text' ? 'Clear dark lettering with a readable size and generous spacing.' : label === 'character' ? 'A friendly illustrated character with a simple expressive pose.' : 'A geometric sculptural object with soft lighting and a clean silhouette.', x: Math.round((state.width - w) / 2), y: Math.round((state.height - h) / 2), w, h };
    if (label === 'text') item.text = 'YOUR WORDS';
    state.items.push(item); selectedId = item.id; saveEdit(`${label[0].toUpperCase() + label.slice(1)} added.`); selectItem(item.id, true);
  });
}

$('item-label').addEventListener('change', () => {
  const item = selected(); if (!item) return;
  item.label = $('item-label').value;
  if (item.label === 'text' && !item.text) item.text = 'YOUR WORDS';
  saveEdit('Element type updated.');
});
for (const [field, key] of [['item-text', 'text'], ['item-caption', 'caption']]) {
  $(field).addEventListener('change', () => {
    const item = selected(); if (!item) return;
    item[key] = $(field).value;
    pushHistory(); renderLayers(); renderStage(); renderExport();
    announce(exportError || 'Element updated.', Boolean(exportError));
  });
}

for (const key of ['x', 'y', 'w', 'h']) {
  $(`box-${key}`).addEventListener('change', () => {
    const item = selected(); if (!item) return;
    const value = Number($(`box-${key}`).value);
    const candidate = { ...item, [key]: value };
    if (!Number.isFinite(value) || $(`box-${key}`).value.trim() === '' || candidate.x < 0 || candidate.y < 0 || candidate.w <= 0 || candidate.h <= 0 || candidate.x + candidate.w > state.width || candidate.y + candidate.h > state.height) {
      announce('Use finite pixel values with a positive box size fully inside the canvas.', true); renderInspector(); return;
    }
    item[key] = value;
    pushHistory(); renderStage(); renderInspector(); renderExport(); announce('Exact box geometry updated.');
  });
}

$('duplicate').addEventListener('click', () => {
  const item = selected(); if (!item) return;
  const duplicate = copy(item); duplicate.id = `new-${nextId++}`;
  duplicate.x = Math.min(state.width - duplicate.w, duplicate.x + 24);
  duplicate.y = Math.min(state.height - duplicate.h, duplicate.y + 24);
  state.items.push(duplicate); selectedId = duplicate.id; saveEdit('Element duplicated.');
});
$('delete').addEventListener('click', () => {
  if (state.items.length <= 1) { announce('Keep at least one element in a layout. You can change this element instead.', true); return; }
  const index = state.items.findIndex(item => item.id === selectedId);
  state.items.splice(index, 1); selectedId = state.items[Math.min(index, state.items.length - 1)].id; saveEdit('Element removed. Undo restores it.');
});

function loadExample(name) {
  state = copy(examples[name]); currentExample = name; selectedId = state.items[0].id;
  document.querySelectorAll('[data-example]').forEach(button => button.classList.toggle('active', button.dataset.example === name));
  saveEdit(`Loaded ${name === 'cup' ? 'the official ceramic campaign example' : name === 'type' ? 'the Unicode type playground' : 'the travel poster'}. Undo restores your previous draft.`);
}
document.querySelectorAll('[data-example]').forEach(button => button.addEventListener('click', () => loadExample(button.dataset.example)));
$('reset').addEventListener('click', () => loadExample(currentExample));

for (const [id, direction] of [['undo', -1], ['redo', 1]]) {
  $(id).addEventListener('click', () => {
    const index = historyIndex + direction;
    if (index < 0 || index >= history.length) return;
    historyIndex = index; state = copy(history[index]);
    if (!selected()) selectedId = state.items[0].id;
    renderAll(); announce(direction < 0 ? 'Edit undone.' : 'Edit restored.');
  });
}

function switchTab(tab) { activeTab = tab; renderExport(); }
for (const tab of ['prompt', 'draft']) {
  $(`tab-${tab}`).addEventListener('click', () => switchTab(tab));
  $(`tab-${tab}`).addEventListener('keydown', event => {
    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
    event.preventDefault(); const next = event.key === 'Home' ? 'prompt' : event.key === 'End' ? 'draft' : tab === 'prompt' ? 'draft' : 'prompt';
    switchTab(next); $(`tab-${next}`).focus();
  });
}

$('copy').addEventListener('click', async () => {
  if (exportError) return;
  try {
    await navigator.clipboard.writeText($('json-output').value);
    announce(activeTab === 'prompt' ? `Model prompt copied. Generate at ${state.width} × ${state.height} px.` : 'Editable draft copied, including the canvas dimensions.');
  } catch {
    $('json-output').focus(); $('json-output').select();
    announce('Clipboard access is unavailable. The JSON is selected; use your device’s Copy command.');
  }
});

$('download').addEventListener('click', () => {
  if (exportError) return;
  const blob = new Blob([$('json-output').value + '\n'], { type: 'application/json;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const anchor = document.createElement('a'); anchor.href = url; anchor.download = `moss-${activeTab}-${state.width}x${state.height}.json`;
  anchor.click(); setTimeout(() => URL.revokeObjectURL(url), 1000);
  announce(`${activeTab === 'prompt' ? 'Model prompt' : 'Editable draft'} downloaded.`);
});

$('import').addEventListener('change', async event => {
  const file = event.target.files?.[0]; if (!file) return;
  try {
    if (file.size > 1_000_000) throw new Error('Import a layout JSON file smaller than 1 MB.');
    const imported = parseLayout(await file.text(), { width: state.width, height: state.height });
    if (imported.items.length > 200) throw new Error('This visual editor supports up to 200 layout elements.');
    if (imported.width > 8192 || imported.height > 8192) throw new Error('This visual editor supports canvas edges up to 8192 px.');
    state = imported;
    // Assign fresh internal IDs. These are never written into either JSON format.
    state.items.forEach(item => { item.id = `import-${nextId++}`; });
    selectedId = state.items[0].id;
    saveEdit(`Layout imported at ${state.width} × ${state.height} px. Compiled prompts use the current canvas dimensions because they contain none.`);
    document.querySelectorAll('[data-example]').forEach(button => button.classList.remove('active'));
  } catch (error) { announce(`Import failed: ${error.message}`, true); }
  event.target.value = '';
});

new ResizeObserver(() => {
  for (const box of $('stage').querySelectorAll('.layout-box')) {
    const item = state.items.find(candidate => candidate.id === box.dataset.itemId);
    if (item) paintBox(box, item);
  }
}).observe($('stage'));

renderAll();