Launch the reference-checked MOSS layout editor (#1)

- Launch the reference-checked MOSS layout editor (9128b4788a5a1e021a6f5310a6c7e59c98291729)

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+preview.png filter=lfs diff=lfs merge=lfs -text

.github/workflows/checks.yml

@@ -0,0 +1,28 @@
+name: Checks
+on:
+  push:
+  pull_request:
+permissions:
+  contents: read
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - name: Validate geometry and schema
+        run: node --test tests/layout.test.mjs
+      - name: Compare the pinned upstream compiler
+        run: python3 tests/reference_check.py
+      - name: Install browser test dependencies
+        run: |
+          python3 -m pip install -r requirements-dev.txt
+          python3 -m playwright install --with-deps chromium
+      - name: Exercise the browser editor
+        run: python3 verify.py

.gitignore

@@ -0,0 +1,7 @@
+__pycache__/
+*.pyc
+.venv/
+.cache/
+qa-output/
+test-results/
+playwright-report/

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

NOTICE

@@ -0,0 +1,10 @@
+MOSS Layout Studio by alphaBell.
+
+The layout compiler behavior is adapted from OpenMOSS/MOSS-Image,
+revision 52b87fca23acedc399d062d593bec388aee9926a, licensed under Apache-2.0.
+The unchanged reference compiler is included only in tests/vendor/compile_prompt.py.
+The JavaScript module is a browser adaptation with import, editing and validation
+helpers. OpenMOSS does not endorse this independent project.
+
+Source:
+https://github.com/OpenMOSS/MOSS-Image/blob/52b87fca23acedc399d062d593bec388aee9926a/skills/moss-image-prompt-enhancer/scripts/compile_prompt.py

README.md

@@ -1,10 +1,82 @@
 ---
 title: MOSS Layout Studio
-emoji: 🐨
-colorFrom: pink
-colorTo: gray
+emoji: 🧩
+colorFrom: gray
+colorTo: purple
 sdk: static
-pinned: false
+app_file: index.html
+pinned: true
+thumbnail: https://huggingface.co/spaces/alphabell/MOSS-Layout-Studio/resolve/main/thumbnail.png
+license: apache-2.0
+models:
+  - OpenMOSS-Team/MOSS-Image-Base
+tags:
+  - moss-image
+  - layout
+  - text-to-image
+  - prompt-engineering
+  - debugging
+short_description: Draw layouts and export MOSS-Image prompt JSON
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MOSS Layout Studio
+
+Draw a poster, place exact text, and export the JSON layout for MOSS-Image-Base's experimental layout prompts. An independent alphaBell project.
+
+**[Try MOSS Layout Studio](https://huggingface.co/spaces/alphabell/MOSS-Layout-Studio)** · [Source and checks](https://github.com/alphabell-research/moss-layout-studio)
+
+![MOSS Layout Studio with an editable travel poster, exact text boxes and a centered model-coordinate readout.](preview.png)
+
+Move and resize text, object and character boxes on a canvas. Keep Chinese copy, emoji and intended line breaks intact. Import an existing layout to edit it, or start from a composition preset.
+
+The editor runs in your browser. It prepares layouts without model inference. Its wireframe shows placement and text, rather than a generated image. Drafts remain in memory until you download them; there is no autosave, analytics or uploaded prompt content.
+
+## Two exports for two jobs
+
+**Editable draft** keeps the canvas `width` and `height`, with top-left-origin absolute-pixel boxes in `[x_min, y_min, x_max, y_max]` order. Save this format to keep editing.
+
+**Model prompt** uses center-origin absolute pixels in `[y_min, x_min, y_max, x_max]` order. It omits dimensions, following the upstream compiler. Use it with the same output width and height in your MOSS-Image generation settings.
+
+For example, on a 1536 by 1024 canvas, a cup occupying `[176, 224, 800, 864]` in the draft becomes `[-288, -592, 352, 32]` in the model prompt. Fractional draft edges are enclosed at pixel boundaries before the canvas center is subtracted.
+
+When importing a model prompt, choose its original canvas dimensions first. An editable draft carries its own dimensions. Resizing the editor canvas scales the composition when **Scale boxes with the canvas** is selected. With it off, pixel positions stay fixed; a resize that would put boxes outside the canvas is rejected. Changing dimensions in an upstream draft alone does not rescale its boxes.
+
+Known optional metadata, palettes and item tags survive import and export. Unknown fields and duplicate JSON keys produce an error instead of silently discarding content. Editor IDs stay out of both exports. Overlapping items are allowed.
+
+## Format reference
+
+The coordinate convention follows the official [MOSS-Image user guide](https://github.com/OpenMOSS/MOSS-Image/blob/52b87fca23acedc399d062d593bec388aee9926a/USERGUIDE.md#layout-prompts-experimental). Editable-draft validation and compilation follow the [layout reference](https://github.com/OpenMOSS/MOSS-Image/blob/52b87fca23acedc399d062d593bec388aee9926a/skills/moss-image-prompt-enhancer/references/layout.md) and [compiler](https://github.com/OpenMOSS/MOSS-Image/blob/52b87fca23acedc399d062d593bec388aee9926a/skills/moss-image-prompt-enhancer/scripts/compile_prompt.py) at revision `52b87fca23acedc399d062d593bec388aee9926a`.
+
+Dimensions must be positive integer multiples of 16. Resolution recommendations appear separately from format validation. The browser editor additionally requires dimensions within JavaScript's safe integer precision. Layout adherence and text rendering are properties of the image model and generation settings; this tool checks the layout representation.
+
+The visual editor accepts canvas edges up to 8192 px and imported layouts with up to 200 elements in files smaller than 1 MB. These are interactive-editor limits, separate from the upstream schema and your generation hardware's capacity.
+
+## Run and verify
+
+Serve this directory with a static HTTP server, then open `index.html`.
+
+```sh
+python3 -m http.server 8000
+```
+
+The test suite needs Node.js and Python 3, with no model weights or third-party Python packages:
+
+```sh
+node --test tests/layout.test.mjs
+python3 tests/reference_check.py
+```
+
+For the browser checks, install Playwright and Chromium, then run:
+
+```sh
+python3 -m pip install -r requirements-dev.txt
+python3 verify.py
+```
+
+The browser suite covers all three presets, exact JSON round trips and downloads, keyboard movement and resizing, real touch dragging and resizing, mobile layout, undo and redo, strict imports, literal HTML text, clipboard denial and outbound network isolation. It also accepts `--base-url` to check a hosted static deployment.
+
+The reference check compares 494 accepted and rejected draft inputs with an unchanged, hash-checked copy of the pinned upstream Python compiler. It covers non-square canvases, random layouts, edge rounding, Unicode, optional metadata, invalid geometry, duplicate keys and integer-literal dimensions. The separate module tests exercise import/export and editor resize behavior.
+
+## License
+
+Apache-2.0. See `LICENSE` and `NOTICE` for the upstream compiler reference and browser adaptation.

app.js

@@ -0,0 +1,439 @@
+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();

index.html

@@ -1,19 +1,68 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="A browser-only layout editor for MOSS-Image-Base. Place text and objects, then export the exact model prompt JSON.">
+  <meta property="og:title" content="MOSS Layout Studio by alphaBell">
+  <meta property="og:description" content="Draw text and object boxes. Export the exact layout JSON for MOSS-Image-Base.">
+  <meta property="og:image" content="https://huggingface.co/spaces/alphabell/MOSS-Layout-Studio/resolve/main/thumbnail.png">
+  <meta property="og:url" content="https://huggingface.co/spaces/alphabell/MOSS-Layout-Studio">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none'; object-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'">
+  <title>MOSS Layout Studio · alphaBell</title>
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <a class="skip" href="#stage">Skip to layout editor</a>
+  <header class="masthead">
+    <a class="brand" href="https://huggingface.co/alphabell" target="_blank" rel="noreferrer"><span class="bell" aria-hidden="true">aB</span>alphaBell <span class="brand-lab">APPLIED MODEL LAB</span></a>
+    <span class="local-badge"><span aria-hidden="true"></span> Browser only. Your draft stays here.</span>
+  </header>
+  <main>
+    <section class="intro" aria-labelledby="title">
+      <div><p class="eyebrow">A SMALL TOOL FOR A BIG IMAGE MODEL</p><h1 id="title">MOSS Layout <span>Studio.</span></h1><p class="dek">Put the words where you want them. Draw a composition, then export the exact layout prompt for MOSS-Image-Base.</p></div>
+      <div class="intro-note"><span class="note-index">01 / COMPOSE</span><p>A layout sketch, not a generated image. MOSS-Image-Base layout control is experimental.</p><a href="https://github.com/OpenMOSS/MOSS-Image/blob/52b87fca23acedc399d062d593bec388aee9926a/USERGUIDE.md#layout-prompts-experimental" target="_blank" rel="noreferrer">Read the official format ↗</a></div>
+    </section>
+    <div class="workspace-toolbar"><div class="segmented" aria-label="Example layouts"><button type="button" data-example="poster" class="active">Travel poster</button><button type="button" data-example="cup">Ceramic campaign</button><button type="button" data-example="type">Type playground</button></div><div class="history"><button id="undo" type="button" title="Undo last edit" disabled>↶ <span>Undo</span></button><button id="redo" type="button" title="Redo last edit" disabled>↷ <span>Redo</span></button><button id="reset" type="button">Reset example</button></div></div>
+    <section class="workspace" aria-label="Layout workspace">
+      <aside class="panel setup" aria-labelledby="canvas-title">
+        <div class="panel-heading"><span class="section-number">01</span><h2 id="canvas-title">Canvas & scene</h2></div>
+        <div class="dimension-row"><label>Width, px<input id="canvas-width" type="number" min="16" max="8192" step="16" value="1024"></label><span aria-hidden="true">×</span><label>Height, px<input id="canvas-height" type="number" min="16" max="8192" step="16" value="1024"></label></div>
+        <p class="hint">Multiples of 16. Use these dimensions when you generate.</p>
+        <label class="check-row"><input id="scale-boxes" type="checkbox" checked> Scale boxes with the canvas</label><button id="apply-size" class="secondary full" type="button">Apply canvas size</button>
+        <label class="field-label">Overall scene<textarea id="scene-caption" rows="5"></textarea></label>
+        <div class="two-fields"><label>Composition<select id="canvas-kind"><option value="single">Single image</option><option value="multi_panel">Multiple panels</option><option value="collage">Collage</option></select></label><div class="genre-field"><label for="scene-meta">Medium / genre</label><div id="scene-tags" class="scene-tags" aria-label="Genre tags"></div><div class="tag-add"><input id="scene-meta" type="text" aria-describedby="meta-help" placeholder="Add a genre"><button id="add-meta" type="button" aria-label="Add genre tag">+</button></div></div></div><p class="hint" id="meta-help">Type a tag and press Enter. Remove a tag with its × button.</p>
+        <div class="layers-heading"><h3>Elements <span id="element-count">2</span></h3><div class="add-buttons"><button type="button" id="add-text">+ Text</button><button type="button" id="add-object">+ Object</button><button type="button" id="add-character">+ Character</button></div></div>
+        <div id="layers" class="layers" aria-label="Layout elements"></div>
+        <p class="hint keyboard-hint">Select a box. Arrow keys move it, Shift moves 10 px. Alt + arrows resize it. Numeric fields give exact control.</p>
+      </aside>
+      <section class="stage-panel" aria-label="Visual composition">
+        <div class="stage-top"><span id="canvas-readout">1024 × 1024 px</span><label class="check-row"><input id="show-grid" type="checkbox" checked> Grid</label></div>
+        <div class="stage-surround"><div id="stage" class="stage grid" role="group" aria-label="Layout canvas. Select an element to move or resize it."></div></div>
+        <div class="stage-bottom"><span><span class="dot text-dot"></span>Text <span class="dot object-dot"></span>Object <span class="dot character-dot"></span>Character</span><span>Schematic preview</span></div>
+        <div class="coordinate-note"><span class="coordinate-icon" aria-hidden="true">↗</span><p>You place boxes from the top left.<br><strong>We convert to centered [y₁, x₁, y₂, x₂].</strong></p></div>
+      </section>
+      <aside class="panel inspector" aria-labelledby="element-title"><div class="panel-heading"><span class="section-number">02</span><h2 id="element-title">Selected element</h2></div>
+        <div id="empty-selection" hidden>Select an element to edit its appearance and position.</div>
+        <div id="selection-fields"><label>Element type<select id="item-label"><option value="text">Text</option><option value="object">Object</option><option value="character">Character</option></select></label>
+          <label id="literal-field">Exact visible text<textarea id="item-text" rows="3" spellcheck="false"></textarea><span class="hint">Characters and line breaks are preserved. Unicode is welcome.</span></label>
+          <label>Appearance<textarea id="item-caption" rows="4"></textarea></label>
+          <div class="box-fields"><label>X, px<input id="box-x" type="number" min="0" step="1"></label><label>Y, px<input id="box-y" type="number" min="0" step="1"></label><label>Width, px<input id="box-w" type="number" min="1" step="1"></label><label>Height, px<input id="box-h" type="number" min="1" step="1"></label></div>
+          <div class="coord-card"><span>MODEL COORDINATES · YXYX</span><output id="centered-readout"></output></div>
+          <div class="item-actions"><button id="duplicate" type="button" class="secondary">Duplicate</button><button id="delete" type="button" class="danger">Remove</button></div>
+        </div>
+      </aside>
+    </section>
+    <p id="status" class="status" role="status" aria-live="polite">Ready to compose.</p>
+    <p id="layout-warning" class="layout-warning" hidden></p>
+    <section class="export-panel" aria-labelledby="export-title"><div class="export-intro"><span class="section-number">03</span><h2 id="export-title">Take it to MOSS.</h2><p>Save the editable draft, or copy the compiled JSON into MOSS-Image-Base’s prompt field. Set the same image dimensions in your generation tool.</p><p class="save-note">Drafts stay in memory. Download yours before closing this page.</p><div class="export-facts"><span>No account</span><span>No inference</span><span>No uploads</span></div></div>
+      <div class="export-code"><div class="code-tabs" role="tablist" aria-label="JSON format"><button type="button" id="tab-prompt" role="tab" aria-selected="true" aria-controls="json-output">Model prompt</button><button type="button" id="tab-draft" role="tab" aria-selected="false" aria-controls="json-output" tabindex="-1">Editable draft</button></div><p id="format-help" class="format-help">Centered pixels · yxyx · image dimensions stay in your generation settings</p><textarea id="json-output" readonly spellcheck="false" aria-label="Compiled MOSS model prompt"></textarea><div class="export-actions"><button id="copy" type="button" class="primary">Copy model prompt <span aria-hidden="true">↗</span></button><button id="download" type="button" class="secondary">Download JSON</button><label class="file-button secondary">Import draft<input id="import" type="file" accept=".json,application/json"></label></div></div>
+    </section>
+    <section class="how-it-works" aria-label="Using the exported layout"><article><span>1</span><div><h3>Compose in pixels</h3><p>Drag and resize boxes. Write the exact visible words and describe each element’s appearance.</p></div></article><article><span>2</span><div><h3>Copy the model prompt</h3><p>The editor compiles absolute xyxy boxes into MOSS’s centered yxyx format. Dimensions are omitted from the prompt.</p></div></article><article><span>3</span><div><h3>Generate, then compare</h3><p>Use the same canvas dimensions in MOSS-Image. The sketch describes intent; the model’s output may differ.</p></div></article></section>
+  </main>
+  <footer><div><strong>alphaBell</strong><p>Small tools. Useful experiments.</p></div><p>Independent tooling for OpenMOSS’s experimental layout format.<br>Source checked against <a href="https://github.com/OpenMOSS/MOSS-Image/tree/52b87fca23acedc399d062d593bec388aee9926a/skills/moss-image-prompt-enhancer" target="_blank" rel="noreferrer">OpenMOSS’s compiler and format reference ↗</a></p><nav aria-label="Project links"><a href="https://github.com/alphabell-research/moss-layout-studio" target="_blank" rel="noreferrer">Source and checks ↗</a><a href="https://huggingface.co/OpenMOSS-Team/MOSS-Image-Base" target="_blank" rel="noreferrer">MOSS-Image-Base ↗</a><a href="https://huggingface.co/alphabell" target="_blank" rel="noreferrer">More from alphaBell ↗</a></nav></footer>
+  <script src="app.js" type="module"></script>
+</body>
 </html>

layout.mjs

@@ -0,0 +1,261 @@
+/*
+ * alphaBell MOSS Layout Studio geometry and schema helpers.
+ * Draft validation and export follow OpenMOSS/MOSS-Image compile_prompt.py,
+ * revision 52b87fca23acedc399d062d593bec388aee9926a (Apache-2.0).
+ * This browser implementation adds import, editing and local precision checks.
+ */
+
+export const SOURCE_REVISION = '52b87fca23acedc399d062d593bec388aee9926a';
+export const SOURCE_URL = `https://github.com/OpenMOSS/MOSS-Image/blob/${SOURCE_REVISION}/skills/moss-image-prompt-enhancer/scripts/compile_prompt.py`;
+
+export class LayoutError extends Error {
+  constructor(message, path = '') { super(path ? `${path}: ${message}` : message); this.name = 'LayoutError'; this.path = path; }
+}
+const own = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+const fail = (condition, message, path = '') => { if (!condition) throw new LayoutError(message, path); };
+const object = value => value !== null && typeof value === 'object' && !Array.isArray(value);
+const copy = value => JSON.parse(JSON.stringify(value));
+const NUMBER_SYNTAX = Symbol('JSON number syntax');
+
+function fields(value, allowed, required, path) {
+  fail(object(value), 'must be an object', path);
+  const extra = Object.keys(value).filter(key => !allowed.includes(key));
+  fail(!extra.length, `unknown fields ${extra.join(', ')}`, path);
+  const missing = required.filter(key => !own(value, key));
+  fail(!missing.length, `missing fields ${missing.join(', ')}`, path);
+}
+// Match Python str.strip(), including NEL and the information separators.
+const PYTHON_WHITESPACE = /^[\u0009-\u000d\u001c-\u0020\u0085\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000]*$/;
+function text(value, path) { fail(typeof value === 'string' && !PYTHON_WHITESPACE.test(value), 'must be nonempty text', path); }
+function strings(value, path) {
+  fail(Array.isArray(value), 'must be an array', path);
+  value.forEach((entry, i) => text(entry, `${path}[${i}]`));
+}
+export function validateDimensions(width, height) {
+  for (const [name, value] of [['width', width], ['height', height]]) {
+    fail(Number.isInteger(value) && value > 0 && value % 16 === 0, 'must be a positive integer multiple of 16', name);
+    fail(Number.isSafeInteger(value), 'exceeds the browser editor\'s safe integer precision', name);
+  }
+  return { width, height };
+}
+
+// Python's round(value, 9) uses the actual binary float and ties-to-even.
+// Integer arithmetic avoids the decimal boundary drift of Math.round/toFixed.
+function roundNine(value) {
+  if (value === 0) return value;
+  const buffer = new ArrayBuffer(8), view = new DataView(buffer);
+  view.setFloat64(0, Math.abs(value), false);
+  const bits = view.getBigUint64(0, false);
+  const exponent = Number((bits >> 52n) & 2047n);
+  const mantissa = (bits & ((1n << 52n) - 1n)) | (exponent ? 1n << 52n : 0n);
+  const shift = (exponent || 1) - 1075;
+  let numerator = mantissa * 1000000000n, denominator = 1n;
+  if (shift >= 0) numerator <<= BigInt(shift); else denominator <<= BigInt(-shift);
+  let quotient = numerator / denominator;
+  const remainder = numerator % denominator;
+  if (remainder * 2n > denominator || (remainder * 2n === denominator && quotient % 2n !== 0n)) quotient++;
+  return Number(`${value < 0 ? '-' : ''}${quotient}e-9`);
+}
+
+function checkedRect(rect, width, height, path = 'bbox') {
+  validateDimensions(width, height);
+  fail(Array.isArray(rect) && rect.length === 4, 'must contain four edges [x1, y1, x2, y2]', path);
+  fail(rect.every(value => typeof value === 'number' && Number.isFinite(value)), 'must contain four finite numbers', path);
+  const [x1, y1, x2, y2] = rect;
+  fail(x1 < x2 && y1 < y2, 'must have positive width and height', path);
+  fail(x1 >= 0 && y1 >= 0 && x2 <= width && y2 <= height, `exceeds the ${width} x ${height} canvas`, path);
+  return rect;
+}
+
+export function toCentralBox(rect, width, height) {
+  const edges = Array.isArray(rect) ? rect : [rect.x, rect.y, rect.x + rect.w, rect.y + rect.h];
+  const [x1, y1, x2, y2] = checkedRect(edges, width, height);
+  const result = [Math.floor(roundNine(y1)) - height / 2, Math.floor(roundNine(x1)) - width / 2,
+    Math.ceil(roundNine(y2)) - height / 2, Math.ceil(roundNine(x2)) - width / 2];
+  fail(result[0] < result[2] && result[1] < result[3], 'is too small at export precision', 'bbox');
+  return result;
+}
+export function fromCentralBox(box, width, height) {
+  validateDimensions(width, height);
+  fail(Array.isArray(box) && box.length === 4 && box.every(x => typeof x === 'number' && Number.isFinite(x)), 'must contain four finite numbers', 'bbox');
+  const [y1, x1, y2, x2] = box;
+  checkedRect([x1 + width / 2, y1 + height / 2, x2 + width / 2, y2 + height / 2], width, height);
+  return { x: x1 + width / 2, y: y1 + height / 2, w: x2 - x1, h: y2 - y1 };
+}
+export function toNormalizedRect(rect, width, height) {
+  checkedRect([rect.x, rect.y, rect.x + rect.w, rect.y + rect.h], width, height);
+  return { x: rect.x / width, y: rect.y / height, w: rect.w / width, h: rect.h / height };
+}
+export function fromNormalizedRect(rect, width, height) {
+  const right = rect.x + rect.w, bottom = rect.y + rect.h;
+  // Editing arithmetic can add a few ulps at a canvas edge. Snap only this
+  // normalized helper's tiny arithmetic spill, never imported JSON geometry.
+  const boundedRight = right > 1 && right <= 1 + 2 * Number.EPSILON ? 1 : right;
+  const boundedBottom = bottom > 1 && bottom <= 1 + 2 * Number.EPSILON ? 1 : bottom;
+  const x = rect.x * width, y = rect.y * height;
+  const result = { x, y, w: boundedRight * width - x, h: boundedBottom * height - y };
+  checkedRect([result.x, result.y, result.x + result.w, result.y + result.h], width, height);
+  return result;
+}
+
+function checkSummary(summary) {
+  fields(summary, ['caption', 'meta', 'canvas', 'palette'], ['caption'], 'summary');
+  text(summary.caption, 'summary.caption');
+  if (own(summary, 'canvas')) fail(['single', 'multi_panel', 'collage'].includes(summary.canvas), 'must be single, multi_panel or collage', 'summary.canvas');
+  for (const key of ['meta', 'palette']) if (own(summary, key)) strings(summary[key], `summary.${key}`);
+}
+function checkItems(items, width, height, centralized = false) {
+  fail(Array.isArray(items) && items.length > 0, 'must be a nonempty flat array', 'items');
+  return items.map((item, i) => {
+    const path = `items[${i}]`;
+    fields(item, ['label', 'caption', 'bbox', 'text', 'tags', 'palette'], ['label', 'caption', 'bbox'], path);
+    fail(['object', 'character', 'text'].includes(item.label), 'must be object, character or text', `${path}.label`);
+    text(item.caption, `${path}.caption`);
+    if (item.label === 'text') fail(own(item, 'text'), 'text items require literal text', path);
+    if (own(item, 'text')) text(item.text, `${path}.text`);
+    for (const key of ['tags', 'palette']) if (own(item, key)) strings(item[key], `${path}.${key}`);
+    try {
+      const bbox = centralized ? item.bbox : toCentralBox(checkedRect(item.bbox, width, height, `${path}.bbox`), width, height);
+      if (centralized) fromCentralBox(bbox, width, height);
+      return { ...copy(item), bbox: [...bbox] };
+    } catch (error) { throw new LayoutError(error.message.replace(/^bbox: /, ''), `${path}.bbox`); }
+  });
+}
+
+export function compileDraft(draft) {
+  const keys = ['width', 'height', 'bbox_coord_space', 'bbox_format', 'summary', 'items'];
+  fields(draft, keys, keys, 'Layout draft');
+  const { width, height } = draft;
+  for (const key of ['width', 'height']) if (draft[NUMBER_SYNTAX]?.[key] === 'float') throw new LayoutError('must use an integer JSON literal, without a decimal point or exponent', key);
+  validateDimensions(width, height);
+  fail(draft.bbox_coord_space === 'abs', 'must be abs', 'bbox_coord_space');
+  fail(draft.bbox_format === 'xyxy', 'must be xyxy', 'bbox_format');
+  checkSummary(draft.summary);
+  return { summary: copy(draft.summary), items: checkItems(draft.items, width, height), bbox_coord_space: 'abs_centralized', bbox_format: 'yxyx' };
+}
+
+export function validateDraft(draft) {
+  try {
+    compileDraft(draft);
+    const pixels = draft.width * draft.height;
+    const warnings = [];
+    if (pixels < 512 * 512 || pixels > 4 * 1024 * 1024) warnings.push('This canvas is outside the 0.25M to 4M pixel extrapolation range described in the upstream user guide. This is guidance, not a layout schema rule.');
+    return { valid: true, errors: [], warnings };
+  } catch (error) { return { valid: false, errors: [error.message], warnings: [] }; }
+}
+
+export function makeDraft(state) {
+  const summary = { caption: state.caption };
+  for (const key of ['meta', 'canvas', 'palette']) if (own(state, key) && state[key] !== undefined) summary[key] = copy(state[key]);
+  const items = state.items.map(item => {
+    const result = { label: item.label, caption: item.caption, bbox: [item.x, item.y, item.x + item.w, item.y + item.h] };
+    for (const key of ['text', 'tags', 'palette']) if (own(item, key) && item[key] !== undefined) result[key] = copy(item[key]);
+    return result;
+  });
+  const draft = { width: state.width, height: state.height, bbox_coord_space: 'abs', bbox_format: 'xyxy', summary, items };
+  compileDraft(draft);
+  return draft;
+}
+export function makeLayout(state) { return compileDraft(makeDraft(state)); }
+
+// Reject duplicate keys instead of letting JSON.parse silently discard content.
+export function parseStrictJSON(source) {
+  fail(typeof source === 'string', 'input must be JSON text');
+  let index = 0;
+  const skip = () => { while (/[\t\r\n ]/.test(source[index] || '\u0000')) index++; };
+  function string() {
+    const start = index++;
+    while (index < source.length) {
+      const char = source[index++];
+      if (char === '\\') { index++; continue; }
+      if (char === '"') return JSON.parse(source.slice(start, index));
+    }
+    throw new LayoutError('Unterminated JSON string');
+  }
+  function value() {
+    skip();
+    if (source[index] === '"') return string();
+    if (source[index] === '{') {
+      index++; skip(); const result = {}, seen = new Set();
+      if (source[index] === '}') { index++; return result; }
+      while (true) {
+        skip(); fail(source[index] === '"', 'Expected a JSON object key');
+        const key = string(); fail(!seen.has(key), `Duplicate JSON key: ${key}`); seen.add(key);
+        skip(); fail(source[index++] === ':', 'Expected a colon after JSON key');
+        skip(); const valueStart = index, child = value();
+        const token = source.slice(valueStart, index);
+        if (typeof child === 'number' && /[.eE]/.test(token)) {
+          if (!result[NUMBER_SYNTAX]) Object.defineProperty(result, NUMBER_SYNTAX, { value: Object.create(null) });
+          result[NUMBER_SYNTAX][key] = 'float';
+        }
+        Object.defineProperty(result, key, { value: child, enumerable: true, writable: true, configurable: true });
+        skip(); const separator = source[index++];
+        if (separator === '}') return result;
+        fail(separator === ',', 'Expected a comma or closing object brace');
+      }
+    }
+    if (source[index] === '[') {
+      index++; skip(); const result = [];
+      if (source[index] === ']') { index++; return result; }
+      while (true) {
+        result.push(value()); skip(); const separator = source[index++];
+        if (separator === ']') return result;
+        fail(separator === ',', 'Expected a comma or closing array bracket');
+      }
+    }
+    const match = /^(?:true|false|null|-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?)/.exec(source.slice(index));
+    fail(match, 'Expected a JSON value'); index += match[0].length;
+    const result = JSON.parse(match[0]);
+    fail(typeof result !== 'number' || Number.isFinite(result), 'JSON number exceeds browser numeric precision');
+    return result;
+  }
+  try { const result = value(); skip(); fail(index === source.length, 'Unexpected content after JSON value'); return result; }
+  catch (error) { if (error instanceof LayoutError) throw error; throw new LayoutError(`Invalid JSON: ${error.message}`); }
+}
+
+export function parseLayout(json, dimensions = {}) {
+  const source = typeof json === 'string' ? parseStrictJSON(json) : copy(json);
+  fail(object(source), 'Layout must be a JSON object');
+  let width, height, summary, items;
+  if (source.bbox_coord_space === 'abs') {
+    compileDraft(source);
+    ({ width, height, summary, items } = source);
+    items = items.map(item => ({ ...item, rect: { x: item.bbox[0], y: item.bbox[1], w: item.bbox[2] - item.bbox[0], h: item.bbox[3] - item.bbox[1] } }));
+  } else {
+    const keys = ['summary', 'items', 'bbox_coord_space', 'bbox_format'];
+    fields(source, keys, keys, 'Compiled layout');
+    fail(source.bbox_coord_space === 'abs_centralized', 'must be abs or abs_centralized', 'bbox_coord_space');
+    fail(source.bbox_format === 'yxyx', 'must be yxyx for a compiled layout', 'bbox_format');
+    ({ width, height } = dimensions); validateDimensions(width, height);
+    checkSummary(source.summary); summary = source.summary;
+    items = checkItems(source.items, width, height, true).map(item => ({ ...item, rect: fromCentralBox(item.bbox, width, height) }));
+  }
+  const state = { width, height, caption: summary.caption, items: [] };
+  for (const key of ['meta', 'canvas', 'palette']) if (own(summary, key)) state[key] = copy(summary[key]);
+  state.items = items.map((item, index) => {
+    const result = { id: `item-${index + 1}`, label: item.label, caption: item.caption, ...item.rect };
+    for (const key of ['text', 'tags', 'palette']) if (own(item, key)) result[key] = copy(item[key]);
+    return result;
+  });
+  return state;
+}
+
+// This is an editor interaction policy, not an upstream compiler transformation.
+export function clampRect(rect, width, height, minimum = 1) {
+  validateDimensions(width, height);
+  fail([rect.x, rect.y, rect.w, rect.h, minimum].every(Number.isFinite), 'Editor rectangle must contain finite numbers');
+  fail(minimum > 0, 'Editor minimum size must be positive');
+  const w = Math.min(width, Math.max(Math.min(minimum, width), rect.w));
+  const h = Math.min(height, Math.max(Math.min(minimum, height), rect.h));
+  return { x: Math.max(0, Math.min(width - w, rect.x)), y: Math.max(0, Math.min(height - h, rect.y)), w, h };
+}
+export function resizeLayout(state, width, height, { scale = true } = {}) {
+  makeDraft(state); validateDimensions(width, height);
+  const result = copy(state);
+  result.items = state.items.map(item => ({ ...copy(item), ...(scale
+    ? fromNormalizedRect(toNormalizedRect(item, state.width, state.height), width, height)
+    : clampRect(item, width, height)) }));
+  result.width = width; result.height = height;
+  makeDraft(result);
+  return result;
+}

requirements-dev.txt

@@ -0,0 +1 @@
+playwright==1.64.0

style.css

@@ -1,28 +1,2 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}
+:root{--ink:#22251e;--muted:#686a5e;--paper:#faf8ee;--line:#d8d9cd;--green:#dfff78;--pink:#ff9bb1;--blue:#9bc5ff;--card:#fffdf5;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button{border:1px solid var(--line);background:transparent;border-radius:5px;padding:9px 12px;color:inherit}button:hover:not(:disabled),.file-button:hover{border-color:var(--ink);background:#f1f0e5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3068d5}a{color:inherit;text-underline-offset:3px}input,select,textarea{border:1px solid #cccfc0;border-radius:4px;padding:10px 11px;background:var(--card);color:var(--ink);min-width:0;width:100%}textarea{resize:vertical;line-height:1.5}label{display:block;font-size:12px;font-weight:700;line-height:1.5}label input,label select,label textarea{margin-top:5px}label .hint{display:block}input[type=checkbox]{width:15px;height:15px;accent-color:var(--ink);margin:0}.check-row{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:400}.hint{font-size:11px;line-height:1.6;color:var(--muted);font-weight:400;margin:7px 0 13px}.skip{position:fixed;top:-100px;left:16px;background:var(--green);padding:14px;z-index:100}.skip:focus{top:12px}.masthead{height:81px;display:flex;align-items:center;justify-content:space-between;max-width:1552px;margin:auto;padding:0 32px;border-bottom:1px solid var(--line)}.brand{font-size:21px;letter-spacing:-.8px;text-decoration:none;display:flex;align-items:center;gap:10px;font-weight:800}.bell{display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;letter-spacing:-3px;padding-right:4px;background:var(--ink);color:var(--green);width:34px;height:34px;border-radius:50%;font-size:23px}.brand-lab{font-size:9px;letter-spacing:1.4px;margin-left:13px;font-weight:500;color:var(--muted)}.local-badge{font-size:11px;display:flex;align-items:center;gap:7px}.local-badge>span{width:7px;height:7px;border-radius:50%;background:#82ad35}main{max-width:1552px;margin:auto;padding:0 32px}.intro{display:flex;justify-content:space-between;gap:48px;align-items:end;padding:48px 0 38px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;margin:0 0 15px}h1{font-size:clamp(38px,4vw,64px);font-weight:500;letter-spacing:-3px;margin:0 0 17px;line-height:1}h1 span{font-family:Georgia,'Times New Roman',serif;font-style:italic}.dek{font-size:15px;line-height:1.7;max-width:590px;margin:0;color:#52564b}.intro-note{width:245px;flex-shrink:0;border-left:1px solid var(--line);padding:0 0 0 20px}.note-index{font-size:9px;letter-spacing:1.4px;font-weight:700}.intro-note p{font-size:12px;line-height:1.6;margin:8px 0}.intro-note a{font-size:10px}.workspace-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;border-top:1px solid var(--line);padding:15px 0}.segmented{display:flex;gap:3px;background:#efeee4;padding:3px;border-radius:6px}.segmented button{border:0;font-size:11px;padding:9px 13px}.segmented button.active{background:var(--ink);color:var(--paper);box-shadow:0 1px 3px #0002}.history{display:flex;gap:7px;font-size:10px}.history button{padding:7px 10px}.workspace{border:1px solid var(--line);border-radius:7px;display:grid;grid-template-columns:265px minmax(250px,1fr) 246px;overflow:hidden;background:var(--card)}.panel{padding:20px 18px}.panel-heading{display:flex;align-items:center;gap:9px;margin:0 0 20px}.section-number{font-family:monospace;font-size:10px;font-weight:700;background:var(--green);border-radius:3px;padding:5px}h2{font-size:15px;font-weight:600;letter-spacing:-.3px;margin:0}.dimension-row{display:grid;grid-template-columns:1fr 12px 1fr;gap:5px;align-items:end}.dimension-row>span{padding-bottom:12px;color:var(--muted);text-align:center}.dimension-row input{font-size:13px;padding:8px}.full{width:100%;margin:11px 0 23px}.secondary{background:#fffdf5;font-size:11px}.field-label{margin-bottom:16px}.two-fields{display:grid;gap:12px}.two-fields label{font-size:11px}.two-fields select,.two-fields input{font-size:11px;padding:8px}.layers-heading{border-top:1px solid var(--line);padding-top:18px;margin-top:19px}h3{font-size:12px;margin:0 0 12px}.layers-heading h3 span{font-size:10px;color:var(--muted);padding-left:5px}.add-buttons{display:flex;gap:5px;flex-wrap:wrap}.add-buttons button{font-size:10px;padding:7px 8px}.layers{display:grid;gap:5px;margin-top:12px}.layer{display:flex;align-items:center;gap:8px;width:100%;font-size:11px;max-width:100%;text-align:left;padding:10px 8px;background:#f4f3e9;border-color:transparent}.layer[aria-pressed=true]{border-color:var(--ink);background:#fffdf5}.layer-label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1}.layer-type{font-size:8px;color:var(--muted);text-transform:uppercase}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:3px}.text-dot{background:#c37a94}.object-dot{background:#719dde}.character-dot{background:#a3ba59}.keyboard-hint{padding-top:6px;margin-bottom:0}.stage-panel{background:#e9ebe2;border-left:1px solid var(--line);border-right:1px solid var(--line);padding:16px 20px 21px;display:flex;flex-direction:column;justify-content:flex-start;min-width:0}.stage-top{display:flex;justify-content:space-between;align-items:center;font-family:monospace;font-size:10px;margin-bottom:18px}.stage-surround{display:flex;justify-content:center;align-items:center;min-height:360px;flex:1}.stage{background-color:#fffdf5;position:relative;width:100%;aspect-ratio:1;box-shadow:0 3px 15px #343c1d19;touch-action:none;overflow:hidden;border:1px solid #bfc3b4;isolation:isolate;max-height:620px}.stage.grid{background-image:linear-gradient(#84917c19 1px,transparent 1px),linear-gradient(90deg,#84917c19 1px,transparent 1px);background-size:6.25% 6.25%}.layout-box{position:absolute;display:block;appearance:none;border:1px solid #be7290;background:#ff9bb12d;border-radius:0;padding:0;text-align:center;touch-action:none;overflow:visible;color:#522f3b;user-select:none;cursor:grab;min-width:0;min-height:0}.layout-box:hover:not(:disabled){background:#ff9bb146;border-color:#9b4567}.layout-box.object{border-color:#678bc0;background:#9bc5ff36;color:#38537e}.layout-box.character{border-color:#91a950;background:#dfff7838;color:#56652a}.layout-box[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px;z-index:3}.layout-box.dragging{cursor:grabbing}.box-content{display:flex;align-items:center;justify-content:center;position:absolute;inset:6px;overflow:hidden;font-family:Georgia,'Times New Roman',serif;line-height:1.12;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}.layout-box:not(.text) .box-content{font-family:Arial,sans-serif;font-size:12px;padding:8px;line-height:1.5}.box-number{position:absolute;left:-1px;top:-17px;font:9px monospace;letter-spacing:.4px;background:#fffdf5e8;border:1px solid currentColor;border-bottom:0;padding:2px 4px;line-height:12px;pointer-events:none;white-space:nowrap}.resize-handle{position:absolute;right:-8px;bottom:-8px;width:16px;height:16px;cursor:nwse-resize;background:var(--ink);border:3px solid #fffdf5;box-shadow:0 0 0 1px var(--ink);display:none;touch-action:none;z-index:5}.layout-box[aria-pressed=true] .resize-handle{display:block}.stage-bottom{display:flex;justify-content:space-between;gap:5px;font-size:9px;color:var(--muted);margin:17px 0 0;line-height:1.7}.stage-bottom .dot{width:6px;height:6px;margin-left:5px}.stage-bottom .dot:first-child{margin-left:0}.coordinate-note{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}.coordinate-note p{font-size:10px;line-height:1.7;margin:0;color:var(--muted)}.coordinate-note strong{font-weight:500;color:var(--ink)}.coordinate-icon{border:1px solid #b6bca9;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:17px}.inspector label{margin-bottom:18px;font-size:11px}.inspector input,.inspector select,.inspector textarea{font-size:12px}.inspector textarea{font-size:12px}.box-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.box-fields label{margin-bottom:12px}.box-fields input{padding:8px}.coord-card{background:#eff2e4;border:1px solid #d8ddc9;padding:12px 10px;margin:7px 0 19px}.coord-card>span{display:block;font-size:8px;font-weight:700;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.coord-card output{font:11px monospace;white-space:nowrap}.item-actions{display:flex;justify-content:space-between;gap:8px}.danger{color:#9f3e46;border-color:#e4c7c5;font-size:10px}.status{font-size:11px;line-height:1.6;min-height:18px;margin:11px 0 30px;color:var(--muted)}.status.error{color:#a53139;font-weight:700}.export-panel{display:grid;grid-template-columns:265px 1fr;background:var(--ink);border-radius:7px;color:var(--paper);overflow:hidden}.export-intro{padding:27px 25px}.export-intro h2{font-family:Georgia,serif;font-size:29px;font-weight:400;letter-spacing:-1px;margin:15px 0}.export-intro .section-number{color:var(--ink)}.export-intro p{font-size:12px;line-height:1.75;color:#d1d5c7}.export-facts{display:flex;gap:6px;flex-wrap:wrap;font-size:9px;margin-top:22px}.export-facts span{border:1px solid #646b56;padding:5px 7px;border-radius:3px}.export-code{padding:21px 24px 24px;border-left:1px solid #4a5141;min-width:0}.code-tabs{display:flex;gap:17px;border-bottom:1px solid #555c4a}.code-tabs button{border:0;border-radius:0;color:#b9beaf;font-size:12px;padding:8px 0 12px}.code-tabs button[aria-selected=true]{border-bottom:2px solid var(--green);color:var(--green)}.code-tabs button:hover:not(:disabled){background:transparent;color:#fff}.format-help{color:#b9beaf;font-size:10px;line-height:1.6;margin:13px 0}.export-code textarea{background:#1b2017;color:#e3e9d7;font:11px/1.55 monospace;height:237px;border-color:#4b5440;white-space:pre;padding:14px;tab-size:2}.export-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.primary{background:var(--green);color:var(--ink);border-color:var(--green);font-size:11px;font-weight:700;padding:11px 15px}.primary:hover:not(:disabled){background:#efffb2}.primary span{margin-left:14px}.export-actions .secondary{background:transparent;border-color:#747c65;color:var(--paper);font-size:10px;padding:11px 13px}.export-actions .secondary:hover{color:var(--ink);background:var(--paper)}.file-button{cursor:pointer;display:inline-block;border:1px solid;border-radius:5px;line-height:normal;font-weight:400}.file-button input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.file-button:focus-within{outline:3px solid #8caeeb;outline-offset:4px}.how-it-works{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:34px 0 49px}.how-it-works article{display:flex;gap:11px}.how-it-works article>span{font:11px monospace;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.how-it-works h3{font-size:12px;margin:4px 0 8px}.how-it-works p{font-size:11px;line-height:1.8;color:var(--muted);margin:0;max-width:340px}footer{max-width:1488px;margin:0 auto;border-top:1px solid var(--line);padding:27px 0 35px;display:flex;justify-content:space-between;gap:30px;font-size:10px;line-height:1.8;color:var(--muted)}footer strong{font-size:16px;letter-spacing:-.5px;color:var(--ink)}footer p{margin:4px 0}footer>p{margin-top:0}footer nav{display:flex;flex-direction:column;align-items:end;gap:3px}[hidden]{display:none!important}@media(min-width:1600px){.workspace{grid-template-columns:285px minmax(250px,1fr) 265px}}@media(max-width:1140px){.workspace{grid-template-columns:235px minmax(230px,1fr) 220px}.panel{padding:18px 14px}.stage-panel{padding:16px 14px}.brand-lab{display:none}main{padding:0 22px}.masthead{padding:0 22px}footer{margin:0 22px}.stage-surround{min-height:280px}.export-panel{grid-template-columns:235px 1fr}}@media(max-width:900px){.workspace{grid-template-columns:230px minmax(240px,1fr)}.inspector{grid-column:1/-1;border-top:1px solid var(--line)}.inspector #selection-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 20px}.inspector #item-caption{min-height:110px}.inspector .box-fields{grid-column:2;grid-row:2}.inspector .coord-card{grid-column:3;grid-row:2}.inspector .item-actions{grid-column:1;grid-row:2;align-items:start}.inspector .panel-heading{margin-bottom:15px}.inspector label{margin-bottom:12px}.inspector label:first-child{grid-column:1}.stage-panel{border-right:0}.stage-surround{min-height:360px}.intro{gap:25px}.intro-note{width:215px}h1{font-size:48px}.how-it-works{gap:18px}.export-intro{padding:24px 20px}}@media(max-width:650px){.masthead{height:68px;padding:0 16px}.local-badge{font-size:9px;max-width:138px;line-height:1.5}.local-badge>span{flex-shrink:0}.brand{font-size:19px;gap:7px}main{padding:0 14px}.intro{display:block;padding:32px 0 25px}.eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:43px;letter-spacing:-2.3px;margin-bottom:14px}.dek{font-size:13px;line-height:1.65}.intro-note{border:0;padding:12px 0 0;width:auto}.intro-note .note-index{display:none}.intro-note p{font-size:10px;margin:0}.intro-note a{font-size:9px;display:inline-block;margin-top:3px}.workspace-toolbar{align-items:start;flex-direction:column;gap:10px;padding:11px 0}.segmented{width:100%;justify-content:space-between}.segmented button{font-size:10px;padding:8px 10px}.history{align-self:end}.history button{font-size:9px;padding:5px 9px}.workspace{display:flex;flex-direction:column}.setup{order:2}.stage-panel{order:1;border:0;border-bottom:1px solid var(--line);padding:14px 18px 18px}.stage-surround{min-height:0;flex:none}.stage{max-height:520px}.stage-top{margin-bottom:18px}.coordinate-note{margin-top:14px}.stage-bottom{font-size:8px}.panel{padding:20px 17px}.setup{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.setup>.panel-heading{grid-column:1/-1}.setup>.dimension-row{grid-column:1}.setup>.hint{grid-column:1}.setup>.check-row{grid-column:1}.setup>.full{grid-column:1}.setup>.field-label{grid-column:2;grid-row:2/6}.setup>.two-fields{grid-column:1/-1;grid-template-columns:1fr 1fr}.setup>#meta-help{grid-column:2}.setup>.layers-heading,.setup>.layers,.setup>.keyboard-hint{grid-column:1/-1}.setup>.layers-heading{margin-top:8px}.setup>.layers{grid-template-columns:1fr 1fr}.setup .full{margin:8px 0 17px;font-size:10px}.setup>.field-label textarea{height:176px;font-size:11px}.dimension-row input{font-size:12px}.dimension-row label{font-size:10px}.inspector{order:3}.inspector #selection-fields{grid-template-columns:1fr 1fr;gap:0 15px}.inspector #literal-field{grid-column:2;grid-row:1/3}.inspector label:has(#item-caption){grid-column:1;grid-row:2/4}.inspector #selection-fields>.box-fields{grid-column:2;grid-row:3/5;align-content:start}.inspector .coord-card{grid-column:1/-1;grid-row:5}.inspector .item-actions{grid-column:1/-1;grid-row:6}.inspector #item-caption{height:135px}.inspector #item-text{height:110px}.coord-card output{font-size:12px}.status{margin:10px 0 22px;font-size:10px}.export-panel{display:block}.export-intro{padding:23px 20px 17px}.export-intro h2{font-size:28px;display:inline-block;margin:0 0 0 10px}.export-intro p{font-size:11px;margin:13px 0}.export-facts{margin-top:13px}.export-code{padding:14px 17px 20px;border-left:0;border-top:1px solid #4a5141}.export-code textarea{height:245px;font-size:10px}.export-actions{gap:6px}.export-actions button,.export-actions .secondary{font-size:9px;padding:10px 11px}.primary span{margin-left:5px}.how-it-works{display:block;margin:27px 3px 34px}.how-it-works article{margin-bottom:20px}.how-it-works p{max-width:none}.how-it-works h3{font-size:12px;margin-top:3px}footer{margin:0 17px;padding:23px 0 30px;display:block;font-size:9px}footer>p{margin:16px 0}footer nav{align-items:start}.box-number{font-size:8px;top:-16px}.layout-box:not(.text) .box-content{font-size:9px;padding:3px}.resize-handle{width:22px;height:22px;right:-11px;bottom:-11px}}
+.scene-tags{display:flex;gap:4px;flex-wrap:wrap;margin:5px 0}.tag-chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;background:#edf0e0;border:1px solid #d4dbc3;border-radius:4px;font-size:9px;padding-left:6px}.tag-chip>span{overflow-wrap:anywhere;white-space:pre-wrap;min-width:0}.tag-chip>button{font-size:13px;padding:0 5px;border:0;line-height:22px}.tag-add{display:flex;gap:5px}.tag-add input{font-size:11px;padding:8px;width:100%}.tag-add button{padding:4px 9px;font-size:15px}.genre-field>label{font-size:11px}.layout-warning{font-size:11px;line-height:1.7;color:#725520;background:#fff0c5;border:1px solid #dbc685;border-radius:4px;padding:10px 13px;margin:-16px 0 25px}.layout-box.object:hover:not(:disabled){background:#9bc5ff4f;border-color:#4676b9}.layout-box.character:hover:not(:disabled){background:#dfff7852;border-color:#738f2c}

tests/bridge.mjs

@@ -0,0 +1,6 @@
+import { createInterface } from 'node:readline';
+import { compileDraft, parseStrictJSON } from '../layout.mjs';
+for await (const line of createInterface({ input:process.stdin })) {
+  try { console.log(JSON.stringify({ok:true,result:compileDraft(parseStrictJSON(line))})); }
+  catch(error) { console.log(JSON.stringify({ok:false,error:error.message})); }
+}

tests/layout.test.mjs

@@ -0,0 +1,78 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { compileDraft, makeDraft, makeLayout, parseLayout, parseStrictJSON, toCentralBox, fromCentralBox, resizeLayout, validateDraft, clampRect } from '../layout.mjs';
+
+const draft = () => ({ width: 1536, height: 1024, bbox_coord_space: 'abs', bbox_format: 'xyxy', summary: { caption: 'A ceramic campaign.', meta: ['poster'], canvas: 'single', palette: ['ivory'] }, items: [{ label: 'text', caption: 'Dark-green lettering.', text: '把日常，过成诗。\n"MOSS" 🪴', bbox: [928, 272, 1408, 448], tags: ['title'], palette: ['green'] }] });
+
+test('official landscape example converts to centered yxyx without content loss or mutation', () => {
+  const source = draft(), before = structuredClone(source), out = compileDraft(source);
+  assert.deepEqual(out.items[0].bbox, [-240, 160, -64, 640]);
+  assert.deepEqual(out.summary, source.summary); assert.equal(out.items[0].text, source.items[0].text);
+  assert.deepEqual(out.items[0].tags, ['title']); assert.deepEqual(out.items[0].palette, ['green']);
+  assert.equal(out.bbox_coord_space, 'abs_centralized'); assert.equal(out.bbox_format, 'yxyx');
+  assert.equal('width' in out, false); assert.equal('height' in out, false); assert.deepEqual(source, before);
+});
+test('portrait, fractions and compiler precision enclose before center subtraction', () => {
+  assert.deepEqual(toCentralBox([0, 0, 768, 1344], 768, 1344), [-672, -384, 672, 384]);
+  assert.deepEqual(toCentralBox([10.9, 20.1, 100.01, 200.99], 768, 1344), [-652, -374, -471, -283]);
+  assert.deepEqual(toCentralBox([1.00000000001, 2, 100, 200], 768, 1344), [-670, -383, -472, -284]);
+  assert.deepEqual(toCentralBox([0, 0, 99.99999999999, 199.99999999999], 768, 1344), [-672, -384, -472, -284]);
+});
+test('draft and compiled round trips retain optional creative fields and literal Unicode', () => {
+  const source = draft(), state = parseLayout(JSON.stringify(source));
+  assert.deepEqual(makeDraft(state), source);
+  assert.deepEqual(makeLayout(parseLayout(JSON.stringify(compileDraft(source)), { width: 1536, height: 1024 })), compileDraft(source));
+  assert.equal('id' in makeDraft(state).items[0], false);
+  assert.equal(state.items[0].text, source.items[0].text);
+});
+test('compiled import requires dimensions and honors non-square axis order', () => {
+  const source = compileDraft(draft()); assert.throws(() => parseLayout(JSON.stringify(source)), /width/);
+  const r = fromCentralBox([-288, -592, 352, 32], 1536, 1024);
+  assert.deepEqual(r, { x: 176, y: 224, w: 624, h: 640 });
+});
+test('invalid numeric geometry, zero area and out-of-canvas boxes are rejected', () => {
+  for (const box of [[-1,0,100,100], [0,0,1537,100], [100,0,50,100], [0,0,0,100], [0,0,100], [true,0,100,100], [0,0,NaN,100], [0,0,Infinity,100], [1,0,1.00000000001,100]]) {
+    const source = draft(); source.items[0].bbox = box; assert.throws(() => compileDraft(source));
+  }
+  const source = draft(); source.width = 1535; assert.equal(validateDraft(source).valid, false);
+});
+test('unknown fields, nested layouts and blank content cannot be silently lost', () => {
+  const modifications = [s=>s.other='unknown', s=>s.items[0].children=[], s=>s.items[0].id='editor-id', s=>s.summary.meta=[''], s=>s.summary.caption=' ', s=>s.items[0].text='', s=>s.items=[], s=>s.items[0].label='face', s=>s.summary.canvas='other'];
+  for (const modify of modifications) { const source = draft(); modify(source); assert.throws(() => compileDraft(source)); }
+  const source = draft(); delete source.items[0].text; assert.throws(() => compileDraft(source), /literal text/);
+});
+test('strict import rejects duplicate keys including escaped keys and invalid JSON constants', () => {
+  for (const value of ['{"x":1,"x":2}', '{"x":1,"\\u0078":2}', '{"a":{"x":1,"x":2}}', '[NaN]', '{"x":Infinity}', '{"x":1e400}', '{"x":01}', '{"x":1,}', 'null trailing', '"unterminated']) assert.throws(() => parseStrictJSON(value));
+  assert.deepEqual(parseStrictJSON('{"__proto__":{"polluted":true}}'), JSON.parse('{"__proto__":{"polluted":true}}'));
+  assert.equal({}.polluted, undefined);
+});
+test('width and height retain JSON integer-literal semantics', () => {
+  const source = JSON.stringify(draft());
+  assert.throws(() => parseLayout(source.replace('"width":1536', '"width":1536.0')), /integer JSON literal/);
+  assert.throws(() => parseLayout(source.replace('"height":1024', '"height":1.024e3')), /integer JSON literal/);
+  assert.equal(parseLayout(source).width, 1536);
+});
+test('resolution recommendations produce warnings and are separate from accepted schema', () => {
+  const source = draft(); source.width = source.height = 8192;
+  const result = validateDraft(source); assert.equal(result.valid, true); assert.equal(result.warnings.length, 1);
+});
+test('text validation follows Python Unicode whitespace without normalization', () => {
+  for (const space of ['\u0085', '\u001c', '\u2007', '\u3000']) {
+    const source = draft(); source.summary.caption = space; assert.equal(validateDraft(source).valid, false);
+  }
+  const source = draft(); source.summary.caption = '\ufeff';
+  assert.equal(compileDraft(source).summary.caption, '\ufeff');
+});
+test('overlap remains permitted and exact text, tags and arrays retain order', () => {
+  const source = draft(); source.items.push({ ...structuredClone(source.items[0]), text: 'Second\nline' });
+  assert.deepEqual(compileDraft(source).items.map(x=>x.bbox), [[-240,160,-64,640],[-240,160,-64,640]]);
+  assert.deepEqual(makeDraft(parseLayout(JSON.stringify(source))), source);
+});
+test('explicit scaling versus local clamp policy preserves inputs and enforces edit bounds', () => {
+  const state = parseLayout(JSON.stringify(draft())), before = structuredClone(state);
+  const half = resizeLayout(state, 768, 512);
+  assert.equal(half.items[0].x, state.items[0].x/2); assert.equal(half.items[0].h, state.items[0].h/2);
+  const clamped = resizeLayout(state, 768, 512, { scale:false });
+  assert.equal(clamped.items[0].x+clamped.items[0].w,768); assert.equal(clamped.items[0].y+clamped.items[0].h,448);
+  assert.deepEqual(state,before); assert.deepEqual(clampRect({x:-9,y:999,w:50,h:50},1024,1024), {x:0,y:974,w:50,h:50});
+});

tests/reference_check.py

@@ -0,0 +1,96 @@
+"""Compare browser compilation with the pinned, unmodified OpenMOSS compiler.
+
+No network, model weights, inference runtime or credentials are needed.
+This tests accepted layout drafts and compiled output, not generated images.
+"""
+import copy
+import hashlib
+import importlib.util
+import json
+from pathlib import Path
+import random
+import subprocess
+
+ROOT = Path(__file__).resolve().parent.parent
+REFERENCE = ROOT / 'tests/vendor/compile_prompt.py'
+EXPECTED_SHA256 = '1d75780cf9f22f9ebed1a33d8100158f8d73ebfe59a5d435c1cc8c8e1374a8a3'
+assert hashlib.sha256(REFERENCE.read_bytes()).hexdigest() == EXPECTED_SHA256
+spec = importlib.util.spec_from_file_location('upstream_compile_prompt', REFERENCE)
+upstream = importlib.util.module_from_spec(spec)
+spec.loader.exec_module(upstream)
+
+BASE = {'width': 1536, 'height': 1024, 'bbox_coord_space': 'abs', 'bbox_format': 'xyxy',
+        'summary': {'caption': 'A ceramic campaign.', 'meta': ['poster'], 'canvas': 'single', 'palette': ['ivory']},
+        'items': [{'label': 'text', 'caption': 'Green type.', 'text': '把日常，过成诗。\n"MOSS" 🪴',
+                   'bbox': [928, 272, 1408, 448], 'tags': ['title'], 'palette': ['green']}]}
+cases = []
+
+def add(name, source):
+    cases.append((name, json.dumps(source, ensure_ascii=False, allow_nan=False, separators=(',', ':'))))
+
+add('landscape with Unicode and optional metadata', BASE)
+rng = random.Random(20261023)
+for i in range(400):
+    source = copy.deepcopy(BASE)
+    width, height = rng.choice([(1536, 1024), (768, 1344), (1024, 1024), (512, 512), (2048, 2048)])
+    source['width'], source['height'] = width, height
+    source['items'] = []
+    for j in range(rng.randint(1, 5)):
+        x1, x2 = sorted(rng.uniform(0, width) for _ in range(2))
+        y1, y2 = sorted(rng.uniform(0, height) for _ in range(2))
+        source['items'].append({'label': rng.choice(['object', 'character', 'text']), 'caption': 'A deliberately overlapping layer.', 'text': f'行 {i}\n🌿 {j}', 'bbox': [x1, y1, x2, y2]})
+    add(f'random layout {i}', source)
+
+# Fractional coordinates around integer edges exercise Python round(..., 9).
+for edge in [0, 1, 2, 99, 768, 1023]:
+    for offset in [-1e-8, -1e-9, -5e-10, -1e-11, 0, 1e-11, 5e-10, 1e-9, 1e-8]:
+        source = copy.deepcopy(BASE)
+        x1 = max(0, edge + offset)
+        source['items'][0]['bbox'] = [x1, 0.0009765625, min(1536, x1 + 10), 100.0009765625]
+        add(f'precision edge {edge} {offset}', source)
+
+mutations = [
+    lambda d: d.update(width=1535), lambda d: d.update(width=True), lambda d: d.update(width=0),
+    lambda d: d.update(bbox_format='yxyx'), lambda d: d.update(bbox_coord_space='relative'),
+    lambda d: d.update(extra='unknown'), lambda d: d.update(items=[]),
+    lambda d: d['summary'].update(caption=' '), lambda d: d['summary'].update(meta=[None]),
+    lambda d: d['summary'].update(canvas='unknown'), lambda d: d['summary'].update(id=1),
+    lambda d: d['items'][0].update(bbox=[0, 0, 0, 1]),
+    lambda d: d['items'][0].update(bbox=[0, 0, 1537, 100]),
+    lambda d: d['items'][0].update(bbox=[False, 0, 100, 100]),
+    lambda d: d['items'][0].update(bbox=[1, 0, 1.00000000001, 100]),
+    lambda d: d['items'][0].update(label='face'), lambda d: d['items'][0].update(text=''),
+    lambda d: d['items'][0].pop('text'), lambda d: d['items'][0].update(tags=[3]),
+    lambda d: d['items'][0].update(children=[]), lambda d: d['items'][0].update(id='ui-id'),
+]
+for i, mutate in enumerate(mutations):
+    source = copy.deepcopy(BASE); mutate(source); add(f'invalid draft {i}', source)
+for point in [0x09, 0x1c, 0x20, 0x85, 0xa0, 0x1680, 0x2000, 0x2007, 0x2028, 0x202f, 0x205f, 0x3000, 0xfeff]:
+    source = copy.deepcopy(BASE); source['summary']['caption'] = chr(point)
+    add(f'Unicode whitespace U+{point:04X}', source)
+base_json = json.dumps(BASE, ensure_ascii=False, separators=(',', ':'))
+cases.extend([
+    ('float width literal', base_json.replace('"width":1536', '"width":1536.0')),
+    ('exponent height literal', base_json.replace('"height":1024', '"height":1.024e3')),
+    ('duplicate root key', base_json.replace('"width":1536', '"width":1536,"width":1024')),
+    ('escaped duplicate key', base_json.replace('"width":1536', '"width":1536,"\\u0077idth":1024')),
+    ('duplicate nested key', base_json.replace('"canvas":"single"', '"canvas":"single","canvas":"collage"')),
+])
+
+proc = subprocess.run(['node', str(ROOT / 'tests/bridge.mjs')], input='\n'.join(raw for _, raw in cases)+'\n', text=True, capture_output=True, check=True)
+actual = [json.loads(line) for line in proc.stdout.splitlines()]
+assert len(actual) == len(cases), (len(actual), len(cases))
+errors = []; accepted = rejected = 0
+for (name, raw), result in zip(cases, actual):
+    try:
+        source = json.loads(raw, object_pairs_hook=upstream.unique_object, parse_constant=upstream.reject_constant)
+        expected = json.loads(upstream.compile_prompt(source)); ok = True
+    except (ValueError, TypeError, OverflowError):
+        ok = False; expected = None
+    accepted += ok; rejected += not ok
+    if ok != result['ok'] or (ok and expected != result.get('result')):
+        errors.append({'name': name, 'expected_ok': ok, 'expected': expected, 'actual': result})
+report = {'source_revision': '52b87fca23acedc399d062d593bec388aee9926a', 'comparisons': len(cases), 'accepted': accepted, 'rejected': rejected, 'mismatches': len(errors), 'scope': 'Pinned layout compiler acceptance and parsed output equivalence, not image-generation quality'}
+print(json.dumps(report, indent=2))
+if errors:
+    print(json.dumps(errors[:5], ensure_ascii=False, indent=2)); raise SystemExit(1)

tests/vendor/compile_prompt.py

@@ -0,0 +1,146 @@
+#!/usr/bin/env python3
+"""Compile a caption or absolute-pixel Layout draft into a MOSS-Image prompt."""
+
+import argparse
+import json
+import math
+import sys
+from pathlib import Path
+
+
+def require(condition, message):
+    if not condition:
+        raise ValueError(message)
+
+
+def fields(value, allowed, required, location):
+    require(isinstance(value, dict), f"{location} must be an object")
+    unknown = value.keys() - allowed
+    missing = required - value.keys()
+    require(not unknown, f"{location}: unknown fields {sorted(unknown)}")
+    require(not missing, f"{location}: missing fields {sorted(missing)}")
+
+
+def text(value, location):
+    require(isinstance(value, str) and bool(value.strip()), f"{location} must be nonempty text")
+
+
+def strings(value, location):
+    require(isinstance(value, list), f"{location} must be an array")
+    for index, item in enumerate(value):
+        text(item, f"{location}[{index}]")
+
+
+def centered_box(box, width, height, location):
+    require(isinstance(box, list) and len(box) == 4, f"{location} must be [x1,y1,x2,y2]")
+    require(
+        all(type(v) in (int, float) and math.isfinite(v) for v in box),
+        f"{location} must contain four finite numbers",
+    )
+    x1, y1, x2, y2 = box
+    require(x1 < x2 and y1 < y2, f"{location} must have positive width and height")
+    require(
+        0 <= x1 < x2 <= width and 0 <= y1 < y2 <= height,
+        f"{location} exceeds the {width}x{height} canvas",
+    )
+    # Enclose in pixel edges before centering, as in Echidna generation export.
+    result = [
+        math.floor(round(y1, 9)) - height // 2,
+        math.floor(round(x1, 9)) - width // 2,
+        math.ceil(round(y2, 9)) - height // 2,
+        math.ceil(round(x2, 9)) - width // 2,
+    ]
+    require(result[0] < result[2] and result[1] < result[3],
+            f"{location} is too small at export precision")
+    return result
+
+
+def compile_prompt(draft):
+    require(isinstance(draft, dict), "Draft must be a JSON object")
+    if "caption" in draft:
+        fields(draft, {"caption"}, {"caption"}, "Caption draft")
+        text(draft["caption"], "caption")
+        return draft["caption"]
+
+    root_fields = {"width", "height", "bbox_coord_space", "bbox_format", "summary", "items"}
+    fields(draft, root_fields, root_fields, "Layout draft")
+    width, height = draft["width"], draft["height"]
+    for name, value in (("width", width), ("height", height)):
+        require(type(value) is int and value > 0 and value % 16 == 0,
+                f"{name} must be a positive integer multiple of 16")
+    require(draft["bbox_coord_space"] == "abs", "Draft bbox_coord_space must be abs")
+    require(draft["bbox_format"] == "xyxy", "Draft bbox_format must be xyxy")
+
+    summary = draft["summary"]
+    fields(summary, {"caption", "meta", "canvas", "palette"}, {"caption"}, "summary")
+    text(summary["caption"], "summary.caption")
+    if "canvas" in summary:
+        require(summary["canvas"] in ("single", "multi_panel", "collage"),
+                "summary.canvas must be single, multi_panel or collage")
+    for key in ("meta", "palette"):
+        if key in summary:
+            strings(summary[key], f"summary.{key}")
+
+    items = draft["items"]
+    require(isinstance(items, list) and bool(items), "items must be a nonempty flat array")
+    compiled_items = []
+    for index, item in enumerate(items):
+        location = f"items[{index}]"
+        fields(item, {"label", "caption", "bbox", "text", "tags", "palette"},
+               {"label", "caption", "bbox"}, location)
+        require(item["label"] in ("object", "character", "text"),
+                f"{location}.label must be object, character or text")
+        text(item["caption"], f"{location}.caption")
+        if item["label"] == "text":
+            require("text" in item, f"{location}: text items require literal text")
+        if "text" in item:
+            text(item["text"], f"{location}.text")
+        for key in ("tags", "palette"):
+            if key in item:
+                strings(item[key], f"{location}.{key}")
+        compiled_items.append({
+            key: centered_box(value, width, height, f"{location}.bbox") if key == "bbox" else value
+            for key, value in item.items()
+        })
+
+    result = {"summary": summary, "items": compiled_items,
+              "bbox_coord_space": "abs_centralized", "bbox_format": "yxyx"}
+    return json.dumps(result, ensure_ascii=False, separators=(",", ":"), allow_nan=False)
+
+
+def unique_object(pairs):
+    result = {}
+    for key, value in pairs:
+        require(key not in result, f"Duplicate JSON key: {key}")
+        result[key] = value
+    return result
+
+
+def reject_constant(value):
+    raise ValueError(f"Invalid JSON number: {value}")
+
+
+def main():
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument("draft", type=Path, help="UTF-8 caption or Layout JSON draft")
+    parser.add_argument("--output", type=Path, help="Write prompt to a file instead of stdout")
+    args = parser.parse_args()
+    try:
+        if args.output:
+            require(args.output.resolve() != args.draft.resolve(),
+                    "Output must be separate from the editable draft")
+        draft = json.loads(args.draft.read_text(encoding="utf-8"),
+                           object_pairs_hook=unique_object, parse_constant=reject_constant)
+        prompt = compile_prompt(draft)
+        if args.output:
+            args.output.parent.mkdir(parents=True, exist_ok=True)
+            args.output.write_text(prompt + "\n", encoding="utf-8")
+            print(f"Wrote {args.output}", file=sys.stderr)
+        else:
+            print(prompt)
+    except (OSError, ValueError, OverflowError) as error:
+        parser.exit(2, f"Error: {error}\n")
+
+
+if __name__ == "__main__":
+    main()

verify.py

@@ -0,0 +1,265 @@
+"""Exercise the actual browser editor, with no model inference."""
+import argparse
+import functools
+import http.server
+import json
+import re
+from pathlib import Path
+import tempfile
+import threading
+
+from playwright.sync_api import sync_playwright, expect
+
+
+ROOT = Path(__file__).parent
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument('--base-url')
+    parser.add_argument('--artifacts', type=Path)
+    args = parser.parse_args()
+    server = None
+    if args.base_url:
+        base_url = args.base_url.rstrip('/') + '/'
+    else:
+        class QuietHandler(http.server.SimpleHTTPRequestHandler):
+            def log_message(self, *unused):
+                pass
+        handler = functools.partial(QuietHandler, directory=str(ROOT))
+        server = http.server.ThreadingHTTPServer(('127.0.0.1', 0), handler)
+        threading.Thread(target=server.serve_forever, daemon=True).start()
+        base_url = f'http://127.0.0.1:{server.server_port}/'
+    checks = []
+    errors = []
+    requests = []
+    try:
+        with sync_playwright() as p:
+            launch_options = {'headless': True, 'args': ['--no-sandbox']}
+            if Path('/usr/bin/chromium').is_file():
+                launch_options['executable_path'] = '/usr/bin/chromium'
+            browser = p.chromium.launch(**launch_options)
+            try:
+                context = browser.new_context(viewport={'width': 1440, 'height': 1100}, reduced_motion='reduce', accept_downloads=True)
+                page = context.new_page()
+                page.on('pageerror', lambda error: errors.append(str(error)))
+                page.on('request', lambda request: requests.append(request.url))
+                page.goto(base_url, wait_until='networkidle')
+                page.wait_for_function('() => document.getElementById("json-output").value.startsWith("{")')
+
+                def output():
+                    return json.loads(page.locator('#json-output').input_value())
+
+                def tab(name):
+                    page.locator('#tab-' + name).click()
+
+                def check(name):
+                    checks.append(name)
+
+                first = output()
+                assert first['bbox_coord_space'] == 'abs_centralized'
+                assert first['bbox_format'] == 'yxyx'
+                assert 'width' not in first and 'height' not in first
+                assert first['items'][0]['bbox'] == [-416, -384, -288, 384]
+                assert first['items'][2]['text'] == 'まだ見ぬ場所へ'
+                check('initial compiled layout and centered coordinates')
+
+                for example in ['poster', 'cup', 'type']:
+                    page.locator(f'[data-example="{example}"]').click()
+                    compiled = output()
+                    assert compiled['items'] and all(item['label'] in ['text', 'object', 'character'] for item in compiled['items'])
+                    assert all('id' not in item for item in compiled['items'])
+                    tab('draft')
+                    draft = output()
+                    assert draft['width'] % 16 == draft['height'] % 16 == 0
+                    assert draft['bbox_coord_space'] == 'abs' and draft['bbox_format'] == 'xyxy'
+                    if example == 'cup':
+                        assert compiled['items'][0]['bbox'] == [-288, -592, 352, 32]
+                        assert draft['items'][1]['text'] == '把日常，过成诗。'
+                        assert draft['items'][2]['text'] == '一杯温暖\n一刻从容'
+                    with tempfile.TemporaryDirectory() as directory:
+                        path = Path(directory) / 'draft.json'
+                        path.write_text(json.dumps(draft, ensure_ascii=False))
+                        page.locator('#import').set_input_files(path)
+                        page.wait_for_function('() => document.getElementById("status").textContent.startsWith("Layout imported")')
+                        assert output() == draft
+                    tab('prompt')
+                    assert output() == compiled
+                check('all three presets and exact editable JSON round trips')
+
+                page.locator('[data-example="poster"]').click()
+                box = page.locator('.layout-box').first
+                box.focus()
+                box.press('ArrowRight')
+                assert page.locator('#box-x').input_value() == '129'
+                box.press('Shift+ArrowDown')
+                assert page.locator('#box-y').input_value() == '106'
+                box.press('Alt+ArrowRight')
+                assert page.locator('#box-w').input_value() == '769'
+                page.locator('#undo').click()
+                assert page.locator('#box-w').input_value() == '768'
+                page.locator('#redo').click()
+                assert page.locator('#box-w').input_value() == '769'
+                box = page.locator('.layout-box').nth(1)
+                box.focus()
+                assert box.get_attribute('aria-pressed') == 'true'
+                assert page.locator('.layout-box[aria-pressed=true]').count() == 1
+                check('keyboard movement, resizing, focus selection, undo and redo')
+
+                page.locator('[data-example="poster"]').click()
+                box = page.locator('.layout-box').first
+                rect = box.bounding_box()
+                page.mouse.move(rect['x'] + rect['width'] / 2, rect['y'] + rect['height'] / 2)
+                page.mouse.down()
+                page.mouse.move(rect['x'] + rect['width'] / 2 + 22, rect['y'] + rect['height'] / 2 + 12, steps=4)
+                page.mouse.up()
+                assert float(page.locator('#box-x').input_value()) > 128
+                handle = page.locator('.layout-box').first.locator('.resize-handle').bounding_box()
+                old_w = float(page.locator('#box-w').input_value())
+                page.mouse.move(handle['x'] + handle['width'] / 2, handle['y'] + handle['height'] / 2)
+                page.mouse.down()
+                page.mouse.move(handle['x'] + handle['width'] / 2 - 18, handle['y'] + handle['height'] / 2 + 10, steps=3)
+                page.mouse.up()
+                assert float(page.locator('#box-w').input_value()) < old_w
+                check('pointer dragging and corner resizing')
+
+                before_x = page.locator('#box-x').input_value()
+                page.locator('#box-x').fill('999999')
+                page.locator('#box-x').press('Tab')
+                assert page.locator('#box-x').input_value() == before_x
+                assert 'inside the canvas' in page.locator('#status').inner_text()
+                page.locator('#scene-caption').fill('')
+                page.locator('#scene-caption').press('Tab')
+                assert page.locator('#copy').is_disabled() and page.locator('#download').is_disabled()
+                page.locator('#scene-caption').fill('A test composition with exact words.')
+                page.locator('#scene-caption').press('Tab')
+                assert page.locator('#copy').is_enabled()
+                check('invalid geometry rejected and incomplete export disabled')
+
+                page.locator('[data-example="poster"]').click()
+                page.locator('#canvas-width').fill('1536')
+                page.locator('#apply-size').click()
+                assert page.locator('#box-x').input_value() == '192'
+                assert page.locator('#box-w').input_value() == '1152'
+                page.locator('#scale-boxes').uncheck()
+                page.locator('#canvas-width').fill('1024')
+                page.locator('#apply-size').click()
+                assert 'fall outside' in page.locator('#status').inner_text()
+                assert page.locator('#canvas-readout').inner_text() == '1536 × 1024 px'
+                page.locator('#canvas-width').fill('2048')
+                page.locator('#apply-size').click()
+                assert page.locator('#box-x').input_value() == '192'
+                assert page.locator('#box-w').input_value() == '1152'
+                page.locator('#scale-boxes').check()
+                check('explicit proportional resize and preserved pixel positions')
+
+                page.locator('[data-example="cup"]').click()
+                tab('draft')
+                expected = page.locator('#json-output').input_value() + '\n'
+                with page.expect_download() as event:
+                    page.locator('#download').click()
+                download = event.value
+                assert download.suggested_filename == 'moss-draft-1536x1024.json'
+                assert Path(download.path()).read_text() == expected
+                page.evaluate('Object.defineProperty(navigator,"clipboard",{configurable:true,value:{writeText:()=>Promise.reject(new Error("denied"))}})')
+                page.locator('#copy').click()
+                assert 'JSON is selected' in page.locator('#status').inner_text()
+                assert page.locator('#json-output').evaluate('(el)=>el.selectionEnd-el.selectionStart') == len(expected.rstrip('\n'))
+                check('exact Unicode download and clipboard denial fallback')
+
+                safe = output()
+                safe['summary']['palette'] = ['ivory', 'green']
+                safe['summary']['meta'] = ['print, editorial', 'studio\nphotography']
+                safe['items'][0]['tags'] = ['ceramic', 'handmade']
+                safe['items'][0]['palette'] = ['ivory']
+                safe['items'][1]['text'] = '<img src=x onerror="window.xss=1">\nمرحبا 🌿'
+                with tempfile.TemporaryDirectory() as directory:
+                    path = Path(directory) / 'draft.json'
+                    path.write_text(json.dumps(safe, ensure_ascii=False))
+                    page.locator('#import').set_input_files(path)
+                    page.wait_for_function('() => document.getElementById("status").textContent.startsWith("Layout imported")')
+                    assert output() == safe
+                    assert page.locator('#stage img').count() == 0
+                    assert page.evaluate('window.xss') is None
+                    assert '<img' in page.locator('.layout-box.text').first.inner_text()
+                    page.locator('#scene-meta').fill('new, exact tag')
+                    page.locator('#scene-meta').press('Enter')
+                    safe['summary']['meta'].append('new, exact tag')
+                    assert output() == safe
+                    path.write_text(json.dumps({**safe, 'unexpected': True}))
+                    page.locator('#import').set_input_files(path)
+                    page.wait_for_function('() => document.getElementById("status").textContent.startsWith("Import failed")')
+                    assert output() == safe
+                    path.write_text('{"width":1024,"width":2048}')
+                    page.locator('#import').set_input_files(path)
+                    expect(page.locator('#status')).to_contain_text(re.compile('duplicate', re.I))
+                check('strict imports, optional fields preserved, literal HTML cannot execute')
+
+                page.locator('#add-character').click()
+                assert page.locator('#item-label').input_value() == 'character'
+                count = page.locator('.layout-box').count()
+                page.locator('#duplicate').click()
+                assert page.locator('.layout-box').count() == count + 1
+                page.locator('#delete').click()
+                assert page.locator('.layout-box').count() == count
+                page.locator('#undo').click()
+                assert page.locator('.layout-box').count() == count + 1
+                check('add, duplicate, remove and restore elements')
+
+                page.locator('[data-example="poster"]').click()
+                tab('prompt')
+                if args.artifacts:
+                    args.artifacts.mkdir(parents=True, exist_ok=True)
+                    page.evaluate('document.activeElement?.blur(); document.getElementById("json-output").scrollTop=0; window.scrollTo(0,0)')
+                    page.screenshot(path=str(args.artifacts / 'moss-desktop.png'), full_page=True)
+
+                mobile = browser.new_context(viewport={'width': 390, 'height': 844}, device_scale_factor=1, is_mobile=True, has_touch=True, reduced_motion='reduce')
+                phone = mobile.new_page()
+                phone.on('pageerror', lambda error: errors.append(str(error)))
+                phone.on('request', lambda request: requests.append(request.url))
+                phone.goto(base_url, wait_until='networkidle')
+                phone.wait_for_function('() => document.getElementById("json-output").value.startsWith("{")')
+                assert phone.evaluate('document.documentElement.scrollWidth <= window.innerWidth')
+                phone.locator('.layout-box').first.scroll_into_view_if_needed()
+                r = phone.locator('.layout-box').first.bounding_box()
+                cdp = mobile.new_cdp_session(phone)
+                x, y = r['x'] + r['width'] / 2, r['y'] + r['height'] / 2
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchStart', 'touchPoints': [{'x': x, 'y': y}]})
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchMove', 'touchPoints': [{'x': x + 14, 'y': y + 12}]})
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchEnd', 'touchPoints': []})
+                assert float(phone.locator('#box-x').input_value()) > 128
+                phone.locator('.layout-box').first.scroll_into_view_if_needed()
+                r = phone.locator('.layout-box').first.locator('.resize-handle').bounding_box()
+                old_w = float(phone.locator('#box-w').input_value())
+                x, y = r['x'] + r['width'] / 2, r['y'] + r['height'] / 2
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchStart', 'touchPoints': [{'x': x, 'y': y}]})
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchMove', 'touchPoints': [{'x': x - 15, 'y': y + 10}]})
+                cdp.send('Input.dispatchTouchEvent', {'type': 'touchEnd', 'touchPoints': []})
+                assert float(phone.locator('#box-w').input_value()) < old_w
+                assert phone.evaluate('document.documentElement.scrollWidth <= window.innerWidth')
+                phone.locator('[data-example="type"]').click()
+                phone.locator('.layout-box').first.scroll_into_view_if_needed()
+                board = phone.locator('#stage').bounding_box()
+                assert abs(board['width'] / board['height'] - 1024 / 1280) < .01
+                check('mobile layout, actual touch drag and resize, portrait aspect ratio')
+                if args.artifacts:
+                    phone.evaluate('document.activeElement?.blur(); document.getElementById("json-output").scrollTop=0; window.scrollTo(0,0)')
+                    phone.screenshot(path=str(args.artifacts / 'moss-phone.png'), full_page=True)
+                mobile.close()
+                allowed_origin = '/'.join(base_url.split('/')[:3])
+                foreign = [url for url in requests if not url.startswith(allowed_origin + '/') and not url.startswith('blob:') and not url.startswith('data:')]
+                assert not foreign, foreign
+                assert not errors, errors
+                check('no external network requests or browser runtime errors')
+                context.close()
+            finally:
+                browser.close()
+    finally:
+        if server:
+            server.shutdown()
+            server.server_close()
+    print(json.dumps({'passed': len(checks), 'checks': checks, 'runtime_errors': errors, 'base_url': args.base_url or 'local'}, indent=2))
+
+
+if __name__ == '__main__':
+    main()