maket_html
Read and write page HTML with surgical data-id edits. Validate layout against canvas and enforce brand charte tokens.
Instructions
When to use: read and write page HTML. Pick set for the initial skeleton, patch for iterative edits, get to read, check to measure overflow without writing.
Every visible element MUST have a data-id. Use flex/grid with mm units. When a charte is loaded, prefer var(--charte-*) tokens. The compliance check is narrow: it rejects (1) hardcoded colour literals that duplicate an existing charte token value (e.g. #2563EB when primary=#2563EB), (2) any hardcoded font-family when the charte defines fonts, (3) any hardcoded box-shadow when the charte defines shadows. Fresh colours that don't duplicate a token pass untouched.
set — REPLACE the full page HTML. Rejects the whole payload on any violation. Requires context_token when the doc has a charte.
patch — apply ops by data-id: style/content/attr/insert/replace/remove/clone/moveTo. Violating ops roll back individually, the rest still apply.
get — return current HTML; pass id= for a single element, format=text to strip tags.
check — measure layout against the canvas + declared canvas.margins; no side effects. Status: ✓ OK, ⚠ tight (block crosses a declared margin band — tighten or move into the safe zone before shipping), ⛔ overflow (block escapes the canvas, not shippable; pairwise overlaps between [data-id] blocks are reported under this same status). On tight/overflow, the next: block points to a snapshot + targeted patch.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| id | No | For get: data-id of a single element to return; omit to fetch the whole page. | |
| doc | Yes | Document name (always required). | |
| ops | No | For patch: list of surgical ops by data-id. Each op has `id` plus one of: style (object), content (string), attr (object), insert (html) + optional position, replace (outerHTML), remove (true), clone (newId), moveTo (targetId) + optional position. | |
| html | No | For set: full page HTML. Every visible element MUST carry a data-id. Use flex/grid with mm units; images use relative filenames (src="photo.jpg"); colours/fonts come from var(--charte-*). Example: <div data-id="page" style="width:210mm;height:297mm;display:flex;flex-direction:column;padding:15mm"><h1 data-id="title">Hello</h1></div>. | |
| page | Yes | Page number, 1-based (always required). | |
| action | Yes | Operation to run. See the tool description for the action table. | |
| format | No | For get: 'html' (default, full markup) or 'text' (tags stripped). | |
| context_token | No | For set: charte context token from maket_charte view. REQUIRED when the document has a charte — proof the brand guidelines were read first. |