konpeki 0.3.0 → 0.4.0

package/runtime/server-BAqC_5WD.mjs

@@ -0,0 +1,2 @@
+import { r as previewHTML } from "./server-DfRpfcY9.mjs";
+export { previewHTML };

package/runtime/server-DfRpfcY9.mjs

@@ -0,0 +1,205 @@
+import { t as fileSource } from "./source-B_Ui9tMp.mjs";
+import { dirname, extname, isAbsolute, relative, resolve } from "node:path";
+import { readFile, realpath } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { createServer } from "node:http";
+import { randomBytes } from "node:crypto";
+import { createServer as createServer$1 } from "vite";
+import { parse, parseFragment, serialize } from "parse5";
+//#region html/document.ts
+var documentPolicy = "default-src 'none'; script-src 'none'; style-src 'unsafe-inline' 'self' https://fonts.googleapis.com; font-src 'self' data: https://fonts.gstatic.com; img-src 'self' data:; base-uri 'none'; form-action 'none'";
+/** The only external resources permitted by CLI inspection/export. */
+function isGoogleFontResource(url, resourceType) {
+	const resource = new URL(url);
+	if (resource.protocol !== "https:" || resource.port || resource.username || resource.password) return false;
+	return resourceType === "stylesheet" && resource.hostname === "fonts.googleapis.com" && ["/css", "/css2"].includes(resource.pathname) || resourceType === "font" && resource.hostname === "fonts.gstatic.com" && resource.pathname.startsWith("/s/");
+}
+/** A view of the source, never a serialization written back to it. Keep every
+* page in the DOM so nth-child selectors and shared SVG definitions stay stable. */
+function documentHTML(source, pageId) {
+	const tree = parse(source);
+	const html = tree.childNodes.find((n) => n.nodeName === "html");
+	const head = html.childNodes.find((n) => n.nodeName === "head");
+	const body = html.childNodes.find((n) => n.nodeName === "body");
+	for (const child of body.childNodes) {
+		if (!("attrs" in child)) continue;
+		child.attrs = child.attrs.filter((a) => a.name !== "data-konpeki-current");
+		if (child.attrs.some((a) => a.name === "data-page") && child.attrs.some((a) => a.name === "id" && a.value === pageId)) child.attrs.push({
+			name: "data-konpeki-current",
+			value: ""
+		});
+	}
+	head.childNodes.unshift(...parseFragment(`<meta http-equiv="Content-Security-Policy" content="${documentPolicy}">`).childNodes);
+	head.childNodes.push(...parseFragment(`<style>
+    html, body { margin: 0 !important; padding: 0 !important; }
+    body { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
+    body > [data-page] { margin: 0 !important; flex: none !important; }
+    body > [data-page]:not([data-konpeki-current]) { display: none !important; }
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+    @media print { body > [data-page] { break-before: auto !important; break-after: auto !important; } }
+  </style>`).childNodes);
+	return serialize(tree);
+}
+//#endregion
+//#region html/server.ts
+var types = {
+	".css": "text/css",
+	".png": "image/png",
+	".jpg": "image/jpeg",
+	".jpeg": "image/jpeg",
+	".webp": "image/webp",
+	".gif": "image/gif",
+	".svg": "image/svg+xml",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+	".ttf": "font/ttf",
+	".otf": "font/otf"
+};
+var sessionRoute = "/__konpeki/html";
+/** Same authenticated document/asset surface for preview and browser exports. */
+function htmlSession(path, token = randomBytes(24).toString("base64url")) {
+	const store = fileSource(resolve(path));
+	const prefix = `${sessionRoute}/${token}`;
+	function send(res, status, value) {
+		res.writeHead(status, {
+			"Content-Type": "application/json",
+			"Cache-Control": "no-store",
+			"Referrer-Policy": "no-referrer"
+		});
+		res.end(JSON.stringify(value));
+	}
+	async function handler(req, res, next) {
+		const url = new URL(req.url ?? "/", "http://localhost");
+		if (!url.pathname.startsWith("/__konpeki/html")) return next();
+		try {
+			if (url.pathname === "/__konpeki/html") {
+				if (req.headers["x-konpeki-session"] !== token) return send(res, 403, { error: "Invalid preview session." });
+				if (req.method === "GET") return send(res, 200, await store.read());
+				if (req.method !== "PATCH") return send(res, 405, { error: "Method not allowed." });
+				let size = 0;
+				const chunks = [];
+				for await (const chunk of req) {
+					size += chunk.length;
+					if (size > 16384) throw Object.assign(/* @__PURE__ */ new Error("Correction is too large."), { status: 413 });
+					chunks.push(chunk);
+				}
+				const body = JSON.parse(Buffer.concat(chunks).toString());
+				if (!body || typeof body.revision !== "string" || !body.edit || ![
+					"move",
+					"delete",
+					"undo"
+				].includes(body.edit.kind)) return send(res, 400, { error: "Invalid correction." });
+				return send(res, 200, await store.edit(body.revision, body.edit));
+			}
+			if (!url.pathname.startsWith(`${prefix}/`)) return send(res, 403, { error: "Invalid preview session." });
+			if (req.method !== "GET") return send(res, 405, { error: "Method not allowed." });
+			if (url.pathname === `${prefix}/document/`) {
+				const snapshot = await store.read();
+				if (url.searchParams.has("revision") && url.searchParams.get("revision") !== snapshot.revision) return send(res, 409, { error: "The source changed. Retry with its latest revision." });
+				const page = url.searchParams.get("page") ?? snapshot.pages[0];
+				if (!snapshot.pages.includes(page)) return send(res, 404, { error: "Unknown page." });
+				res.writeHead(200, {
+					"Content-Type": "text/html; charset=utf-8",
+					"Content-Security-Policy": documentPolicy,
+					"Cache-Control": "no-store",
+					"Referrer-Policy": "no-referrer",
+					"X-Content-Type-Options": "nosniff"
+				});
+				return res.end(documentHTML(snapshot.source, page));
+			}
+			const assets = `${prefix}/document/`;
+			if (!url.pathname.startsWith(assets)) return send(res, 404, { error: "Unknown resource." });
+			const name = decodeURIComponent(url.pathname.slice(assets.length));
+			const type = types[extname(name).toLowerCase()];
+			if (!type || name.split(/[\\/]/).some((part) => part.startsWith("."))) return send(res, 403, { error: "Only local image, font and CSS assets are served." });
+			let base = await realpath(dirname(resolve(path))), file;
+			try {
+				file = await realpath(resolve(base, name));
+			} catch (error) {
+				if (error.code !== "ENOENT" || !/^theme(?:-base)?\.css$/.test(name)) throw error;
+				base = fileURLToPath(new URL("../", import.meta.url));
+				file = await realpath(resolve(base, name));
+			}
+			const within = relative(base, file);
+			if (isAbsolute(within) || within.startsWith("..")) return send(res, 403, { error: "Asset is outside the document directory." });
+			const bytes = await readFile(file);
+			res.writeHead(200, {
+				"Content-Type": type,
+				"Cache-Control": "no-store",
+				"Content-Security-Policy": documentPolicy,
+				"X-Content-Type-Options": "nosniff"
+			});
+			res.end(bytes);
+		} catch (error) {
+			send(res, error instanceof SyntaxError || error instanceof URIError ? 400 : error.code === "ENOENT" ? 404 : Number(error.status ?? 500), { error: error instanceof Error ? error.message : "Preview failed." });
+		}
+	}
+	return {
+		token,
+		prefix,
+		store,
+		handler
+	};
+}
+async function documentServer(path) {
+	const session = htmlSession(path);
+	await session.store.read();
+	const server = createServer((req, res) => void session.handler(req, res, () => {
+		res.writeHead(404);
+		res.end();
+	}));
+	await new Promise((resolve, reject) => {
+		server.once("error", reject);
+		server.listen(0, "127.0.0.1", () => resolve());
+	});
+	const address = server.address();
+	return {
+		...session,
+		origin: `http://127.0.0.1:${address.port}`,
+		close: () => new Promise((resolve, reject) => server.close((e) => e ? reject(e) : resolve()))
+	};
+}
+async function previewHTML(path, host, port, root, strictPort = false) {
+	const session = htmlSession(path);
+	await session.store.read();
+	const server = await createServer$1({
+		root,
+		configFile: false,
+		logLevel: "silent",
+		server: {
+			host,
+			port,
+			strictPort,
+			fs: {
+				allow: [root, dirname(fileURLToPath(import.meta.resolve("@fontsource/ibm-plex-sans/package.json")))],
+				deny: [
+					".env",
+					".env.*",
+					"*.{crt,pem,key,p12,pfx}",
+					".npmrc",
+					"**/.git/**"
+				]
+			}
+		},
+		plugins: [{
+			name: "konpeki-html",
+			configureServer(server) {
+				server.middlewares.use((req, res, next) => void session.handler(req, res, next));
+			}
+		}]
+	});
+	try {
+		await server.listen();
+	} catch (e) {
+		await server.close();
+		throw e;
+	}
+	const address = server.httpServer.address();
+	const displayHost = host === "0.0.0.0" || host === "::" ? "localhost" : host;
+	return {
+		server,
+		url: `http://${displayHost.includes(":") ? `[${displayHost}]` : displayHost}:${address.port}/html/?session=${session.token}`
+	};
+}
+//#endregion
+export { isGoogleFontResource as a, sessionRoute as i, htmlSession as n, previewHTML as r, documentServer as t };

