@compilr-dev/sdk 0.18.10 → 0.19.0

package/dist/platform/tools/canvas-tools.js

@@ -12,9 +12,17 @@
  */
 import { defineTool, createSuccessResult, createErrorResult } from '@compilr-dev/agents';
 import { truncateContent } from './truncate.js';
+import { runQualityChecks } from '../../canvas/quality-checks.js';
+import { resolveCanvasAssets, isValidAssetRef, missingAssetRefs, assetPayloadBytes, referencedAssets, ASSET_BUDGET_BYTES, DEFAULT_ASSET_WIDTH, } from '../../canvas/assets.js';
+import { resolveCwd } from '../context.js';
+import * as fsNode from 'node:fs';
+import * as pathNode from 'node:path';
 const PAGE_SIZES = ['16:9', '4:3', '1:1', '4:5', '9:16'];
 import { seedValues } from '../../canvas/types.js';
 import { validateControlManifest } from '../../canvas/validate.js';
+import { canvasSkill, infographicSkill, carouselSkill, boardSkill, canvasStylesSkill, } from '../../skills/canvas-skills.js';
+import { canvasExemplarInfographicSkill, canvasExemplarAppScreenSkill, } from '../../skills/canvas-exemplars.js';
+import { canvasIconsSkill } from '../../skills/canvas-icons.js';
 const CANVAS_TYPES = ['infographic', 'carousel', 'board'];
 /** Render content as numbered lines (1-based), optionally a slice. */
 function numberedLines(content, startLine, maxLines) {
@@ -133,7 +141,7 @@ function offCanvasNodes(src, bounds) {
     return out;
 }
 /** Run deterministic static checks on canvas content. No rendering. */
-export function runCanvasChecks(html, type) {
+export function runCanvasChecks(html, type, manifest) {
     const issues = [];
     const src = html.trim();
     if (!src) {
@@ -200,10 +208,18 @@ export function runCanvasChecks(html, type) {
             });
         }
     }
+    /*
+      The quality checks — surfaces, contrast, hue count, dead Tweaks. A separate module
+      because they are pure arithmetic on declared values and want testing without a
+      platform context; see `canvas/quality-checks.ts` for what each one deliberately
+      cannot know.
+    */
+    for (const issue of runQualityChecks(src, manifest))
+        issues.push(issue);
     return issues;
 }
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function createCanvasTools(config) {
+export function createCanvasTools(config, imageConfig) {
     const ctx = config.context;
     const canvases = ctx.canvases;
     if (!canvases)
@@ -294,7 +310,19 @@ export function createCanvasTools(config) {
                     });
                     if (!updated)
                         return createErrorResult(`Canvas ${String(input.canvas_id)} not found.`);
-                    return createSuccessResult(`Updated canvas "${updated.title}" (${updated.type})\nID: ${String(updated.id)}`);
+                    /*
+                      ⚠️ The prose is UNCHANGED, deliberately. Desktop's auto-split parses the id out
+                      of this exact wording (`renderer/src/lib/canvas-authored.ts`), and the model has
+                      been reading it for every canvas it has ever written. The id now also travels as
+                      a structured sibling so the host can stop regex-parsing prose — but both must
+                      ship together for one version, or a Desktop that has not updated silently stops
+                      splitting on author.
+                    */
+                    return {
+                        success: true,
+                        result: `Updated canvas "${updated.title}" (${updated.type})\nID: ${String(updated.id)}`,
+                        canvas: { id: updated.id, title: updated.title, type: updated.type, action: 'updated' },
+                    };
                 }
                 const projectId = input.project_id ?? ctx.currentProjectId;
                 if (!projectId) {
@@ -310,7 +338,11 @@ export function createCanvasTools(config) {
                     values: seedValues(controls),
                     pageSize: input.page_size,
                 });
