pixelweaver 0.1.0

package/plugins/builtin/tool-plugins.test.ts

@@ -0,0 +1,529 @@
+/**
+ * Tests for drawing tool plugins.
+ *
+ * Each test registers the plugin, dispatches its command with a mocked context
+ * containing a real PixelBuffer, and verifies that execute modifies pixels
+ * correctly and undo restores the original state.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import { commandRegistry } from '../../src/lib/core/registries.svelte.js';
+import { dispatch, undoLast, _resetForTesting as resetDispatcher, setContext } from '../../src/lib/core/dispatcher.js';
+import type { Command } from '../../src/lib/core/commands.js';
+import type { CommandType, ParamsOf } from '../../src/lib/core/command-params.js';
+
+import { pencilToolPlugin } from './pencil-tool.js';
+import { eraserToolPlugin } from './eraser-tool.js';
+import { fillToolPlugin } from './fill-tool.js';
+import { lineToolPlugin } from './line-tool.js';
+import { rectToolPlugin } from './rect-tool.js';
+import { circleToolPlugin } from './circle-tool.js';
+import { diamondToolPlugin } from './diamond-tool.js';
+
+import { createPluginAPI } from '../../src/lib/core/plugin-api.js';
+
+// --- Helpers ---
+
+/** Create a minimal command for dispatching. */
+// Typed overload: validates params when type is a known command literal
+function makeCommand<T extends CommandType>(type: T, params: ParamsOf<T>): Command;
+// String fallback: for dynamic/unknown command types in tests
+function makeCommand(type: string, params?: Record<string, unknown>): Command;
+function makeCommand(type: string, params: Record<string, unknown> = {}): Command {
+  return {
+    type,
+    plugin: 'test',
+    version: '1.0.0',
+    params,
+    timestamp: Date.now(),
+    id: crypto.randomUUID(),
+  };
+}
+
+/** Set up a fresh PixelBuffer and wire it into the dispatcher context. */
+function setupBuffer(width = 16, height = 16): PixelBuffer {
+  const buffer = new PixelBuffer(width, height);
+  setContext({ getActiveBuffer: () => buffer });
+  return buffer;
+}
+
+// --- Pencil Tool ---
+
+describe('Pencil Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/pencil');
+    pencilToolPlugin.register(api);
+  });
+
+  it('should register the draw_pixels command', () => {
+    expect(commandRegistry.get('draw_pixels')).toBeDefined();
+  });
+
+  it('should draw a single pixel', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_pixels', {
+      pixels: [{ x: 5, y: 5, r: 255, g: 0, b: 0, a: 255 }],
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(5, 5)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('should draw multiple pixels (simulating drag)', () => {
+    const buffer = setupBuffer();
+    const pixels = [
+      { x: 0, y: 0, r: 255, g: 0, b: 0, a: 255 },
+      { x: 1, y: 0, r: 255, g: 0, b: 0, a: 255 },
+      { x: 2, y: 0, r: 255, g: 0, b: 0, a: 255 },
+    ];
+
+    dispatch(makeCommand('draw_pixels', { pixels, layerId: '' }));
+
+    expect(buffer.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(buffer.getPixel(1, 0)).toEqual([255, 0, 0, 255]);
+    expect(buffer.getPixel(2, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('should undo pixel drawing by restoring snapshot', () => {
+    const buffer = setupBuffer();
+    buffer.setPixel(3, 3, 100, 100, 100, 255);
+
+    dispatch(makeCommand('draw_pixels', {
+      pixels: [{ x: 3, y: 3, r: 255, g: 0, b: 0, a: 255 }],
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(3, 3)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+
+    expect(buffer.getPixel(3, 3)).toEqual([100, 100, 100, 255]);
+  });
+
+  it('should describe the command correctly', () => {
+    const def = commandRegistry.get('draw_pixels');
+    if (!def) throw new Error('draw_pixels command not registered');
+    const desc = def.describe({
+      pixels: [{ x: 0, y: 0, r: 0, g: 0, b: 0, a: 0 }],
+    });
+    expect(desc).toBe('Drew 1 pixel(s)');
+  });
+});
+
+// --- Eraser Tool ---
+
+describe('Eraser Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/eraser');
+    eraserToolPlugin.register(api);
+  });
+
+  it('should register the erase_pixels command', () => {
+    expect(commandRegistry.get('erase_pixels')).toBeDefined();
+  });
+
+  it('should erase pixels by setting them to transparent', () => {
+    const buffer = setupBuffer();
+    buffer.setPixel(4, 4, 255, 128, 64, 255);
+
+    dispatch(makeCommand('erase_pixels', {
+      pixels: [{ x: 4, y: 4, r: 0, g: 0, b: 0, a: 0 }],
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(4, 4)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('should undo erasure by restoring snapshot', () => {
+    const buffer = setupBuffer();
+    buffer.setPixel(4, 4, 200, 100, 50, 255);
+
+    dispatch(makeCommand('erase_pixels', {
+      pixels: [{ x: 4, y: 4, r: 0, g: 0, b: 0, a: 0 }],
+      layerId: '',
+    }));
+
+    undoLast();
+
+    expect(buffer.getPixel(4, 4)).toEqual([200, 100, 50, 255]);
+  });
+});
+
+// --- Fill Tool ---
+
+describe('Fill Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/fill');
+    fillToolPlugin.register(api);
+  });
+
+  it('should register the flood_fill command', () => {
+    expect(commandRegistry.get('flood_fill')).toBeDefined();
+  });
+
+  it('should flood fill a bounded region', () => {
+    const buffer = setupBuffer(8, 8);
+    // Create a box
+    for (let i = 0; i < 8; i++) {
+      buffer.setPixel(i, 0, 255, 0, 0, 255);
+      buffer.setPixel(i, 7, 255, 0, 0, 255);
+      buffer.setPixel(0, i, 255, 0, 0, 255);
+      buffer.setPixel(7, i, 255, 0, 0, 255);
+    }
+
+    dispatch(makeCommand('flood_fill', {
+      x: 3,
+      y: 3,
+      color: '#00FF00',
+      layerId: '',
+    }));
+
+    // Interior should be green
+    expect(buffer.getPixel(3, 3)).toEqual([0, 255, 0, 255]);
+    expect(buffer.getPixel(1, 1)).toEqual([0, 255, 0, 255]);
+    expect(buffer.getPixel(6, 6)).toEqual([0, 255, 0, 255]);
+
+    // Walls should still be red
+    expect(buffer.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('should undo flood fill', () => {
+    const buffer = setupBuffer(4, 4);
+
+    dispatch(makeCommand('flood_fill', {
+      x: 0,
+      y: 0,
+      color: '#0000FF',
+      layerId: '',
+    }));
+
+    // All pixels should be blue
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 255, 255]);
+    expect(buffer.getPixel(3, 3)).toEqual([0, 0, 255, 255]);
+
+    undoLast();
+
+    // All pixels should be back to transparent
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(3, 3)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('should not fill if clicked pixel already matches fill color', () => {
+    const buffer = setupBuffer(4, 4);
+    buffer.fill(0, 255, 0, 255);
+
+    dispatch(makeCommand('flood_fill', {
+      x: 0,
+      y: 0,
+      color: '#00FF00',
+      layerId: '',
+    }));
+
+    // All pixels should still be green (the fill is idempotent)
+    expect(buffer.getPixel(0, 0)).toEqual([0, 255, 0, 255]);
+    expect(buffer.getPixel(3, 3)).toEqual([0, 255, 0, 255]);
+  });
+});
+
+// --- Line Tool ---
+
+describe('Line Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/line');
+    lineToolPlugin.register(api);
+  });
+
+  it('should register the draw_line command', () => {
+    expect(commandRegistry.get('draw_line')).toBeDefined();
+  });
+
+  it('should draw a horizontal line', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_line', {
+      x0: 0, y0: 5, x1: 7, y1: 5,
+      color: '#FF0000',
+      algorithm: 'standard',
+      layerId: '',
+    }));
+
+    for (let x = 0; x <= 7; x++) {
+      expect(buffer.getPixel(x, 5)).toEqual([255, 0, 0, 255]);
+    }
+    // Pixel outside should be untouched
+    expect(buffer.getPixel(8, 5)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('should draw a vertical line', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_line', {
+      x0: 3, y0: 0, x1: 3, y1: 6,
+      color: '#00FF00',
+      algorithm: 'standard',
+      layerId: '',
+    }));
+
+    for (let y = 0; y <= 6; y++) {
+      expect(buffer.getPixel(3, y)).toEqual([0, 255, 0, 255]);
+    }
+  });
+
+  it('should draw a diagonal line', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_line', {
+      x0: 0, y0: 0, x1: 4, y1: 4,
+      color: '#0000FF',
+      algorithm: 'standard',
+      layerId: '',
+    }));
+
+    for (let i = 0; i <= 4; i++) {
+      expect(buffer.getPixel(i, i)).toEqual([0, 0, 255, 255]);
+    }
+  });
+
+  it('should draw with no-doubles algorithm', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_line', {
+      x0: 0, y0: 0, x1: 10, y1: 3,
+      color: '#FF00FF',
+      algorithm: 'nodoubles',
+      layerId: '',
+    }));
+
+    // Start and end should be drawn
+    expect(buffer.getPixel(0, 0)).toEqual([255, 0, 255, 255]);
+    expect(buffer.getPixel(10, 3)).toEqual([255, 0, 255, 255]);
+  });
+
+  it('should undo a line', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_line', {
+      x0: 0, y0: 0, x1: 3, y1: 0,
+      color: '#FF0000',
+      algorithm: 'standard',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(1, 0)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(2, 0)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(3, 0)).toEqual([0, 0, 0, 0]);
+  });
+});
+
+// --- Rectangle Tool ---
+
+describe('Rectangle Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/rect');
+    rectToolPlugin.register(api);
+  });
+
+  it('should register the draw_rect command', () => {
+    expect(commandRegistry.get('draw_rect')).toBeDefined();
+  });
+
+  it('should draw a rectangle outline', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_rect', {
+      x: 2, y: 2, w: 4, h: 3,
+      filled: false,
+      color: '#FF0000',
+      layerId: '',
+    }));
+
+    // Top-left corner
+    expect(buffer.getPixel(2, 2)).toEqual([255, 0, 0, 255]);
+    // Top-right corner
+    expect(buffer.getPixel(5, 2)).toEqual([255, 0, 0, 255]);
+    // Bottom-left corner
+    expect(buffer.getPixel(2, 4)).toEqual([255, 0, 0, 255]);
+    // Bottom-right corner
+    expect(buffer.getPixel(5, 4)).toEqual([255, 0, 0, 255]);
+    // Interior should be empty
+    expect(buffer.getPixel(3, 3)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('should draw a filled rectangle', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_rect', {
+      x: 1, y: 1, w: 3, h: 2,
+      filled: true,
+      color: '#00FF00',
+      layerId: '',
+    }));
+
+    // All interior and border pixels should be filled
+    for (let y = 1; y <= 2; y++) {
+      for (let x = 1; x <= 3; x++) {
+        expect(buffer.getPixel(x, y)).toEqual([0, 255, 0, 255]);
+      }
+    }
+    // Outside should be empty
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+  });
+
+  it('should undo a rectangle', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_rect', {
+      x: 0, y: 0, w: 3, h: 3,
+      filled: true,
+      color: '#0000FF',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(1, 1)).toEqual([0, 0, 255, 255]);
+
+    undoLast();
+
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(1, 1)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(2, 2)).toEqual([0, 0, 0, 0]);
+  });
+});
+
+// --- Circle/Ellipse Tool ---
+
+describe('Circle/Ellipse Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/circle');
+    circleToolPlugin.register(api);
+  });
+
+  it('should register the draw_ellipse command', () => {
+    expect(commandRegistry.get('draw_ellipse')).toBeDefined();
+  });
+
+  it('should draw an ellipse outline', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_ellipse', {
+      cx: 8, cy: 8, rx: 3, ry: 2,
+      filled: false,
+      color: '#FF0000',
+      layerId: '',
+    }));
+
+    // Cardinal points should be drawn
+    expect(buffer.getPixel(11, 8)).toEqual([255, 0, 0, 255]); // right
+    expect(buffer.getPixel(5, 8)).toEqual([255, 0, 0, 255]);  // left
+    expect(buffer.getPixel(8, 10)).toEqual([255, 0, 0, 255]); // bottom
+    expect(buffer.getPixel(8, 6)).toEqual([255, 0, 0, 255]);  // top
+  });
+
+  it('should draw a filled ellipse including center', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_ellipse', {
+      cx: 8, cy: 8, rx: 2, ry: 2,
+      filled: true,
+      color: '#00FF00',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(8, 8)).toEqual([0, 255, 0, 255]); // center
+    expect(buffer.getPixel(10, 8)).toEqual([0, 255, 0, 255]); // right edge
+  });
+
+  it('should undo an ellipse', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_ellipse', {
+      cx: 8, cy: 8, rx: 3, ry: 3,
+      filled: true,
+      color: '#FF0000',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(8, 8)).toEqual([255, 0, 0, 255]);
+
+    undoLast();
+
+    expect(buffer.getPixel(8, 8)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(11, 8)).toEqual([0, 0, 0, 0]);
+  });
+});
+
+// --- Diamond Tool ---
+
+describe('Diamond Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/diamond');
+    diamondToolPlugin.register(api);
+  });
+
+  it('should register the draw_diamond command', () => {
+    expect(commandRegistry.get('draw_diamond')).toBeDefined();
+  });
+
+  it('should draw a diamond outline with vertices at cardinal points', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_diamond', {
+      cx: 8, cy: 8, radiusX: 3, radiusY: 3,
+      filled: false,
+      color: '#FF0000',
+      layerId: '',
+    }));
+
+    // Top vertex
+    expect(buffer.getPixel(8, 5)).toEqual([255, 0, 0, 255]);
+    // Right vertex
+    expect(buffer.getPixel(11, 8)).toEqual([255, 0, 0, 255]);
+    // Bottom vertex
+    expect(buffer.getPixel(8, 11)).toEqual([255, 0, 0, 255]);
+    // Left vertex
+    expect(buffer.getPixel(5, 8)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('should draw a filled diamond including center', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_diamond', {
+      cx: 8, cy: 8, radiusX: 3, radiusY: 3,
+      filled: true,
+      color: '#00FF00',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(8, 8)).toEqual([0, 255, 0, 255]);
+  });
+
+  it('should undo a diamond', () => {
+    const buffer = setupBuffer();
+
+    dispatch(makeCommand('draw_diamond', {
+      cx: 8, cy: 8, radiusX: 2, radiusY: 2,
+      filled: true,
+      color: '#0000FF',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(8, 8)).toEqual([0, 0, 255, 255]);
+
+    undoLast();
+
+    expect(buffer.getPixel(8, 8)).toEqual([0, 0, 0, 0]);
+  });
+});