package/runtime/source-B_Ui9tMp.mjs

@@ -0,0 +1,141 @@
+import { basename, dirname, join, resolve } from "node:path";
+import { readFile, rename, rm, writeFile } from "node:fs/promises";
+import { createHash, randomBytes } from "node:crypto";
+import { parse } from "parse5";
+import postcss from "postcss";
+//#region html/source.ts
+var revision = (source) => createHash("sha256").update(source).digest("hex");
+var attr = (node, name) => node.attrs.find((a) => a.name === name)?.value;
+function fail(message, status = 422) {
+	throw Object.assign(new Error(message), { status });
+}
+function inspectSource(source) {
+	const tree = parse(source, {
+		sourceCodeLocationInfo: true,
+		onParseError(error) {
+			if (error.code === "duplicate-attribute") fail("Duplicate HTML attributes are ambiguous; remove them before editing.");
+		}
+	});
+	const elements = [];
+	function visit(node) {
+		if ("tagName" in node) elements.push(node);
+		if ("childNodes" in node) node.childNodes.forEach(visit);
+	}
+	visit(tree);
+	const pages = elements.filter((node) => attr(node, "data-page") !== void 0);
+	if (!pages.length) fail("Add an id and data-page to each page element.");
+	const ids = /* @__PURE__ */ new Set();
+	for (const node of elements) {
+		if ([
+			"script",
+			"iframe",
+			"object",
+			"embed",
+			"base",
+			"template",
+			"form",
+			"input",
+			"button",
+			"textarea",
+			"select",
+			"animate",
+			"animatetransform",
+			"set"
+		].includes(node.tagName.toLowerCase()) || node.tagName === "meta" && attr(node, "http-equiv") !== void 0 || node.attrs.some((a) => /^on/i.test(a.name) || [
+			"href",
+			"src",
+			"action"
+		].includes(a.name) && /^\s*javascript:/i.test(a.value))) fail("Documents must be static HTML/CSS and inline SVG, without scripts, event handlers, embedded applications or controls.");
+		const id = attr(node, "id");
+		if (id !== void 0 && (!id || ids.has(id))) fail("Element IDs must be nonempty and unique within the HTML file.");
+		if (id) ids.add(id);
+	}
+	for (const page of pages) if (!attr(page, "id") || page.parentNode?.nodeName !== "body") fail("Pages need an id and must be direct children of body.");
+	return {
+		pages,
+		elements
+	};
+}
+function patchSource(source, edit) {
+	const { pages, elements } = inspectSource(source);
+	const page = pages.find((node) => attr(node, "id") === edit.page);
+	const node = elements.find((node) => attr(node, "id") === edit.id);
+	if (!page || !node) fail("The selected page or element no longer exists.");
+	let ancestor = node;
+	while (ancestor && ancestor !== page) ancestor = "parentNode" in ancestor ? ancestor.parentNode ?? void 0 : void 0;
+	if (!ancestor || node === page) fail("Select an element inside the page.");
+	const location = node.sourceCodeLocation;
+	if (!location?.startTag) fail("This element does not have an unambiguous source location.");
+	if (edit.kind === "delete") return source.slice(0, location.startOffset) + source.slice(location.endOffset);
+	if (edit.kind !== "move" || typeof edit.translate !== "string" || !/^-?\d+(?:\.\d+)?px -?\d+(?:\.\d+)?px$/.test(edit.translate) || edit.translate.length > 100) fail("Invalid correction.");
+	let css;
+	try {
+		css = postcss.parse(attr(node, "style") ?? "", { map: false });
+	} catch {
+		fail("The inline style could not be parsed. Correct it in source before moving.");
+	}
+	const declarations = css.nodes.filter((n) => n.type === "decl" && n.prop.toLowerCase() === "translate");
+	for (const declaration of declarations) if (declaration.type === "decl") declaration.value = edit.translate;
+	if (!declarations.length) css.append({
+		prop: "translate",
+		value: edit.translate
+	});
+	css.raws.semicolon = true;
+	const escaped = css.toString().replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;");
+	const style = location.attrs?.style;
+	const start = style?.startOffset ?? location.startTag.endOffset - (source[location.startTag.endOffset - 2] === "/" ? 2 : 1);
+	const end = style?.endOffset ?? start;
+	return source.slice(0, start) + `${style ? "" : " "}style="${escaped}"` + source.slice(end);
+}
+function fileSource(path) {
+	path = resolve(path);
+	let queue = Promise.resolve();
+	const history = [];
+	async function read() {
+		const source = await readFile(path, "utf8");
+		const { pages } = inspectSource(source);
+		return {
+			source,
+			revision: revision(source),
+			name: basename(path),
+			path,
+			key: revision(path),
+			pages: pages.map((p) => attr(p, "id"))
+		};
+	}
+	function edit(expected, change) {
+		const result = queue.then(async () => {
+			const current = await read();
+			if (current.revision !== expected) fail("Source changed outside this preview. Reloaded the latest file; retry your correction.", 409);
+			const previous = history.at(-1);
+			if (change.kind === "undo" && (!previous || previous.after !== current.revision)) fail("Nothing safe to undo: the source may have changed externally.", 409);
+			const next = change.kind === "undo" ? previous.before : patchSource(current.source, change);
+			inspectSource(next);
+			const temporary = join(dirname(path), `.${basename(path)}.${randomBytes(8).toString("hex")}.tmp`);
+			try {
+				await writeFile(temporary, next, { flag: "wx" });
+				if (revision(await readFile(path, "utf8")) !== current.revision) fail("Source changed while saving. Retry your correction.", 409);
+				await rename(temporary, path);
+			} finally {
+				await rm(temporary, { force: true });
+			}
+			if (change.kind === "undo") history.pop();
+			else {
+				history.push({
+					before: current.source,
+					after: revision(next)
+				});
+				if (history.length > 30) history.shift();
+			}
+			return read();
+		});
+		queue = result.catch(() => {});
+		return result;
+	}
+	return {
+		read,
+		edit
+	};
+}
+//#endregion
+export { revision as i, inspectSource as n, patchSource as r, fileSource as t };