-                return createSuccessResult(`Created canvas "${created.title}" (${created.type})\nID: ${String(created.id)}`);
+                return {
+                    success: true,
+                    result: `Created canvas "${created.title}" (${created.type})\nID: ${String(created.id)}`,
+                    canvas: { id: created.id, title: created.title, type: created.type, action: 'created' },
+                };
             }
             catch (error) {
                 return createErrorResult(`Failed to write canvas: ${error instanceof Error ? error.message : String(error)}`);
@@ -537,12 +569,17 @@ export function createCanvasTools(config) {
             try {
                 let html;
                 let type;
+                // ⚠️ The manifest travels with a STORED canvas only. Validating raw html has no
+                // manifest to check against, so the dead-Tweak check is silent there rather than
+                // reporting every control as unbound — a canvas is written before it is stored.
+                let manifest;
                 if (input.canvas_id !== undefined) {
                     const c = await canvases.getById(input.canvas_id);
                     if (!c)
                         return createErrorResult(`Canvas ${String(input.canvas_id)} not found.`);
                     html = c.content;
                     type = c.type;
+                    manifest = c.controls;
                 }
                 else if (input.html !== undefined) {
                     html = input.html;
@@ -551,7 +588,23 @@ export function createCanvasTools(config) {
                 else {
                     return createErrorResult('Provide canvas_id (a stored canvas) or html (+ type) to validate.');
                 }
-                const issues = runCanvasChecks(html, type);
+                const issues = runCanvasChecks(html, type, manifest);
+                /*
+                  ⚠️ The check that makes the asset indirection safe. `asset:typo` is not a real
+                  scheme — the CSP drops it — so without this a mistyped reference renders a hole
+                  in the canvas and reports nothing anywhere.
+                */
+                if (input.canvas_id !== undefined && canvases.listAssets) {
+                    const assets = await canvases.listAssets(input.canvas_id);
+                    for (const ref of missingAssetRefs(html, assets)) {
+                        issues.push({
+                            level: 'error',
+                            message: `The markup references asset:${ref} but no such image is stored on this ` +
+                                'canvas, so it will not render. Add it with canvas_asset_add, or check the ' +
+                                'handle with canvas_asset_list.',
+                        });
+                    }
+                }
                 if (issues.length === 0) {
                     return createSuccessResult('✓ Passed all static checks — no structural/technical issues. (Visual/aesthetic review is a separate pass.)');
                 }
@@ -603,7 +656,18 @@ export function createCanvasTools(config) {
                 const c = await canvases.getById(input.canvas_id);
                 if (!c)
                     return createErrorResult(`Canvas ${String(input.canvas_id)} not found.`);
-                const img = await renderer.renderToImage({ content: c.content, type: c.type });
+                /*
+                  ⚠️ Resolve assets HERE, not in the host renderer. This tool has the canvas id and
+                  the repository; `renderToImage` receives only html, so pushing substitution into
+                  the host would mean every host reimplementing it — and the screenshot the review
+                  gate judges would differ from the canvas the user sees the moment one of them
+                  drifted.
+                */
+                const shotAssets = canvases.listAssets ? await canvases.listAssets(c.id) : [];
+                const img = await renderer.renderToImage({
+                    content: resolveCanvasAssets(c.content, shotAssets),
+                    type: c.type,
+                });
                 return {
                     success: true,
                     result: `Rendered "${c.title}" (${c.type}). Review the image below — check for overflow / cut-off content, ` +
@@ -625,6 +689,248 @@ export function createCanvasTools(config) {
             }
         },
     });
+    /*
+      ⚠️ THIS TOOL EXISTS BECAUSE THE CRAFT GUIDANCE WAS UNREACHABLE.
+  
+      Skills are delivered by the HOST when a user types a slash command — Desktop fetches
+      the prompt and sends it as a user message. Nothing else delivers them: there is no
+      path from the agent to a skill, and the capability pack's snippet covers mechanics
+      only (canvas_write, the CSP, editing). So "make me an infographic" produced a canvas
+      authored with no design guidance at all, and every rule about hierarchy, restraint and
+      the elevation ramp reached the model only if the user happened to know to type
+      `/canvas` first.
+  
+      That is the wrong shape: the agent, not the user, is the one who knows it is about to
+      author a canvas. So the guides become readable on demand — lazy, like the pack itself,
+      costing nothing until a canvas is actually being made.
+    */
+    const canvasGuideTool = defineTool({
+        name: 'canvas_guide',
+        description: 'Read the design guidance for a canvas BEFORE authoring one. Call with topic "canvas" ' +
+            'first — it covers the steps, the sandbox rules and the theme tokens, and routes you to ' +
+            'the right craft guide. Then read the guide for the type you picked ("infographic", ' +
+            '"carousel" or "board"), "styles" when choosing a look, and an "exemplar-*" topic for a ' +
+            'worked example to adapt. Skipping this produces a canvas that renders but reads as ' +
+            'generic — the exemplars in particular are worth more than any amount of description.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                topic: {
+                    type: 'string',
+                    enum: [
+                        'canvas',
+                        'infographic',
+                        'carousel',
+                        'board',
+                        'styles',
+                        'exemplar-infographic',
+                        'exemplar-app-screen',
+                        'icons',
+                    ],
+                    description: 'canvas = mechanics + steps (read this first) · infographic/carousel/board = the ' +
+                        'craft guide for that type · styles = the aesthetic catalogue · ' +
+                        'exemplar-infographic / exemplar-app-screen = a worked example to adapt, which is ' +
+                        'worth more than any amount of description.',
+                },
+            },
+            required: ['topic'],
+        },
+        execute: (input) => {
+            /*
+              ⚠️ `| undefined` is load-bearing. Without it `Record<string, T>` indexing claims a
+              value for every key, so the linter calls the guard below dead code — while at
+              runtime an unknown topic is exactly what it catches (asserted in canvas-guide
+              tests). The type was lying, not the guard.
+            */
+            const guides = {
+                canvas: canvasSkill,
+                infographic: infographicSkill,
+                carousel: carouselSkill,
+                board: boardSkill,
+                styles: canvasStylesSkill,
+                'exemplar-infographic': canvasExemplarInfographicSkill,
+                'exemplar-app-screen': canvasExemplarAppScreenSkill,
+                icons: canvasIconsSkill,
+            };
+            const guide = guides[input.topic];
+            if (!guide) {
+                return Promise.resolve(createErrorResult(`Unknown topic "${input.topic}". One of: ${Object.keys(guides).join(', ')}.`));
+            }
+            return Promise.resolve(createSuccessResult(guide.prompt));
+        },
+    });
+    // ---------------------------------------------------------------------------
+    // Assets — real images, stored beside the canvas
+    // ---------------------------------------------------------------------------
+    /*
+      ⚠️ THIS EXISTS BECAUSE THE AGENT COULD SEE IMAGES AND NOT USE THEM. `view_image` gives
+      vision; nothing returned bytes, so an agent asked to mock a page with the user's own
+      product photos had no path from "I can see it" to "it is in the canvas" — and said so,
+      blaming a sandbox that was not the real obstacle.
+  
+      The bytes do NOT go into the markup. The canvas references `asset:<ref>` and the host
+      substitutes a data URI when it renders and when it exports; see `canvas/assets.ts` for
+      why inlining would break `canvas_edit`.
+    */
+    const canvasAssetAddTool = defineTool({
+        name: 'canvas_asset_add',
+        description: 'Add a real image to a canvas so its markup can show it. Reads the file, resizes it ' +
+            'to display size, stores it against the canvas, and returns the reference to use: ' +
+            'write <img src="asset:REF" alt="..."> in the HTML. Use this for a user\'s own ' +
+            'photos, logos or screenshots — do NOT paste base64 into the canvas, and do not draw ' +
+            'a grey placeholder box when a real image was provided.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                canvas_id: { type: 'number', description: 'The canvas to attach the image to.' },
+                path: {
+                    type: 'string',
+                    description: 'Image file path (absolute, or relative to the project directory).',
+                },
+                ref: {
+                    type: 'string',
+                    description: 'Short handle used as asset:REF in the markup — lowercase letters, digits and ' +
+                        'dashes (e.g. "hero", "product-1"). Re-using a handle replaces that image.',
+                },
+                max_width: {
+                    type: 'number',
+                    description: `Resize target in px (default ${String(DEFAULT_ASSET_WIDTH)}). Use the size it ` +
+                        'is DISPLAYED at — a product card needs ~480, a hero ~1200. Bigger costs the ' +
+                        'canvas and every export.',
+                },
+            },
+            required: ['canvas_id', 'path', 'ref'],
+        },
+        execute: async (input) => {
+            if (!canvases.addAsset || !canvases.listAssets) {
+                return createErrorResult('This host does not support canvas assets (its canvas storage predates them). ' +
+                    'Draw the layout without the image and tell the user why.');
+            }
+            if (!isValidAssetRef(input.ref)) {
+                return createErrorResult(`Invalid ref "${input.ref}". Use lowercase letters, digits and dashes, e.g. "hero".`);
+            }
+            const canvas = await canvases.getById(input.canvas_id);
+            if (!canvas)
+                return createErrorResult(`Canvas ${String(input.canvas_id)} not found.`);
+            const filePath = pathNode.isAbsolute(input.path)
+                ? input.path
+                : pathNode.resolve(resolveCwd(config.cwd), input.path);
+            if (!fsNode.existsSync(filePath)) {
+                return createErrorResult(`File not found: ${input.path} (looked in ${pathNode.dirname(filePath)}). ` +
+                    'Pass an absolute path if the file is outside the project.');
+            }
+            const ext = pathNode.extname(filePath).toLowerCase();
+            const mediaTypes = {
+                '.png': 'image/png',
+                '.jpg': 'image/jpeg',
+                '.jpeg': 'image/jpeg',
+                '.gif': 'image/gif',
+                '.webp': 'image/webp',
+            };
+            const sourceType = mediaTypes[ext];
+            if (!sourceType) {
+                return createErrorResult(`Unsupported image type "${ext}". Supported: ${Object.keys(mediaTypes).join(', ')}.`);
+            }
+            let bytes = fsNode.readFileSync(filePath);
+            let mediaType = sourceType;
+            let width;
+            let height;
+            /*
+              ⚠️ Resize where a resizer exists, and say so when it does not. A phone photo is
+              several MB; stored raw it is paid again in every export and in the model's own
+              reading of the canvas. Without a host resizer the file is stored as-is, and the
+              budget below is what stops that being silent.
+            */
+            if (imageConfig?.resizer) {
+                try {
+                    const out = await imageConfig.resizer.resize(bytes, input.max_width ?? DEFAULT_ASSET_WIDTH);
+                    bytes = out.data;
+                    width = out.width;
+                    height = out.height;
+                    mediaType = out.mediaType;
+                }
+                catch {
+                    // Keep the original — a failed resize must not lose the image.
+                }
+            }
+            const data = Buffer.from(bytes).toString('base64');
+            const existing = await canvases.listAssets(input.canvas_id);
+            const others = existing.filter((a) => a.ref.toLowerCase() !== input.ref.toLowerCase());
+            const projected = others.reduce((n, a) => n + a.bytes, 0) + data.length;
+            if (projected > ASSET_BUDGET_BYTES) {
+                return createErrorResult(`That would put this canvas at ${String(Math.round(projected / 1024))}KB of images, ` +
+                    `over the ${String(Math.round(ASSET_BUDGET_BYTES / 1024))}KB budget. Re-add with a ` +
+                    'smaller max_width, or remove an image you are not using with canvas_asset_delete.');
+            }
+            const asset = await canvases.addAsset({
+                canvasId: input.canvas_id,
+                ref: input.ref.toLowerCase(),
+                mediaType,
+                data,
+                width,
+                height,
+                bytes: data.length,
+                sourcePath: filePath,
+            });
+            const dims = width && height ? ` ${String(width)}x${String(height)}` : '';
+            return createSuccessResult(`Stored "${asset.ref}"${dims} (${String(Math.round(asset.bytes / 1024))}KB, ` +
+                `${asset.mediaType}). Reference it in the canvas as: ` +
+                `<img src="asset:${asset.ref}" alt="describe what it shows">`);
+        },
+    });
+    const canvasAssetListTool = defineTool({
+        name: 'canvas_asset_list',
+        description: 'List the images stored on a canvas, with the reference to use for each and whether ' +
+            'the markup currently uses it.',
+        inputSchema: {
+            type: 'object',
+            properties: { canvas_id: { type: 'number', description: 'The canvas.' } },
+            required: ['canvas_id'],
+        },
+        execute: async (input) => {
+            if (!canvases.listAssets) {
+                return createErrorResult('This host does not support canvas assets.');
+            }
+            const canvas = await canvases.getById(input.canvas_id);
+            if (!canvas)
+                return createErrorResult(`Canvas ${String(input.canvas_id)} not found.`);
+            const assets = await canvases.listAssets(input.canvas_id);
+            if (assets.length === 0) {
+                return createSuccessResult('No images on this canvas. Add one with canvas_asset_add.');
+            }
+            const used = new Set(referencedAssets(canvas.content));
+            const lines = assets.map((a) => {
+                const dims = a.width && a.height ? `${String(a.width)}x${String(a.height)}` : '—';
+                const where = used.has(a.ref) ? 'used' : 'NOT referenced';
+                return `  asset:${a.ref}  ${dims}  ${String(Math.round(a.bytes / 1024))}KB  ${where}`;
+            });
+            const total = assetPayloadBytes(canvas.content, assets);
+            return createSuccessResult(`${String(assets.length)} image(s):\n${lines.join('\n')}\n` +
+                `In use: ${String(Math.round(total / 1024))}KB of the ` +
+                `${String(Math.round(ASSET_BUDGET_BYTES / 1024))}KB budget.`);
+        },
+    });
+    const canvasAssetDeleteTool = defineTool({
+        name: 'canvas_asset_delete',
+        description: 'Remove an image from a canvas.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                canvas_id: { type: 'number', description: 'The canvas.' },
+                ref: { type: 'string', description: 'The asset reference to remove.' },
+            },
+            required: ['canvas_id', 'ref'],
+        },
+        execute: async (input) => {
+            if (!canvases.deleteAsset) {
+                return createErrorResult('This host does not support canvas assets.');
+            }
+            const gone = await canvases.deleteAsset(input.canvas_id, input.ref.toLowerCase());
+            return gone
+                ? createSuccessResult(`Removed "${input.ref}".`)
+                : createErrorResult(`No asset "${input.ref}" on canvas ${String(input.canvas_id)}.`);
+        },
+    });
     return [
         canvasWriteTool,
         canvasEditTool,
@@ -633,5 +939,9 @@ export function createCanvasTools(config) {
         canvasDeleteTool,
         canvasValidateTool,
         canvasScreenshotTool,
+        canvasGuideTool,
+        canvasAssetAddTool,
+        canvasAssetListTool,
+        canvasAssetDeleteTool,
     ];
 }