package/public/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="4" fill="#1a1a2e"/>
+  <rect x="8" y="8" width="6" height="6" fill="#4a9eff"/>
+  <rect x="18" y="8" width="6" height="6" fill="#4a9eff" opacity="0.7"/>
+  <rect x="8" y="18" width="6" height="6" fill="#4a9eff" opacity="0.5"/>
+  <rect x="18" y="18" width="6" height="6" fill="#4a9eff" opacity="0.3"/>
+</svg>

package/public/sw.js

@@ -0,0 +1,91 @@
+/**
+ * PixelWeaver Service Worker -- caches the app shell for fast reload
+ * and offline resilience after a tab crash.
+ *
+ * Strategy: stale-while-revalidate for app shell assets.
+ * API requests (/api/*, /ws) are never cached.
+ */
+
+const CACHE_NAME = 'pixelweaver-v1';
+
+// Core app shell URLs to pre-cache on install.
+// Vite-built assets are hashed and will be added to the cache on first fetch.
+const SHELL_URLS = [
+  '/',
+  '/index.html',
+];
+
+// --- Install: pre-cache the app shell ---
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(SHELL_URLS))
+  );
+  // Activate immediately without waiting for existing tabs to close
+  self.skipWaiting();
+});
+
+// --- Activate: clean up old caches ---
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key !== CACHE_NAME)
+          .map((key) => caches.delete(key))
+      )
+    )
+  );
+  // Take control of all open tabs immediately
+  self.clients.claim();
+});
+
+// --- Fetch: stale-while-revalidate for GET requests to app shell ---
+
+self.addEventListener('fetch', (event) => {
+  const url = new URL(event.request.url);
+
+  // Never cache API or WebSocket requests
+  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) {
+    return;
+  }
+
+  // Only handle GET requests
+  if (event.request.method !== 'GET') {
+    return;
+  }
+
+  event.respondWith(
+    caches.open(CACHE_NAME).then(async (cache) => {
+      const cached = await cache.match(event.request);
+
+      // Start a network fetch to update the cache in the background
+      const networkFetch = fetch(event.request)
+        .then((response) => {
+          // Only cache successful responses
+          if (response.ok) {
+            cache.put(event.request, response.clone());
+          }
+          return response;
+        })
+        .catch(() => {
+          // Network failed; cached response (if any) is the only option
+          return undefined;
+        });
+
+      // Return cached version immediately if available, otherwise wait for network
+      if (cached) {
+        return cached;
+      }
+
+      const networkResponse = await networkFetch;
+      if (networkResponse) {
+        return networkResponse;
+      }
+
+      // Both cache and network failed -- return a basic offline response
+      return new Response('Offline', { status: 503, statusText: 'Service Unavailable' });
+    })
+  );
+});