package/runtime/source-CZQq9GUO.mjs

@@ -0,0 +1,2 @@
+import { t as fileSource } from "./source-B_Ui9tMp.mjs";
+export { fileSource };

package/skills/konpeki/SKILL.md

@@ -1,186 +1,102 @@
 ---
 name: konpeki
-description: Opens the Konpeki editor with init, or generates and revises editable visuals with generate. Use when asked to use Konpeki or create covers, social graphics, product announcements, charts, diagrams, article headers or presentations.
-compatibility: Requires Node.js 24+, npm, a coding agent with file and command access, and a browser. Runtime installation needs network access and the host's approval.
+description: Creates, checks, renders, and revises static HTML visuals. Use for landscape slides, résumés, multi-page documents, one-pagers/cards, and covers/social graphics, including charts and diagrams within them.
+compatibility: Requires Node.js 24+, file and command access, and a matching Konpeki runtime installed in the workspace or a prepared checkout. Inspection and export require pinned Chromium.
 ---
 
 # Konpeki
 
-Use one of two modes from the invocation or conversation:
-
-- **init [composition.json]**: prepare the runtime and open a blank or existing
-  file-backed editor. Stop when it is ready; do not generate artwork or claim to
-  be listening for reviews.
-- **generate [brief / materials]**: create or revise the visual, open its preview,
-  inspect and repair it, then handle feedback in the same conversation. Prepare
-  the runtime automatically; a separate init command is never required.
-
-A creation brief without a mode, including “Use Konpeki to…”, means **generate**.
-Bare “Konpeki” with no brief opens the editor as **init**. Follow-up feedback stays
-with the current document; users need not repeat the skill or their materials.
-Use existing chat, attachments, referenced files and canvas intent as inputs.
-Ask only for missing information needed for faithful work, not a repeated brief.
-
-Invocation belongs to the host: Codex CLI/IDE uses `$konpeki init` or
-`$konpeki generate …`; a standalone Claude Code skill uses `/konpeki init` or
-`/konpeki generate …`. Other clients may use skill selection or natural language;
-plugin installations may namespace the skill. These are agent workflows, not
-`konpeki init` / `konpeki generate` terminal commands.
-
-## 0. Find the runtime once
-
-From the user's chosen workspace, run the script bundled beside this skill:
+Turn a brief and evidence into a finished visual with HTML as editable source and
+PNG/PDF as delivery artifacts. Infer a suitable form and complete the work rather
+than requiring an outline or design checkpoint, unless the user requests one.
+
+## Before authoring
+
+1. Resolve the runtime. From an installed skill, run
+   `node scripts/ensure-runtime.mjs` with no arguments; it reports a compatible
+   checkout or locally installed package. Its `root` locates the guides below;
+   run its `cli` path with Node. See `SETUP.md` if no runtime is found.
+2. From that root, read `AUTHORING.md` for accuracy and editorial judgment and
+   `html/README.md` for all HTML, file, theme, diagnostic, preview, and CLI
+   rules. Do not duplicate or override those rules here.
+3. Ground the work in the requested audience, takeaway, supplied evidence,
+   destination, and output format. Ask only when missing facts or conflicting
+   constraints prevent faithful work.
+4. Infer the format and read its guide below. Read only the relevant sections
+   of [content patterns](references/patterns.md) when the work mixes text with
+   visuals or includes a chart, table, comparison, process, system map,
+   hierarchy, or annotated detail.
+
+## Choose the output guide
+
+These guides cover content, layout, and review decisions, not fixed templates
+or a placement grid. The brief overrides format defaults, never accuracy,
+readability, or the floor's bans. Do not ask the user to choose a taxonomy.
+
+| Requested output | Read |
+| --- | --- |
+| Landscape presentation or deck | [Slides](references/slides.md) |
+| Résumé or CV | [Résumé](references/resume.md) |
+| Report, essay, proposal, or other sustained multi-page reading | [Long document](references/long-document.md) |
+| Bounded brief, reference sheet, one-pager, or card at A4 or another size | [One-pager/card](references/one-pager.md) |
+| Cover, thumbnail, link preview, or social graphic | [Cover/social graphic](references/cover.md) |
+
+For a mixed-format request, read each applicable guide. A one-page résumé still
+uses the résumé guide; a diagram within a report uses the long-document guide
+and the relevant pattern section. Start freely when none fits exactly.
+
+## Create or revise
+
+1. Choose the user's document path. For a new document, run
+   `node scripts/prepare-document.mjs <cli> <document.html>` to place a validated
+   starter and theme stylesheets beside it without overwriting existing files.
+   The default theme uses Google Fonts; use local or embedded fonts for offline
+   or reproducible rendering.
+2. Reread any existing source before changing it. Preserve stable IDs, facts,
+   provenance, deliberate human edits, and unrelated or newer changes.
+3. Plan each page before writing HTML, in your working notes: its format and
+   viewing size, the headline as a claim, the elements it carries in reading
+   order, and what the format's budget forces out.
+4. Read [floor.md](floor.md) immediately before writing or revising HTML. Its
+   bans have no exceptions; its defaults yield only to an explicit brief.
+5. Read `html/theme.md` for the theme API. Link the default Cobalt `theme.css`.
+   When the brief brings its own look, adapt a copy using the same contract.
+   Read CSS implementation only when changing a theme, not when using one.
+   Author the HTML and page-specific composition; use complete type roles and
+   theme tokens.
+6. Run `node <cli> validate <document.html>` and fix source-contract errors.
+7. Run `node <cli> inspect <document.html>`; use `--page N` or `--details` when useful.
+   Use each page's resolved `theme.type` to plan type and line lengths.
+   Resolve errors. Fix each warning, or keep it with a reason you will report;
+   floor warnings use their rule ID as the diagnostic code.
+8. Render every affected page at 2x PNG. `render` prints the floor's review
+   checklist: check the page against it at intended size and enlarged, along
+   with facts, readability, clipping and consistency.
+9. Repeat editing, validation, inspection, and visual review until sound. Inspect
+   a requested PDF separately because it is a distinct artifact.
+
+Example focused loop:
 
 ```sh
-node "<absolute-path-to-this-skill>/scripts/ensure-runtime.mjs"
+node <cli> validate document.html
+node <cli> inspect document.html
+node <cli> render document.html --page 1 --format png --scale 2 --output page-1.png
 ```
 