package/dist/platform/tools/image-tools.d.ts

@@ -25,8 +25,15 @@ export interface ImageResizer {
     }>;
 }
 export interface ImageToolsConfig {
-    /** Working directory for resolving relative paths */
-    cwd?: string;
+    /**
+     * Working directory for resolving relative paths.
+     *
+     * ⚠️ A FUNCTION, when the host's working directory can change. Platform tools are
+     * built once and memoised, so a string is captured at construction — which in Desktop
+     * meant every relative path resolved against whichever project happened to be open
+     * first, for the rest of the session. Pass a getter and it is resolved per call.
+     */
+    cwd?: string | (() => string | undefined | null);
     /** Optional image resizer (e.g., nativeImage in Electron) */
     resizer?: ImageResizer;
     /** Max dimension for resize (default: 1568) */

package/dist/platform/tools/image-tools.js

@@ -10,6 +10,7 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { defineTool, createErrorResult } from '@compilr-dev/agents';
+import { resolveCwd } from '../context.js';
 /** Supported image MIME types */
 const IMAGE_EXTENSIONS = {
     '.png': 'image/png',
@@ -27,7 +28,6 @@ const MAX_FILE_SIZE = 10 * 1024 * 1024;
 export const DEFAULT_MAX_DIMENSION = 1568;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createImageTools(config = {}) {
-    const cwd = config.cwd ?? process.cwd();
     const maxDimension = config.maxDimension ?? DEFAULT_MAX_DIMENSION;
     const viewImageTool = defineTool({
         name: 'view_image',
@@ -45,7 +45,9 @@ export function createImageTools(config = {}) {
         },
         execute: async (input) => {
             // Resolve path
-            const filePath = path.isAbsolute(input.path) ? input.path : path.resolve(cwd, input.path);
+            const filePath = path.isAbsolute(input.path)
+                ? input.path
+                : path.resolve(resolveCwd(config.cwd), input.path);
             // Validate file exists
             if (!fs.existsSync(filePath)) {
                 return createErrorResult(`File not found: ${input.path}`);

package/dist/platform/tools/index.js

@@ -29,7 +29,14 @@ export function createPlatformTools(config, options) {
     // Backwards compat: options can be ImageToolsConfig (old) or PlatformToolsOptions (new)
     let imageConfig;
     let planCallbacks;
-    if (options && 'planModeCallbacks' in options) {
+    /*
+      ⚠️ DISCRIMINATE ON EITHER KEY. This used to test only `'planModeCallbacks' in options`,
+      so a caller passing `{ imageConfig }` alone — the documented new shape, without plan
+      mode — fell through to the legacy branch and was read as an ImageToolsConfig whose only
+      property was a stray `imageConfig`. The resizer silently went missing, with no type
+      error, because every ImageToolsConfig field is optional.
+    */
+    if (options && ('planModeCallbacks' in options || 'imageConfig' in options)) {
         imageConfig = options.imageConfig;
         planCallbacks = options.planModeCallbacks;
     }
@@ -56,7 +63,8 @@ export function createPlatformTools(config, options) {
         tools.push(...createEpisodeTools(config));
     }
     if (config.context.canvases) {
-        tools.push(...createCanvasTools(config));
+        // The resizer is shared with view_image — canvas_asset_add resizes to display size.
+        tools.push(...createCanvasTools(config, imageConfig));
     }
     return tools;
 }

package/dist/platform/tools/project-tools.js

@@ -11,6 +11,7 @@
  * - All repo calls are properly await-ed
  */
 import { defineTool, createSuccessResult, createErrorResult } from '@compilr-dev/agents';
+import { resolveCwd } from '../context.js';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createProjectTools(config) {
     const { context: ctx, hooks } = config;
@@ -55,7 +56,7 @@ export function createProjectTools(config) {
                     project = await ctx.projects.findByPath(input.path);
                 }
                 else {
-                    const cwd = config.cwd ?? process.cwd();
+                    const cwd = resolveCwd(config.cwd);
                     project = await ctx.projects.findByPath(cwd);
                 }
                 if (!project) {
@@ -166,7 +167,7 @@ export function createProjectTools(config) {
                     return createErrorResult(`Project with name "${input.name}" already exists`);
                 }
                 // Check if a project exists at this path
-                const projectPath = input.path ?? config.cwd ?? process.cwd();
+                const projectPath = input.path ?? resolveCwd(config.cwd);
                 const existingByPath = await ctx.projects.findByPath(projectPath);
                 if (existingByPath) {
                     return createErrorResult(`A project already exists at path "${projectPath}": ${existingByPath.name}`);

package/dist/skills/canvas-exemplars.d.ts

@@ -0,0 +1,8 @@
+/** The light theme-flat exemplar, ready to adapt. */
+export declare const THEME_FLAT_EXEMPLAR = "<div style=\"--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #63656D; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #D5D7DE; width: 1000px; background: var(--canvas-bg); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--canvas-fg); padding: 40px;\">\n\n          <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px;\">\n            <div style=\"font-size: 11px; letter-spacing: 0.14em; font-weight: 600; color: var(--canvas-muted);\">Q3 DELIVERY REVIEW &nbsp;&middot;&nbsp; PLATFORM</div>\n            <div style=\"font-size: 11px; letter-spacing: 0.08em; color: var(--canvas-muted);\">as of 6 Sep 2026</div>\n          </div>\n\n          <div style=\"display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px;\">\n            <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 30px 32px;\">\n              <div style=\"font-size: 11px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent); margin-bottom: 16px;\">THE QUARTER IN ONE NUMBER</div>\n              <div style=\"font-size: 84px; line-height: 0.94; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 12px;\">41<span style=\"font-size: 40px; font-weight: 600; color: var(--canvas-muted);\"> of 47</span></div>\n              <div style=\"font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 14px; max-width: 22em;\">commitments shipped, and the six that slipped share one cause.</div>\n              <p style=\"font-size: 14px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0;\">Every delayed item was blocked on the migration, not on capacity. Team throughput rose 12% over Q2 while the queue behind a single dependency grew, which is why headcount is the wrong lever here.</p>\n            </div>\n\n            <div style=\"display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px;\">\n              <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n                <div>\n                  <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">CYCLE TIME</div>\n                  <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">6.2<span style=\"font-size: 15px; font-weight: 500; color: var(--canvas-muted);\"> days</span></div>\n                </div>\n                <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-accent); flex: none;\">&#9660; 1.8</div>\n              </div>\n              <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n                <div>\n                  <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">ESCAPED DEFECTS</div>\n                  <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">3</div>\n                </div>\n                <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;\">&#9660; 5</div>\n              </div>\n              <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n                <div>\n                  <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 6px;\">BLOCKED, NOW</div>\n                  <div style=\"font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;\">6</div>\n                </div>\n                <div style=\"font-size: 13px; font-weight: 600; color: var(--canvas-muted); flex: none;\">&#9650; 4</div>\n              </div>\n            </div>\n          </div>\n\n          <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\">\n\n            <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;\">\n              <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 18px;\">SHIPPED PER SPRINT</div>\n              <svg width=\"100%\" height=\"150\" viewBox=\"0 0 420 150\" style=\"display: block; overflow: visible;\">\n                <line x1=\"0\" y1=\"126\" x2=\"420\" y2=\"126\" style=\"stroke: var(--canvas-hairline, var(--canvas-border));\" stroke-width=\"1\"></line>\n                <rect x=\"10\" y=\"72\" width=\"46\" height=\"54\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n                <text x=\"33\" y=\"62\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">6</text>\n                <text x=\"33\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S1</text>\n                <rect x=\"76\" y=\"45\" width=\"46\" height=\"81\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n                <text x=\"99\" y=\"35\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">9</text>\n                <text x=\"99\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S2</text>\n                <rect x=\"142\" y=\"54\" width=\"46\" height=\"72\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n                <text x=\"165\" y=\"44\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">8</text>\n                <text x=\"165\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S3</text>\n                <rect x=\"208\" y=\"27\" width=\"46\" height=\"99\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n                <text x=\"231\" y=\"17\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">11</text>\n                <text x=\"231\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S4</text>\n                <rect x=\"274\" y=\"99\" width=\"46\" height=\"27\" style=\"fill: var(--canvas-accent);\"></rect>\n                <text x=\"297\" y=\"89\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-accent); font-family: system-ui, sans-serif;\">3</text>\n                <text x=\"297\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S5</text>\n                <rect x=\"340\" y=\"90\" width=\"46\" height=\"36\" style=\"fill: color-mix(in oklab, var(--canvas-fg) 22%, var(--canvas-bg));\"></rect>\n                <text x=\"363\" y=\"80\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" style=\"fill: var(--canvas-fg); font-family: system-ui, sans-serif;\">4</text>\n                <text x=\"363\" y=\"142\" text-anchor=\"middle\" font-size=\"11\" style=\"fill: var(--canvas-muted); font-family: system-ui, sans-serif;\">S6</text>\n              </svg>\n              <div style=\"font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 20px; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding-top: 12px;\">Sprint 5 is when the migration landed in the critical path.</div>\n            </div>\n\n            <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px 20px;\">\n              <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-bottom: 14px;\">THE SIX THAT SLIPPED</div>\n              <div style=\"background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border));\">\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);\"><span>COMMITMENT</span><span>BLOCKED BY</span><span style=\"text-align: right;\">DAYS</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Billing export</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">21</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Audit trail</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">18</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">SSO for teams</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">14</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Usage alerts</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">11</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Retention job</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">9</span></div>\n                <div style=\"display: grid; grid-template-columns: 1fr 88px 74px; gap: 12px; padding: 10px 14px; font-size: 13px; align-items: baseline;\"><span style=\"font-weight: 600;\">Region failover</span><span style=\"color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg));\">migration</span><span style=\"text-align: right; font-variant-numeric: tabular-nums;\">6</span></div>\n              </div>\n              <div style=\"font-size: 13px; line-height: 1.55; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin-top: 16px;\">One dependency, 79 days of accumulated delay.</div>\n            </div>\n          </div>\n\n          <div style=\"border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); margin-top: 26px; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted);\">\n            <span>PLATFORM &nbsp;&middot;&nbsp; QUARTERLY REVIEW</span>\n            <span>Source: delivery board, sprints 1&ndash;6</span>\n          </div>\n        </div>";
+/** The same markup in dark: only these nine values change. */
+export declare const THEME_FLAT_DARK_TOKENS = "--canvas-bg: #17181C; --canvas-fg: #ECEDF1; --canvas-muted: #9A9CA6; --canvas-accent: #FB7B4B; --canvas-card: #22242A; --canvas-border: #31333B; --canvas-surface-1: #22242A; --canvas-surface-2: #1B1D22; --canvas-hairline: #31333B";
+/** The app-screen exemplar — a single UI screen, four surfaces. */
+export declare const APP_SCREEN_EXEMPLAR = "<div style=\"--canvas-bg: #E9EAEE; --canvas-fg: #1B1C1F; --canvas-muted: #63656D; --canvas-accent: #C2410C; --canvas-card: #FFFFFF; --canvas-border: #D5D7DE; --canvas-surface-1: #FFFFFF; --canvas-surface-2: #F2F3F6; --canvas-hairline: #DCDEE4; width: 1000px; background: var(--canvas-surface-1, var(--canvas-card)); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--canvas-fg); display: grid; grid-template-columns: 232px 1fr;\">\n\n      <div style=\"border-right: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; flex-direction: column; min-height: 640px;\">\n        <div style=\"padding: 18px 18px 16px; display: flex; align-items: center; gap: 10px;\">\n          <span style=\"width: 28px; height: 28px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: center; flex: none;\">CO</span>\n          <span style=\"font-size: 15px; font-weight: 700; letter-spacing: -0.01em;\">Cohort</span>\n        </div>\n\n        <div style=\"padding: 6px 10px 0; display: flex; flex-direction: column; gap: 1px;\">\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in oklab, var(--canvas-accent) 10%, var(--canvas-surface-1, var(--canvas-card))); box-shadow: inset 2px 0 0 var(--canvas-accent); font-size: 13.5px; font-weight: 600;\">\n            <span style=\"font-size: 13px; flex: none; color: var(--canvas-accent);\">&#9632;</span>Overview\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><circle cx=\"6\" cy=\"6\" r=\"2.5\"></circle><path d=\"M2 13.5c.8-2.2 2.2-3.3 4-3.3s3.2 1.1 4 3.3\"></path><path d=\"M11 4.2a2.5 2.5 0 0 1 0 4.6\"></path></svg>Applicants\n            <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">248</span>\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" rx=\"1\"></rect><path d=\"M2.5 6.5h11M5.5 2v2.5M10.5 2v2.5\"></path></svg>Interviews\n            <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">67</span>\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M9.5 2H4.5A1.5 1.5 0 0 0 3 3.5v9A1.5 1.5 0 0 0 4.5 14h7a1.5 1.5 0 0 0 1.5-1.5V5.5z\"></path><path d=\"M9.5 2v3.5H13\"></path></svg>Documents\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M2 14h12\"></path><path d=\"M4.5 14V9M8 14V4.5M11.5 14V7\"></path></svg>Reports\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex: none; color: var(--canvas-muted);\"><path d=\"M2 5.5A1.5 1.5 0 0 1 3.5 4h2.2l1.3 1.6h5.5A1.5 1.5 0 0 1 14 7.1v5.4A1.5 1.5 0 0 1 12.5 14h-9A1.5 1.5 0 0 1 2 12.5z\"></path></svg>Programmes\n            <span style=\"margin-left: auto; font-size: 12px; color: var(--canvas-muted); font-variant-numeric: tabular-nums;\">12</span>\n          </div>\n        </div>\n\n        <div style=\"margin-top: auto; border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 12px 22px; font-size: 13.5px; color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Settings</div>\n        <div style=\"border-top: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 14px 18px; display: flex; align-items: center; gap: 10px;\">\n          <span style=\"width: 30px; height: 30px; background: var(--canvas-surface-2, var(--canvas-bg)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 11px; font-weight: 600; color: var(--canvas-muted); display: flex; align-items: center; justify-content: center; flex: none;\">RM</span>\n          <span>\n            <span style=\"display: block; font-size: 13px; font-weight: 600;\">Rita Marchetti</span>\n            <span style=\"display: block; font-size: 11px; color: var(--canvas-muted);\">Admissions lead</span>\n          </span>\n        </div>\n      </div>\n\n      <div style=\"display: flex; flex-direction: column;\">\n        <div style=\"padding: 20px 28px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;\">\n          <div>\n            <div style=\"font-size: 11px; letter-spacing: 0.06em; color: var(--canvas-muted); margin-bottom: 6px;\">Autumn 2027 &nbsp;/&nbsp; Admissions</div>\n            <div style=\"font-size: 26px; font-weight: 700; letter-spacing: -0.022em;\">Overview</div>\n          </div>\n          <div style=\"display: flex; align-items: center; gap: 8px; flex: none;\">\n            <span style=\"font-size: 13px; padding: 8px 14px; border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Export</span>\n            <span style=\"font-size: 13px; font-weight: 600; padding: 9px 15px; background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card));\">New applicant</span>\n          </div>\n        </div>\n        <div style=\"background: var(--canvas-surface-2, var(--canvas-bg)); padding: 20px 28px 26px; flex: 1; display: flex; flex-direction: column; gap: 16px;\">\n\n          <div style=\"display: grid; grid-template-columns: 1.45fr 1fr; gap: 16px;\">\n            <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); padding: 22px 24px;\">\n              <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px;\">\n                <div style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-accent);\">THIS WEEK</div>\n                <div style=\"font-size: 11px; color: var(--canvas-muted);\">updated 4 min ago</div>\n              </div>\n              <div style=\"font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -0.022em; margin-bottom: 10px; max-width: 20em;\">Interviews are keeping pace. Document review is not.</div>\n              <p style=\"font-size: 13.5px; line-height: 1.65; color: color-mix(in oklab, var(--canvas-fg) 78%, var(--canvas-bg)); margin: 0 0 16px;\">248 applicants across 12 programmes, and 67 have reached interview. The queue sits at document review, where 41 files have waited more than five days &mdash; two programmes account for 30 of them.</p>\n              <span style=\"display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--canvas-accent); border-bottom: 1px solid var(--canvas-accent); padding-bottom: 1px;\">Review the 41 waiting files</span>\n            </div>\n\n            <div style=\"background: var(--canvas-fg); color: var(--canvas-surface-1, var(--canvas-card)); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;\">\n              <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 12px;\">\n                <span style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600;\">PIPELINE</span>\n                <span style=\"font-size: 10px; letter-spacing: 0.06em; opacity: 0.62;\">stage by stage</span>\n              </div>\n              <div style=\"display: flex; flex-direction: column; gap: 11px;\">\n                <div>\n                  <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Applied</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">248</span></div>\n                  <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 100%; background: rgba(255,255,255,0.62);\"></div></div>\n                </div>\n                <div>\n                  <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Documents in</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">193</span></div>\n                  <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 78%; background: rgba(255,255,255,0.62);\"></div></div>\n                </div>\n                <div>\n                  <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Reviewed</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">152</span></div>\n                  <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 61%; background: var(--canvas-accent);\"></div></div>\n                </div>\n                <div>\n                  <div style=\"display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px;\"><span style=\"opacity: 0.75;\">Interviewed</span><span style=\"font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;\">67</span></div>\n                  <div style=\"height: 4px; background: rgba(255,255,255,0.16); margin-top: 5px;\"><div style=\"height: 4px; width: 27%; background: rgba(255,255,255,0.62);\"></div></div>\n                </div>\n              </div>\n              <div style=\"margin-top: auto; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 11px; font-size: 12px; opacity: 0.82;\">41 files stalled at review</div>\n            </div>\n          </div>\n\n          <div style=\"display: flex; align-items: center; gap: 8px;\">\n            <span style=\"font-size: 10px; letter-spacing: 0.12em; font-weight: 600; color: var(--canvas-muted); margin-right: 4px;\">FACULTY</span>\n            <span style=\"font-size: 12.5px; font-weight: 600; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-fg);\">All <span style=\"color: var(--canvas-muted); font-weight: 400;\">12</span></span>\n            <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Design <span style=\"color: var(--canvas-muted);\">4</span></span>\n            <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Business <span style=\"color: var(--canvas-muted);\">5</span></span>\n            <span style=\"font-size: 12.5px; padding: 6px 12px; background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border)); color: color-mix(in oklab, var(--canvas-fg) 82%, var(--canvas-bg));\">Engineering <span style=\"color: var(--canvas-muted);\">3</span></span>\n          </div>\n\n          <div style=\"background: var(--canvas-surface-1, var(--canvas-card)); border: 1px solid var(--canvas-hairline, var(--canvas-border));\">\n            <div style=\"padding: 13px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); display: flex; align-items: baseline; justify-content: space-between; gap: 16px;\">\n              <span style=\"font-size: 14px; font-weight: 600;\">Programmes needing attention</span>\n              <span style=\"font-size: 12px; color: var(--canvas-muted);\">4 of 12</span>\n            </div>\n            <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 9px 18px; background: var(--canvas-surface-2, var(--canvas-bg)); border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 10px; letter-spacing: 0.1em; font-weight: 600; color: var(--canvas-muted);\">\n              <span>PROGRAMME</span><span>REVIEW</span><span style=\"text-align: right;\">APPLIED</span><span style=\"text-align: right;\">OFFERS</span><span style=\"text-align: right;\">WAITING</span>\n            </div>\n            <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n              <span style=\"font-weight: 600;\">MSc Product Design</span>\n              <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 38%; background: var(--canvas-accent);\"></span></span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">31</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">4</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);\">17</span>\n            </div>\n            <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n              <span style=\"font-weight: 600;\">MBA Sustainable Business</span>\n              <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 46%; background: var(--canvas-accent);\"></span></span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">28</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">6</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--canvas-accent);\">13</span>\n            </div>\n            <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--canvas-hairline, var(--canvas-border)); font-size: 13px; align-items: center;\">\n              <span style=\"font-weight: 600;\">MA Curation</span>\n              <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 71%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));\"></span></span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">19</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">5</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">7</span>\n            </div>\n            <div style=\"display: grid; grid-template-columns: 1.6fr 120px 84px 84px 92px; gap: 14px; padding: 12px 18px; font-size: 13px; align-items: center;\">\n              <span style=\"font-weight: 600;\">MEng Robotics</span>\n              <span style=\"height: 5px; background: var(--canvas-surface-2, var(--canvas-bg));\"><span style=\"display: block; height: 5px; width: 83%; background: color-mix(in oklab, var(--canvas-fg) 32%, var(--canvas-bg));\"></span></span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">24</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">9</span>\n              <span style=\"text-align: right; font-variant-numeric: tabular-nums;\">4</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>";
+export declare const canvasExemplarInfographicSkill: import("@compilr-dev/agents").Skill;
+export declare const canvasExemplarAppScreenSkill: import("@compilr-dev/agents").Skill;