@viewscript/renderer 0.1.0-202605140639

package/dist/semantic/semantic-translator.js

@@ -0,0 +1,398 @@
+/**
+ * Semantic Translator for P/Q Dimension Bridge (Phase 7: Task 20)
+ *
+ * This module converts raw solver output (VarId -> Rational maps) into
+ * entity-level coordinate descriptions suitable for LLM comprehension.
+ *
+ * ## Purpose
+ *
+ * The P-dimension solver produces solutions in the form:
+ *   { "1:x": "100/1", "1:y": "200/1", "2:x": "300/1", ... }
+ *
+ * This is not LLM-friendly. The SemanticTranslator converts this to:
+ *   {
+ *     entities: [
+ *       { entityId: 1, coordinates: { x: 100, y: 200 }, description: "Point at (100, 200)" },
+ *       { entityId: 2, coordinates: { x: 300, y: 150 }, description: "Point at (300, 150)" }
+ *     ],
+ *     relationships: [
+ *       { type: "distance", from: 1, to: 2, value: "~212 units" }
+ *     ]
+ *   }
+ *
+ * ## Axiom 2: Ouroboros Binding
+ *
+ * This module sits at the P/Q dimension boundary. It translates deterministic
+ * solver output (P) into natural language suitable for non-deterministic
+ * oracles (Q/LLM).
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * const translator = new SemanticTranslator(entityRegistry);
+ * const semanticSolution = translator.translateSolution(rawSolution);
+ * const diff = translator.compareSolutions(solution1, solution2);
+ * ```
+ */
+// =============================================================================
+// SemanticTranslator Implementation
+// =============================================================================
+/**
+ * Translates raw solver output to LLM-friendly semantic descriptions.
+ */
+export class SemanticTranslator {
+    registry;
+    constructor(registry) {
+        this.registry = registry;
+    }
+    /**
+     * Parse a raw VarId key (e.g., "5:x") into its components.
+     */
+    parseVarId(key) {
+        const [entityStr, component] = key.split(':');
+        if (!entityStr || !component)
+            return null;
+        const entityId = parseInt(entityStr, 10);
+        if (isNaN(entityId))
+            return null;
+        const validComponents = [
+            'x', 'y', 'z', 't', 'value', 'r', 'g', 'b', 'alpha', 'position',
+        ];
+        if (!validComponents.includes(component))
+            return null;
+        return { entityId, component: component };
+    }
+    /**
+     * Parse a rational string (e.g., "100/1" or "100") to a number.
+     *
+     * WARNING: This converts P-dimension exact rationals to Q-dimension floats.
+     * Only use for display/LLM consumption, NEVER for constraint solving.
+     */
+    parseRationalToFloat(value) {
+        const parts = value.split('/');
+        if (parts.length === 2) {
+            const num = parseFloat(parts[0]);
+            const denom = parseFloat(parts[1]);
+            if (denom === 0)
+                return NaN;
+            return num / denom;
+        }
+        return parseFloat(value);
+    }
+    /**
+     * Translate a raw solution to a semantic solution.
+     */
+    translateSolution(rawSolution, solutionIndex = 0) {
+        // Group by entity
+        const entityMap = new Map();
+        for (const [key, value] of rawSolution) {
+            const parsed = this.parseVarId(key);
+            if (!parsed)
+                continue;
+            let components = entityMap.get(parsed.entityId);
+            if (!components) {
+                components = new Map();
+                entityMap.set(parsed.entityId, components);
+            }
+            components.set(parsed.component, this.parseRationalToFloat(value));
+        }
+        // Build semantic entities
+        const entities = [];
+        for (const [entityId, components] of entityMap) {
+            const metadata = this.registry.get(entityId);
+            const entity = this.buildSemanticEntity(entityId, metadata?.type ?? 'unknown', metadata?.name, components);
+            entities.push(entity);
+        }
+        // Sort by entity ID for consistent output
+        entities.sort((a, b) => a.entityId - b.entityId);
+        // Derive relationships
+        const relationships = this.deriveRelationships(entities);
+        // Generate summary
+        const summary = this.generateSummary(entities, relationships);
+        return {
+            solutionIndex,
+            entities,
+            relationships,
+            summary,
+        };
+    }
+    /**
+     * Build a semantic entity from raw components.
+     */
+    buildSemanticEntity(entityId, type, name, components) {
+        const entity = {
+            entityId,
+            type,
+            name,
+            description: '',
+        };
+        // Build coordinates/color/scalar based on entity type
+        if (type === 'color_stop') {
+            entity.color = {
+                r: components.get('r'),
+                g: components.get('g'),
+                b: components.get('b'),
+                alpha: components.get('alpha'),
+                position: components.get('position'),
+            };
+            entity.description = this.describeColorStop(entity.color, name);
+        }
+        else if (type === 'scalar') {
+            entity.scalar = {
+                value: components.get('value'),
+            };
+            entity.description = this.describeScalar(entity.scalar, name);
+        }
+        else {
+            // Spatial entity
+            entity.coordinates = {
+                x: components.get('x'),
+                y: components.get('y'),
+                z: components.get('z'),
+                t: components.get('t'),
+            };
+            entity.description = this.describeSpatialEntity(type, entity.coordinates, name);
+        }
+        return entity;
+    }
+    /**
+     * Generate description for a spatial entity.
+     */
+    describeSpatialEntity(type, coords, name) {
+        const nameStr = name ? `"${name}" ` : '';
+        const x = coords.x !== undefined ? this.formatCoord(coords.x) : '?';
+        const y = coords.y !== undefined ? this.formatCoord(coords.y) : '?';
+        switch (type) {
+            case 'point':
+            case 'control_point':
+                return `${nameStr}${type === 'control_point' ? 'Control point' : 'Point'} at (${x}, ${y})`;
+            case 'rect':
+                return `${nameStr}Rectangle at (${x}, ${y})`;
+            case 'circle':
+                return `${nameStr}Circle centered at (${x}, ${y})`;
+            case 'text':
+                return `${nameStr}Text at (${x}, ${y})`;
+            default:
+                return `${nameStr}Entity ${type} at (${x}, ${y})`;
+        }
+    }
+    /**
+     * Generate description for a color stop.
+     */
+    describeColorStop(color, name) {
+        const nameStr = name ? `"${name}" ` : '';
+        const r = color.r !== undefined ? Math.round(color.r) : '?';
+        const g = color.g !== undefined ? Math.round(color.g) : '?';
+        const b = color.b !== undefined ? Math.round(color.b) : '?';
+        const pos = color.position !== undefined ? `${(color.position * 100).toFixed(0)}%` : '?';
+        return `${nameStr}Color stop at ${pos}: rgb(${r}, ${g}, ${b})`;
+    }
+    /**
+     * Generate description for a scalar entity.
+     */
+    describeScalar(scalar, name) {
+        const nameStr = name ? `"${name}"` : 'Scalar';
+        const val = scalar.value !== undefined ? this.formatCoord(scalar.value) : '?';
+        return `${nameStr} = ${val}`;
+    }
+    /**
+     * Format a coordinate value for display.
+     */
+    formatCoord(value) {
+        // Round to reasonable precision for display
+        if (Number.isInteger(value)) {
+            return value.toString();
+        }
+        return value.toFixed(2).replace(/\.?0+$/, '');
+    }
+    /**
+     * Derive geometric relationships between entities.
+     */
+    deriveRelationships(entities) {
+        const relationships = [];
+        // Find horizontally aligned entities (same Y)
+        const byY = new Map();
+        for (const entity of entities) {
+            if (entity.coordinates?.y !== undefined) {
+                const y = Math.round(entity.coordinates.y);
+                let list = byY.get(y);
+                if (!list) {
+                    list = [];
+                    byY.set(y, list);
+                }
+                list.push(entity);
+            }
+        }
+        for (const [y, aligned] of byY) {
+            if (aligned.length >= 2) {
+                const ids = aligned.map(e => e.entityId).join(', ');
+                relationships.push({
+                    type: 'alignment',
+                    fromEntityId: aligned[0].entityId,
+                    toEntityId: aligned[aligned.length - 1].entityId,
+                    description: `Entities ${ids} are horizontally aligned at y=${y}`,
+                });
+            }
+        }
+        // Find vertically aligned entities (same X)
+        const byX = new Map();
+        for (const entity of entities) {
+            if (entity.coordinates?.x !== undefined) {
+                const x = Math.round(entity.coordinates.x);
+                let list = byX.get(x);
+                if (!list) {
+                    list = [];
+                    byX.set(x, list);
+                }
+                list.push(entity);
+            }
+        }
+        for (const [x, aligned] of byX) {
+            if (aligned.length >= 2) {
+                const ids = aligned.map(e => e.entityId).join(', ');
+                relationships.push({
+                    type: 'alignment',
+                    fromEntityId: aligned[0].entityId,
+                    toEntityId: aligned[aligned.length - 1].entityId,
+                    description: `Entities ${ids} are vertically aligned at x=${x}`,
+                });
+            }
+        }
+        return relationships;
+    }
+    /**
+     * Generate a high-level summary of the solution.
+     */
+    generateSummary(entities, relationships) {
+        const entityCounts = new Map();
+        for (const entity of entities) {
+            entityCounts.set(entity.type, (entityCounts.get(entity.type) ?? 0) + 1);
+        }
+        const parts = [];
+        for (const [type, count] of entityCounts) {
+            parts.push(`${count} ${type}${count > 1 ? 's' : ''}`);
+        }
+        let summary = `Solution with ${entities.length} entities: ${parts.join(', ')}.`;
+        if (relationships.length > 0) {
+            summary += ` ${relationships.length} geometric relationship${relationships.length > 1 ? 's' : ''} detected.`;
+        }
+        return summary;
+    }
+    /**
+     * Compare two solutions and generate a diff.
+     */
+    compareSolutions(solution1, solution2) {
+        const diffs = [];
+        const entities1 = new Map(solution1.entities.map(e => [e.entityId, e]));
+        const entities2 = new Map(solution2.entities.map(e => [e.entityId, e]));
+        // Find entities that differ
+        for (const [entityId, e1] of entities1) {
+            const e2 = entities2.get(entityId);
+            if (!e2)
+                continue;
+            if (!this.entitiesEqual(e1, e2)) {
+                diffs.push({
+                    entityId,
+                    name: e1.name ?? e2.name,
+                    solution1: e1,
+                    solution2: e2,
+                    description: this.describeDiff(e1, e2),
+                });
+            }
+        }
+        const summary = diffs.length === 0
+            ? 'Solutions are identical'
+            : `${diffs.length} entities differ: ${diffs.map(d => d.entityId).join(', ')}`;
+        return { differingEntities: diffs, summary };
+    }
+    /**
+     * Check if two semantic entities are equal.
+     */
+    entitiesEqual(e1, e2) {
+        const tolerance = 1e-6;
+        if (e1.coordinates && e2.coordinates) {
+            for (const key of ['x', 'y', 'z', 't']) {
+                const v1 = e1.coordinates[key];
+                const v2 = e2.coordinates[key];
+                if (v1 !== undefined && v2 !== undefined && Math.abs(v1 - v2) > tolerance) {
+                    return false;
+                }
+            }
+        }
+        if (e1.color && e2.color) {
+            for (const key of ['r', 'g', 'b', 'alpha', 'position']) {
+                const v1 = e1.color[key];
+                const v2 = e2.color[key];
+                if (v1 !== undefined && v2 !== undefined && Math.abs(v1 - v2) > tolerance) {
+                    return false;
+                }
+            }
+        }
+        if (e1.scalar && e2.scalar) {
+            const v1 = e1.scalar.value;
+            const v2 = e2.scalar.value;
+            if (v1 !== undefined && v2 !== undefined && Math.abs(v1 - v2) > tolerance) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Describe the difference between two entities.
+     */
+    describeDiff(e1, e2) {
+        if (e1.coordinates && e2.coordinates) {
+            const changes = [];
+            if (e1.coordinates.x !== e2.coordinates.x) {
+                changes.push(`x: ${this.formatCoord(e1.coordinates.x ?? 0)} -> ${this.formatCoord(e2.coordinates.x ?? 0)}`);
+            }
+            if (e1.coordinates.y !== e2.coordinates.y) {
+                changes.push(`y: ${this.formatCoord(e1.coordinates.y ?? 0)} -> ${this.formatCoord(e2.coordinates.y ?? 0)}`);
+            }
+            return `Position changes: ${changes.join(', ')}`;
+        }
+        return 'Values differ';
+    }
+    /**
+     * Translate multiple solutions and generate comparative descriptions.
+     */
+    translateMultipleSolutions(rawSolutions) {
+        const solutions = rawSolutions.map((raw, idx) => this.translateSolution(raw, idx));
+        if (solutions.length < 2) {
+            return {
+                solutions,
+                comparison: 'Only one solution available.',
+            };
+        }
+        // Generate pairwise comparison for first two solutions
+        const diff = this.compareSolutions(solutions[0], solutions[1]);
+        let comparison = `${solutions.length} solutions found.\n\n`;
+        comparison += `Solution 0 vs Solution 1:\n${diff.summary}\n\n`;
+        for (const entityDiff of diff.differingEntities) {
+            comparison += `  Entity ${entityDiff.entityId}: ${entityDiff.description}\n`;
+        }
+        return { solutions, comparison };
+    }
+}
+// =============================================================================
+// Utility: Create Entity Registry from Array
+// =============================================================================
+/**
+ * Create an EntityRegistry from an array of metadata.
+ */
+export function createEntityRegistry(entities) {
+    const map = new Map(entities.map(e => [e.entityId, e]));
+    return {
+        get: (id) => map.get(id),
+        getAll: () => entities,
+    };
+}
+/**
+ * Create an empty EntityRegistry (all entities will be "unknown" type).
+ */
+export function createEmptyRegistry() {
+    return {
+        get: () => undefined,
+        getAll: () => [],
+    };
+}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@viewscript/renderer",
+  "version": "0.1.0-202605140639",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:visual": "playwright test --project=visual-regression",
+    "test:e2e:sync": "playwright test --project=bilayer-sync",
+    "test:e2e:perf": "playwright test --project=performance",
+    "test:e2e:async-race": "playwright test --project=async-race",
+    "serve:test": "npx serve tests/e2e -l 3000 -s",
+    "lint": "eslint src"
+  },
+  "dependencies": {
+    "canvaskit-wasm": "^0.39.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.44.0",
+    "@types/node": "^20.0.0",
+    "serve": "^14.2.0",
+    "typescript": "^5.4.0",
+    "vitest": "^1.6.0"
+  }
+}