-It reuses a compatible workspace installation, the surrounding Konpeki checkout,
-or a previously installed cache. If none exists, follow the host's permission
-flow, then rerun with `--install`. This installs the pinned npm release in a
-user cache, not in the user's project, and does not change their agent guidance.
-If Node.js 24+ or npm is missing, report that prerequisite and follow the host's
-toolchain setup rules; never claim the runtime is ready when setup failed.
-
-The script returns JSON with `root` (runtime resources) and `cli` (the executable
-path). In the instructions below, `<root>` and `<cli>` mean those returned absolute
-paths. Quote paths in shell commands. They may be outside the skill directory;
-do not assume a copied skill contains the runtime. Read resources from `<root>`
-and keep authored documents in the user's workspace, outside the runtime/cache.
+## Human feedback
 
-## init — open the editor without generating
+Use `node <cli> preview <document.html>` only when interactive review is useful. After
+the reviewer uses **Copy & clear**, use the full local path in the prompt to
+reread current source, then address feedback by stable target ID. If a target no
+longer exists or feedback conflicts with newer work, report that instead of
+guessing. Re-run the verification loop after source-backed moves, deletions, or
+agent-authored revisions.
 
-Use the explicit document path, otherwise the document already active in this
-conversation. With neither, use `slides/untitled/composition.json`. If several
-documents are plausible, ask which to open instead of guessing.
+## Deliver
 