package/pyproject.toml

@@ -0,0 +1,49 @@
+[project]
+name = "pixelweaver"
+version = "0.1.0"
+description = "PixelWeaver collaboration server"
+readme = "server/README.md"
+requires-python = ">=3.13"
+dependencies = [
+    "wesktop",
+    "strictcli",
+    "pydantic>=2.12.5",
+    "pillow>=12.2.0",
+    "mcp>=1.27.0",
+    "httpx>=0.28.1",
+]
+keywords = ["rlsbl"]
+
+[project.scripts]
+# CLI entry point: `uv run pixelweaver serve` starts the server
+pixelweaver = "pixelweaver.cli:main"
+
+[dependency-groups]
+dev = [
+    "pytest>=8.0.0",
+    "httpx>=0.28.0",
+    "pytest-asyncio>=0.26.0",
+    "ruff>=0.11.0",
+]
+gui = [
+    "PyGObject>=3.50",
+    "pycairo>=1.26",
+]
+
+[tool.uv.build-backend]
+module-root = "server/src"
+
+[build-system]
+requires = ["uv_build>=0.9.17,<0.10.0"]
+build-backend = "uv_build"
+
+[tool.ruff]
+line-length = 100
+target-version = "py313"
+
+[tool.ruff.lint]
+select = ["E", "F", "I", "N", "W", "UP"]
+
+[tool.pytest.ini_options]
+asyncio_mode = "auto"
+testpaths = ["server/tests"]

package/scripts/eslint-wave-a-list.sh

@@ -0,0 +1,24 @@
+#!/usr/bin/env bash
+# Lists Wave A violations (file:line:col rule message) for given paths.
+# Usage: ./scripts/eslint-wave-a-list.sh <path> [path...]
+set -euo pipefail
+if [ $# -eq 0 ]; then
+  echo "Usage: $0 <path> [path...]" >&2
+  exit 2
+fi
+npx eslint "$@" -f json 2>/dev/null | node -e '
+let input = "";
+process.stdin.on("data", d => input += d);
+process.stdin.on("end", () => {
+  const data = JSON.parse(input);
+  for (const f of data) {
+    const rel = f.filePath.replace(process.cwd() + "/", "");
+    for (const m of f.messages) {
+      if (m.severity !== 2) continue;
+      if (m.ruleId !== "@typescript-eslint/no-non-null-assertion" && m.ruleId !== "@typescript-eslint/restrict-template-expressions") continue;
+      const short = m.ruleId.replace("@typescript-eslint/", "");
+      console.log(`${rel}:${m.line}:${m.column} [${short}] ${m.message}`);
+    }
+  }
+});
+'