package/playwright-report/data/0bafe4e0863f0e244bba68a838f73241f8f2efaa.md

@@ -0,0 +1,226 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: gradient-animation.spec.ts >> Gradient Rendering: P-Dimension Integrity >> clamps out-of-range colors while preserving order
+- Location: tests/e2e/gradient-animation.spec.ts:467:3
+
+# Error details
+
+```
+Error: expect(received).toBe(expected) // Object.is equality
+
+Expected: 0
+Received: 14
+```
+
+# Test source
+
+```ts
+  383 |       css: 'linear-gradient(to right, red 0%, blue 25%)',
+  384 |       tileMode: 'repeat',
+  385 |       bounds: { x: 0, y: 0, width: 200, height: 50 },
+  386 |     });
+  387 | 
+  388 |     // With repeat, the gradient at 50% should look like gradient at 0%
+  389 |     const at0 = getPixelColor(pixelBuffer, 200, 50, 5, 25);
+  390 |     const at50 = getPixelColor(pixelBuffer, 200, 50, 105, 25);
+  391 | 
+  392 |     // Both should be similar (both at start of repeat cycle)
+  393 |     expect(Math.abs(at0.r - at50.r)).toBeLessThan(30);
+  394 | 
+  395 |     await compareGolden(pixelBuffer, 'tile-repeat');
+  396 |   });
+  397 | 
+  398 |   /**
+  399 |    * Test: Mirror tile mode
+  400 |    *
+  401 |    * Gradient should reverse direction at 100%
+  402 |    */
+  403 |   test('applies mirror tile mode correctly', async ({ page }) => {
+  404 |     await setupDeterministicRenderer(page);
+  405 | 
+  406 |     const pixelBuffer = await renderGradient(page, {
+  407 |       type: 'linear-gradient',
+  408 |       css: 'linear-gradient(to right, red 0%, blue 50%)',
+  409 |       tileMode: 'mirror',
+  410 |       bounds: { x: 0, y: 0, width: 200, height: 50 },
+  411 |     });
+  412 | 
+  413 |     // With mirror, color at 75% of total width should be same as at 25%
+  414 |     const at25 = getPixelColor(pixelBuffer, 200, 50, 50, 25);
+  415 |     const at75 = getPixelColor(pixelBuffer, 200, 50, 150, 25);
+  416 | 
+  417 |     // Mirror means 75% in second half = 25% position
+  418 |     expect(Math.abs(at25.r - at75.r)).toBeLessThan(30);
+  419 | 
+  420 |     await compareGolden(pixelBuffer, 'tile-mirror');
+  421 |   });
+  422 | });
+  423 | 
+  424 | // =============================================================================
+  425 | // P-Dimension Integrity Tests
+  426 | // =============================================================================
+  427 | 
+  428 | test.describe('Gradient Rendering: P-Dimension Integrity', () => {
+  429 |   test.beforeAll(async () => {
+  430 |     ensureDirectories();
+  431 |   });
+  432 | 
+  433 |   /**
+  434 |    * Test: Exact rational color preservation
+  435 |    *
+  436 |    * Color specified as rational 255/3 (~85) should not drift due to
+  437 |    * floating-point operations in constraint evaluation.
+  438 |    */
+  439 |   test('preserves exact rational color values', async ({ page }) => {
+  440 |     await setupDeterministicRenderer(page);
+  441 | 
+  442 |     // Specify color as exact rational: RGB(255/3, 255/3, 255/3) = gray ~85
+  443 |     const pixelBuffer = await renderGradient(page, {
+  444 |       type: 'solid',
+  445 |       rationalColor: {
+  446 |         r: { numerator: 255n, denominator: 3n },
+  447 |         g: { numerator: 255n, denominator: 3n },
+  448 |         b: { numerator: 255n, denominator: 3n },
+  449 |       },
+  450 |       bounds: { x: 0, y: 0, width: 100, height: 100 },
+  451 |     });
+  452 | 
+  453 |     // Sample center pixel
+  454 |     const center = getPixelColor(pixelBuffer, 100, 100, 50, 50);
+  455 | 
+  456 |     // 255/3 = 85 (floor) - should be exactly 85, not 84 or 86
+  457 |     expect(center.r).toBe(85);
+  458 |     expect(center.g).toBe(85);
+  459 |     expect(center.b).toBe(85);
+  460 |   });
+  461 | 
+  462 |   /**
+  463 |    * Test: Topology-preserving color clamping
+  464 |    *
+  465 |    * Colors outside [0, 255] should be clamped, preserving ordering.
+  466 |    */
+  467 |   test('clamps out-of-range colors while preserving order', async ({ page }) => {
+  468 |     await setupDeterministicRenderer(page);
+  469 | 
+  470 |     const pixelBuffer = await renderGradient(page, {
+  471 |       type: 'linear-gradient',
+  472 |       colors: [
+  473 |         { r: -10, g: 0, b: 0 },    // Should clamp to 0
+  474 |         { r: 300, g: 0, b: 0 },    // Should clamp to 255
+  475 |       ],
+  476 |       bounds: { x: 0, y: 0, width: 100, height: 50 },
+  477 |     });
+  478 | 
+  479 |     const left = getPixelColor(pixelBuffer, 100, 50, 5, 25);
+  480 |     const right = getPixelColor(pixelBuffer, 100, 50, 95, 25);
+  481 | 
+  482 |     // Left should be clamped to black (r=0)
+> 483 |     expect(left.r).toBe(0);
+      |                    ^ Error: expect(received).toBe(expected) // Object.is equality
+  484 | 
+  485 |     // Right should be clamped to bright red (r=255)
+  486 |     expect(right.r).toBe(255);
+  487 |   });
+  488 | });
+  489 | 
+  490 | // =============================================================================
+  491 | // Helper Functions
+  492 | // =============================================================================
+  493 | 
+  494 | function ensureDirectories(): void {
+  495 |   if (!fs.existsSync(GOLDEN_DIR)) {
+  496 |     fs.mkdirSync(GOLDEN_DIR, { recursive: true });
+  497 |   }
+  498 |   if (!fs.existsSync(FAILURE_DIR)) {
+  499 |     fs.mkdirSync(FAILURE_DIR, { recursive: true });
+  500 |   }
+  501 | }
+  502 | 
+  503 | async function setupDeterministicRenderer(page: Page): Promise<void> {
+  504 |   await page.goto('/test-harness.html', { waitUntil: 'networkidle' });
+  505 | 
+  506 |   await page.evaluate((config) => {
+  507 |     (window as any).__VS_CANVASKIT_CONFIG__ = config;
+  508 |   }, CANVASKIT_DETERMINISTIC_CONFIG);
+  509 | 
+  510 |   await page.waitForFunction(() => (window as any).__VS_RENDERER_READY__ === true, {
+  511 |     timeout: 10000,
+  512 |   });
+  513 | }
+  514 | 
+  515 | async function renderGradient(
+  516 |   page: Page,
+  517 |   spec: Record<string, unknown>,
+  518 | ): Promise<Uint8Array> {
+  519 |   const base64 = await page.evaluate(async (gradientSpec) => {
+  520 |     const renderer = (window as any).__VS_RENDERER__;
+  521 |     await renderer.renderGradient(gradientSpec);
+  522 | 
+  523 |     const canvas = document.getElementById('vs-canvas') as HTMLCanvasElement;
+  524 |     const ctx = canvas.getContext('2d');
+  525 |     if (!ctx) throw new Error('No 2D context');
+  526 | 
+  527 |     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  528 |     const buffer = imageData.data;
+  529 | 
+  530 |     let binary = '';
+  531 |     const chunkSize = 8192;
+  532 |     for (let i = 0; i < buffer.length; i += chunkSize) {
+  533 |       const chunk = buffer.subarray(i, Math.min(i + chunkSize, buffer.length));
+  534 |       binary += String.fromCharCode.apply(null, Array.from(chunk));
+  535 |     }
+  536 |     return btoa(binary);
+  537 |   }, spec);
+  538 | 
+  539 |   const binary = atob(base64);
+  540 |   const bytes = new Uint8Array(binary.length);
+  541 |   for (let i = 0; i < binary.length; i++) {
+  542 |     bytes[i] = binary.charCodeAt(i);
+  543 |   }
+  544 |   return bytes;
+  545 | }
+  546 | 
+  547 | async function renderAnimatedGradient(
+  548 |   page: Page,
+  549 |   spec: Record<string, unknown>,
+  550 | ): Promise<Uint8Array> {
+  551 |   return renderGradient(page, { ...spec, animated: true });
+  552 | }
+  553 | 
+  554 | function computeHash(buffer: Uint8Array): string {
+  555 |   return crypto.createHash('sha256').update(buffer).digest('hex');
+  556 | }
+  557 | 
+  558 | function getPixelColor(
+  559 |   buffer: Uint8Array,
+  560 |   width: number,
+  561 |   height: number,
+  562 |   x: number,
+  563 |   y: number,
+  564 | ): { r: number; g: number; b: number; a: number } {
+  565 |   const offset = (y * width + x) * 4;
+  566 |   return {
+  567 |     r: buffer[offset],
+  568 |     g: buffer[offset + 1],
+  569 |     b: buffer[offset + 2],
+  570 |     a: buffer[offset + 3],
+  571 |   };
+  572 | }
+  573 | 
+  574 | function analyzeHorizontalGradient(
+  575 |   buffer: Uint8Array,
+  576 |   width: number,
+  577 |   height: number,
+  578 | ): { leftEdgeColor: { r: number; g: number; b: number }; rightEdgeColor: { r: number; g: number; b: number } } {
+  579 |   const midY = Math.floor(height / 2);
+  580 |   return {
+  581 |     leftEdgeColor: getPixelColor(buffer, width, height, 5, midY),
+  582 |     rightEdgeColor: getPixelColor(buffer, width, height, width - 5, midY),
+  583 |   };
+```