-Run the bundled helper with the resolved CLI and chosen destination:
-
-```sh
-node "<absolute-path-to-this-skill>/scripts/prepare-document.mjs" "<cli>" "<composition.json>"
-```
-
-It creates a validated blank page only when the file is missing. Existing files
-are validated without rewriting them, and unreadable files are left untouched.
-It returns `{ compositionPath, created }`; this means the document is prepared,
-not that its browser is open. Do not replace a failed document with an example.
-
-Follow **Open the file-backed preview** below. Verify the intended document loads,
-then return its path and usable editor link. For a new document, verify an empty
-page with editing controls. Stop here until the person asks to generate or revise.
-Do not start an agent listener just because an editor is open.
-
-## generate — interpret the brief
-
-Read `<root>/AGENTS.md` and `<root>/AUTHORING.md`. Use the user's existing prompt as the
-brief; do not ask them to repeat it in the canvas. Establish the source facts,
-audience, takeaway and destination. Ask only when missing facts or conflicting
-requirements prevent a faithful result.
-
-Continue the document opened by init or the current conversation unless the
-person requests a new one. Before changing an existing document, inspect
-`node "<cli>" request "<composition.json>"`. Claim a `submitted` request with
-`wait` and follow **Review handoff** below. A `working` request may belong to
-another agent; coordinate ownership before resuming, rather than claiming it again.
-With no active request, work from the brief and current composition normally.
-
-Use `default` authoring mode unless requested otherwise. Explicit visual
-preferences override taste defaults, not factual fidelity or readability. Use
-the comparison workflow in `<root>/AUTHORING.md`
-only when requested or accepted. A single page is a complete creation; choose
-dimensions for its destination rather than assuming a slide deck.
-
-### Author or revise the composition
-
-Read `<root>/composition/README.md`. For a new visual,
-create `slides/<name>/composition.json` unless the user supplies another path.
-Use an unused destination; do not overwrite a different document at that path.
-Save the creative brief in `PROMPT.md` and substantial facts, citations and asset
-provenance in `SOURCE.md`. Separate assumptions from supplied facts. Preserve
-creative requests accurately, but omit private coordination and environment or
-agent metadata; label excerpts and redactions rather than calling them verbatim.
-
-For revisions, reread the current file first. Preserve unrelated content,
-component/vector IDs and human-edited geometry. Honor explicit chart or diagram
-choices. Recompose for a new aspect ratio instead of stretching or cropping.
-
-Prefer native text and semantic components. When standard drafts cannot express
-the visual, use editable vectors inside their owning component. Reuse
-`<root>/design/README.md` and reference examples as needed.
-Trusted React may generate SVG for conversion, but imported JSX must not execute
-in the canvas or become a second document source.
-
-### Validate, render and repair
-
-```sh
-node "<cli>" validate "<composition.json>"
-```
-
-Follow **Open the file-backed preview** below, then inspect
-every affected page and requested theme at presentation and smaller review sizes
-after fonts load. Check factual fidelity, text bounds, contrast, reading order
-and relationships. Repair consequential issues and inspect fresh renders.
-
-Follow `<root>/docs/development.md` verification guidance for
-code changes. Validation alone is not visual review. If a required check cannot
-run, state the limitation; do not claim it passed. Honor requested checkpoints;
-otherwise continue to finished output.
-
-### Deliver and continue revisions
-
-Return the composition path, usable preview, reviewed images or requested
-exports, source attribution and verification limitations. Verify exports
-separately; browser images do not prove editable PDF/PPTX or font fidelity.
-Include any generator source while keeping composition JSON authoritative.
-
-Accept follow-up chat feedback without requiring another generate invocation.
-Reread the current composition each time, preserve human edits, and repeat the
-render/repair checks. For canvas feedback, the person submits notes with **Build
-it**. A submitted request can be handled by invoking generate again or by an
-agent already waiting for it. Do not treat unsent notes as a submitted request.
-
-## Open the file-backed preview
-
-Reuse a known live preview for the same absolute document path; verify it still
-loads that document. Otherwise start:
-
-```sh
-node "<cli>" preview "<composition.json>"
-```
+Deliver requested PNG/PDF artifacts first. Keep editable HTML and local resources
+in the agent workspace; share them when useful or requested. Report every
+warning you kept and why, and any review limitations. Do not claim checks you did
+not run.
 
-Keep the process alive using the host's supported service mechanism. Open the
-exact printed session URL in the host's in-app browser when available, otherwise
-the person's regular browser. For a remote workspace, use its authenticated
-preview or port forwarding and preserve the session query; a remote loopback URL
-is not a usable handoff. Session URLs grant editing access: do not publish them.
-Verify the intended document actually loads before calling setup complete. If
-browser access is unavailable, return the usable link and state it was not checked.
-Do not substitute the standalone playground: it cannot save to the agent's file
-or submit canvas review requests.
-
-## Review handoff
-
-When explicitly waiting for ongoing canvas reviews, run
-`node "<cli>" wait "<composition.json>"` alongside the preview using the host's
-supported long-running tool. Report whether a listener is actually running.
-**Build it** cannot wake an idle agent. Without a listener, use its **Copy prompt**
-handoff or ask the person to resume generate in agent chat; do not claim a permanent
-connection. On receiving a request,
-reread the named file and compare its revision with the request. If it changed,
-reconcile against the latest document instead of applying a stale rewrite.
-Apply every attached note to its named page, component or vector-element ID;
-without notes, respect the selected scope. Preserve unrelated edits and stable
-IDs. A request is already marked working when `wait` returns; it is not deleted.
-Validate, render, inspect and repair the result, then run
-`node "<cli>" finish "<composition.json>" <request-id> --message "Updated and checked"`.
-File changes alone do not resolve notes. If blocked, finish with
-`--status needs-clarification --message "..."` or `--status failed --message "..."`;
-unresolved notes remain for retry. Never mark a partially handled batch done.
-Use `node "<cli>" request "<composition.json>"` to recover an interrupted request and
-verify it is still active before further writes. Cancellation does not stop your
-process: stop work if the request is no longer active. Do not edit the feedback
-sidecar directly. Return to `wait` only when the person requested a continuing loop.
-
-See `<root>/docs/workflow.md` for the full handoff contract.
-Never bypass revision checks or mutate hidden browser storage to replace the
-document. Do not publish without permission.
+Do not publish, push, deploy, or create a release without explicit permission.

package/skills/konpeki/assets/blank.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Untitled visual</title>
+  <link rel="stylesheet" href="theme.css">
+  <style>
+    h1 { max-width: 850px; }
+    p { max-width: 760px; margin-top: var(--kp-space-3); color: var(--kp-muted); }
+  </style>
+</head>
+<body>
+  <main id="page-1" data-page data-size="link">
+    <h1 id="title">Untitled visual</h1>
+  </main>
+</body>
+</html>