@n8n/frontend-module-sdk 0.1.0

package/LICENSE.md

@@ -0,0 +1,88 @@
+# License
+
+Portions of this software are licensed as follows:
+
+- Content of branches other than the main branch (i.e. "master") are not licensed.
+- Source code files that contain ".ee." in their filename or ".ee" in their dirname are NOT licensed under
+  the Sustainable Use License.
+  To use source code files that contain ".ee." in their filename or ".ee" in their dirname you must hold a
+	valid n8n Enterprise License specifically allowing you access to such source code files and as defined
+	in "LICENSE_EE.md".
+- All third party components incorporated into the n8n Software are licensed under the original license
+  provided by the owner of the applicable component.
+- Content outside of the above mentioned files or restrictions is available under the "Sustainable Use
+  License" as defined below.
+
+## Sustainable Use License
+
+Version 1.0
+
+### Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+### Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license
+to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject
+to the limitations below.
+
+### Limitations
+
+You may use or modify the software only for your own internal business purposes or for non-commercial or
+personal use. You may distribute the software or provide it to others only if you do so free of charge for
+non-commercial purposes. You may not alter, remove, or obscure any licensing, copyright, or other notices of
+the licensor in the software. Any use of the licensor’s trademarks is subject to applicable law.
+
+### Patents
+
+The licensor grants you a license, under any patent claims the licensor can license, or becomes able to
+license, to make, have made, use, sell, offer for sale, import and have imported the software, in each case
+subject to the limitations and conditions in this license. This license does not cover any patent claims that
+you cause to be infringed by modifications or additions to the software. If you or your company make any
+written claim that the software infringes or contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If your company makes such a claim, your patent
+license ends immediately for work on behalf of your company.
+
+### Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these
+terms. If you modify the software, you must include in any modified copies of the software a prominent notice
+stating that you have modified the software.
+
+### No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in these terms.
+
+### Termination
+
+If you use the software in violation of these terms, such use is not licensed, and your license will
+automatically terminate. If the licensor provides you with a notice of your violation, and you cease all
+violation of this license no later than 30 days after you receive that notice, your license will be reinstated
+retroactively. However, if you violate these terms after such reinstatement, any additional violation of these
+terms will cause your license to terminate automatically and permanently.
+
+### No Liability
+
+As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will
+not be liable to you for any damages arising out of these terms or the use or nature of the software, under
+any kind of legal claim.
+
+### Definitions
+
+The “licensor” is the entity offering these terms.
+
+The “software” is the software the licensor makes available under these terms, including any portion of it.
+
+“You” refers to the individual or entity agreeing to these terms.
+
+“Your company” is any legal entity, sole proprietorship, or other kind of organization that you work for, plus
+all organizations that have control over, are under the control of, or are under common control with that
+organization. Control means ownership of substantially all the assets of an entity, or the power to direct its
+management and policies by vote, contract, or otherwise. Control can be direct or indirect.
+
+“Your license” is the license granted to you for the software under these terms.
+
+“Use” means anything you do with the software requiring your license.
+
+“Trademark” means trademarks, service marks, and similar rights.

package/README.md

@@ -0,0 +1,16 @@
+# @n8n/frontend-module-sdk
+
+The frontend module contract and registries for n8n editor modules.
+
+This package owns the `FrontendModuleDescription` descriptor type plus the modal
+and resource registries that features register against. The editor shell keeps
+the wiring (`moduleInitializer`) that drives the two-phase lifecycle; this
+package only defines the contract and the registry state.
+
+It is a source-only package (no build step): consumers resolve it from `src`
+via the editor-ui Vite alias and `tsconfig` paths, and `src/index.ts` is the
+only public entry point.
+
+```ts
+import { modalRegistry, registerResource, type FrontendModuleDescription } from '@n8n/frontend-module-sdk';
+```

package/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}

package/eslint.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'eslint/config';
+import { frontendConfig } from '@n8n/eslint-config/frontend';
+
+export default defineConfig(frontendConfig, {
+	files: ['**/*.test.ts'],
+	rules: { '@typescript-eslint/no-unsafe-assignment': 'warn' },
+});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "type": "module",
+  "name": "@n8n/frontend-module-sdk",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "import": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "@n8n/design-system": "2.30.0"
+  },
+  "devDependencies": {
+    "typescript": "6.0.2",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.0.2",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^2.2.8",
+    "@n8n/typescript-config": "1.9.0",
+    "@n8n/eslint-config": "0.0.1",
+    "@n8n/vitest-config": "1.18.0"
+  },
+  "license": "LicenseRef-n8n-sustainable-use",
+  "scripts": {
+    "clean": "rimraf .turbo",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:dev": "vitest",
+    "lint": "eslint src --quiet",
+    "lint:fix": "eslint src --fix",
+    "format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
+    "format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore"
+  }
+}

package/src/__tests__/setup.ts

@@ -0,0 +1,4 @@
+// Test setup entry required by the shared frontend vitest config
+// (`@n8n/vitest-config/frontend` points `setupFiles` here). The registry suites
+// need no global setup, so this file intentionally stays empty.
+export {};

package/src/index.ts

@@ -0,0 +1,3 @@
+export type * from './module.types';
+export * as modalRegistry from './modalRegistry';
+export * from './resourceRegistry';

package/src/modalRegistry.test.ts

@@ -0,0 +1,299 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import type { Component } from 'vue';
+
+import * as modalRegistry from './modalRegistry';
+import type { ModalDefinition } from './module.types';
+
+describe('modalRegistry', () => {
+	const mockComponent1 = { name: 'TestModal1' } as Component;
+	const mockComponent2 = { name: 'TestModal2' } as Component;
+	const mockAsyncComponent = (): Component => {
+		return { name: 'AsyncTestModal3' } as Component;
+	};
+
+	const mockModal1: ModalDefinition = {
+		key: 'test-modal-1',
+		component: mockComponent1,
+		initialState: { open: false },
+	};
+
+	const mockModal2: ModalDefinition = {
+		key: 'test-modal-2',
+		component: mockComponent2,
+	};
+
+	const mockModal3: ModalDefinition = {
+		key: 'test-modal-3',
+		component: mockAsyncComponent,
+	};
+
+	beforeEach(() => {
+		// Clear all modals before each test
+		const keys = modalRegistry.getKeys();
+		keys.forEach((key) => modalRegistry.unregister(key));
+	});
+
+	describe('register', () => {
+		it('should register a new modal', () => {
+			modalRegistry.register(mockModal1);
+
+			expect(modalRegistry.has('test-modal-1')).toBe(true);
+			expect(modalRegistry.get('test-modal-1')).toEqual(mockModal1);
+		});
+
+		it('should register multiple modals', () => {
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal2);
+
+			expect(modalRegistry.has('test-modal-1')).toBe(true);
+			expect(modalRegistry.has('test-modal-2')).toBe(true);
+			expect(modalRegistry.getKeys()).toHaveLength(2);
+		});
+
+		it('should warn and skip registration if modal key already exists', () => {
+			const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal1);
+
+			expect(consoleSpy).toHaveBeenCalledWith(
+				'Modal with key "test-modal-1" is already registered. Skipping.',
+			);
+			expect(modalRegistry.getKeys()).toHaveLength(1);
+
+			consoleSpy.mockRestore();
+		});
+
+		it('should notify listeners when a modal is registered', () => {
+			const listener = vi.fn();
+			modalRegistry.subscribe(listener);
+
+			modalRegistry.register(mockModal1);
+
+			expect(listener).toHaveBeenCalledWith(expect.any(Map));
+			expect(listener).toHaveBeenCalledTimes(1);
+		});
+
+		it('should register modal with async component', () => {
+			modalRegistry.register(mockModal3);
+
+			expect(modalRegistry.has('test-modal-3')).toBe(true);
+			expect(modalRegistry.get('test-modal-3')).toEqual(mockModal3);
+		});
+	});
+
+	describe('unregister', () => {
+		it('should unregister an existing modal', () => {
+			modalRegistry.register(mockModal1);
+			expect(modalRegistry.has('test-modal-1')).toBe(true);
+
+			modalRegistry.unregister('test-modal-1');
+
+			expect(modalRegistry.has('test-modal-1')).toBe(false);
+			expect(modalRegistry.get('test-modal-1')).toBeUndefined();
+		});
+
+		it('should not notify listeners if modal does not exist', () => {
+			const listener = vi.fn();
+			modalRegistry.subscribe(listener);
+
+			modalRegistry.unregister('non-existent-modal');
+
+			expect(listener).not.toHaveBeenCalled();
+		});
+
+		it('should notify listeners when a modal is unregistered', () => {
+			modalRegistry.register(mockModal1);
+			const listener = vi.fn();
+			modalRegistry.subscribe(listener);
+
+			modalRegistry.unregister('test-modal-1');
+
+			expect(listener).toHaveBeenCalledWith(expect.any(Map));
+			expect(listener).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('get', () => {
+		it('should return modal definition for existing key', () => {
+			modalRegistry.register(mockModal1);
+
+			const result = modalRegistry.get('test-modal-1');
+
+			expect(result).toEqual(mockModal1);
+		});
+
+		it('should return undefined for non-existent key', () => {
+			const result = modalRegistry.get('non-existent-modal');
+
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe('getAll', () => {
+		it('should return empty map when no modals are registered', () => {
+			const result = modalRegistry.getAll();
+
+			expect(result).toBeInstanceOf(Map);
+			expect(result.size).toBe(0);
+		});
+
+		it('should return all registered modals', () => {
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal2);
+
+			const result = modalRegistry.getAll();
+
+			expect(result).toBeInstanceOf(Map);
+			expect(result.size).toBe(2);
+			expect(result.get('test-modal-1')).toEqual(mockModal1);
+			expect(result.get('test-modal-2')).toEqual(mockModal2);
+		});
+
+		it('should return a copy of the internal map', () => {
+			modalRegistry.register(mockModal1);
+
+			const result1 = modalRegistry.getAll();
+			const result2 = modalRegistry.getAll();
+
+			expect(result1).not.toBe(result2);
+			expect(result1).toEqual(result2);
+		});
+	});
+
+	describe('getKeys', () => {
+		it('should return empty array when no modals are registered', () => {
+			const result = modalRegistry.getKeys();
+
+			expect(result).toEqual([]);
+		});
+
+		it('should return array of all modal keys', () => {
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal2);
+
+			const result = modalRegistry.getKeys();
+
+			expect(result).toEqual(['test-modal-1', 'test-modal-2']);
+		});
+	});
+
+	describe('has', () => {
+		it('should return true for existing modal key', () => {
+			modalRegistry.register(mockModal1);
+
+			expect(modalRegistry.has('test-modal-1')).toBe(true);
+		});
+
+		it('should return false for non-existent modal key', () => {
+			expect(modalRegistry.has('non-existent-modal')).toBe(false);
+		});
+	});
+
+	describe('subscribe', () => {
+		it('should call listener when modals are updated', () => {
+			const listener = vi.fn();
+			modalRegistry.subscribe(listener);
+
+			modalRegistry.register(mockModal1);
+
+			expect(listener).toHaveBeenCalledWith(expect.any(Map));
+			expect(listener).toHaveBeenCalledTimes(1);
+
+			const calledMap = listener.mock.calls[0]?.[0] as Map<string, ModalDefinition>;
+			expect(calledMap?.get('test-modal-1')).toEqual(mockModal1);
+		});
+
+		it('should return unsubscribe function', () => {
+			const listener = vi.fn();
+			const unsubscribe = modalRegistry.subscribe(listener);
+
+			expect(typeof unsubscribe).toBe('function');
+
+			modalRegistry.register(mockModal1);
+			expect(listener).toHaveBeenCalledTimes(1);
+
+			unsubscribe();
+			modalRegistry.register(mockModal2);
+			expect(listener).toHaveBeenCalledTimes(1);
+		});
+
+		it('should support multiple listeners', () => {
+			const listener1 = vi.fn();
+			const listener2 = vi.fn();
+
+			modalRegistry.subscribe(listener1);
+			modalRegistry.subscribe(listener2);
+
+			modalRegistry.register(mockModal1);
+
+			expect(listener1).toHaveBeenCalledTimes(1);
+			expect(listener2).toHaveBeenCalledTimes(1);
+		});
+
+		it('should call listeners with current state of modals', () => {
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal2);
+
+			const listener = vi.fn();
+			modalRegistry.subscribe(listener);
+
+			modalRegistry.register(mockModal3);
+
+			const calledMap = listener.mock.calls[0]?.[0] as Map<string, ModalDefinition>;
+			expect(calledMap?.size).toBe(3);
+			expect(calledMap?.has('test-modal-1')).toBe(true);
+			expect(calledMap?.has('test-modal-2')).toBe(true);
+			expect(calledMap?.has('test-modal-3')).toBe(true);
+		});
+	});
+
+	describe('edge cases', () => {
+		it('should handle empty string key', () => {
+			const emptyKeyModal: ModalDefinition = {
+				key: '',
+				component: { name: 'EmptyKeyModal' } as Component,
+			};
+
+			modalRegistry.register(emptyKeyModal);
+
+			expect(modalRegistry.has('')).toBe(true);
+			expect(modalRegistry.get('')).toEqual(emptyKeyModal);
+		});
+
+		it('should handle special characters in key', () => {
+			const specialKeyModal: ModalDefinition = {
+				key: 'modal-with-$special_ch@rs!',
+				component: { name: 'SpecialModal' } as Component,
+			};
+
+			modalRegistry.register(specialKeyModal);
+
+			expect(modalRegistry.has('modal-with-$special_ch@rs!')).toBe(true);
+			expect(modalRegistry.get('modal-with-$special_ch@rs!')).toEqual(specialKeyModal);
+		});
+
+		it('should handle modal without initialState', () => {
+			const modalWithoutState: ModalDefinition = {
+				key: 'no-state-modal',
+				component: { name: 'NoStateModal' } as Component,
+			};
+
+			modalRegistry.register(modalWithoutState);
+
+			const retrieved = modalRegistry.get('no-state-modal');
+			expect(retrieved).toEqual(modalWithoutState);
+			expect(retrieved?.initialState).toBeUndefined();
+		});
+
+		it('should maintain registration order in getKeys', () => {
+			modalRegistry.register(mockModal2);
+			modalRegistry.register(mockModal1);
+			modalRegistry.register(mockModal3);
+
+			const keys = modalRegistry.getKeys();
+
+			expect(keys).toEqual(['test-modal-2', 'test-modal-1', 'test-modal-3']);
+		});
+	});
+});

package/src/modalRegistry.ts

@@ -0,0 +1,47 @@
+import type { ModalDefinition } from './module.types';
+
+const modals = new Map<string, ModalDefinition>();
+const listeners = new Set<(modals: Map<string, ModalDefinition>) => void>();
+
+export function getAll(): Map<string, ModalDefinition> {
+	return new Map(modals);
+}
+
+function notifyListeners(): void {
+	listeners.forEach((listener) => listener(getAll()));
+}
+
+export function register(modal: ModalDefinition): void {
+	if (modals.has(modal.key)) {
+		console.warn(`Modal with key "${modal.key}" is already registered. Skipping.`);
+		return;
+	}
+
+	modals.set(modal.key, modal);
+	notifyListeners();
+}
+
+export function unregister(key: string): void {
+	if (modals.delete(key)) {
+		notifyListeners();
+	}
+}
+
+export function get(key: string): ModalDefinition | undefined {
+	return modals.get(key);
+}
+
+export function getKeys(): string[] {
+	return Array.from(modals.keys());
+}
+
+export function has(key: string): boolean {
+	return modals.has(key);
+}
+
+export function subscribe(listener: (modals: Map<string, ModalDefinition>) => void): () => void {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}

package/src/module.types.ts

@@ -0,0 +1,52 @@
+import type { IMenuItem, TabOptions } from '@n8n/design-system';
+import type { Component } from 'vue';
+import type { RouteRecordRaw } from 'vue-router';
+
+export type ModalState = {
+	open: boolean;
+	mode?: string | null;
+	data?: Record<string, unknown>;
+	activeId?: string | null;
+	curlCommand?: string;
+	httpNodeParameters?: string;
+};
+
+export type DynamicTabOptions = TabOptions<string> & {
+	dynamicRoute?: {
+		name: string;
+		includeProjectId?: boolean;
+	};
+	/**
+	 * Insert this tab immediately after the tab whose `value` matches.
+	 * If unset (or no match is found at render time), the tab is appended at the end.
+	 */
+	insertAfter?: string;
+};
+
+export type ModalDefinition = {
+	key: string;
+	component: Component | (() => Promise<Component>);
+	initialState?: ModalState;
+};
+
+export type ResourceMetadata = {
+	key: string;
+	displayName: string;
+	i18nKeys?: Record<string, string>;
+};
+
+export type FrontendModuleDescription = {
+	id: string;
+	name: string;
+	description: string;
+	icon: string;
+	routes?: RouteRecordRaw[];
+	projectTabs?: {
+		overview?: DynamicTabOptions[];
+		project?: DynamicTabOptions[];
+		shared?: DynamicTabOptions[];
+	};
+	resources?: ResourceMetadata[];
+	modals?: ModalDefinition[];
+	settingsPages?: IMenuItem[];
+};

package/src/resourceRegistry.test.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import type { ResourceMetadata } from './module.types';
+
+// The registry keeps module-level state and exposes no reset, so re-import a
+// fresh module instance before each test to keep them isolated.
+const importRegistry = async () => await import('./resourceRegistry');
+
+describe('resourceRegistry', () => {
+	let resourceRegistry: Awaited<ReturnType<typeof importRegistry>>;
+
+	const resourceA: ResourceMetadata = {
+		key: 'resource-a',
+		displayName: 'Resource A',
+	};
+
+	const resourceB: ResourceMetadata = {
+		key: 'resource-b',
+		displayName: 'Resource B',
+		i18nKeys: { title: 'resourceB.title' },
+	};
+
+	beforeEach(async () => {
+		vi.resetModules();
+		resourceRegistry = await importRegistry();
+	});
+
+	describe('registerResource', () => {
+		it('should register a new resource', () => {
+			resourceRegistry.registerResource(resourceA);
+
+			expect(resourceRegistry.hasResource('resource-a')).toBe(true);
+			expect(resourceRegistry.getResource('resource-a')).toEqual(resourceA);
+		});
+
+		it('should register multiple resources', () => {
+			resourceRegistry.registerResource(resourceA);
+			resourceRegistry.registerResource(resourceB);
+
+			expect(resourceRegistry.getAllResourceKeys()).toEqual(['resource-a', 'resource-b']);
+		});
+
+		it('should overwrite a resource registered with the same key', () => {
+			resourceRegistry.registerResource(resourceA);
+			const updated: ResourceMetadata = { key: 'resource-a', displayName: 'Updated A' };
+
+			resourceRegistry.registerResource(updated);
+
+			expect(resourceRegistry.getResource('resource-a')).toEqual(updated);
+			expect(resourceRegistry.getAllResourceKeys()).toHaveLength(1);
+		});
+	});
+
+	describe('getResource', () => {
+		it('should return resource metadata for an existing key', () => {
+			resourceRegistry.registerResource(resourceB);
+
+			expect(resourceRegistry.getResource('resource-b')).toEqual(resourceB);
+		});
+
+		it('should return undefined for a non-existent key', () => {
+			expect(resourceRegistry.getResource('non-existent-resource')).toBeUndefined();
+		});
+	});
+
+	describe('hasResource', () => {
+		it('should return true for a registered key', () => {
+			resourceRegistry.registerResource(resourceA);
+
+			expect(resourceRegistry.hasResource('resource-a')).toBe(true);
+		});
+
+		it('should return false for an unregistered key', () => {
+			expect(resourceRegistry.hasResource('non-existent-resource')).toBe(false);
+		});
+	});
+
+	describe('getAllResourceKeys', () => {
+		it('should return an empty array when no resources are registered', () => {
+			expect(resourceRegistry.getAllResourceKeys()).toEqual([]);
+		});
+
+		it('should return keys in registration order', () => {
+			resourceRegistry.registerResource(resourceB);
+			resourceRegistry.registerResource(resourceA);
+
+			expect(resourceRegistry.getAllResourceKeys()).toEqual(['resource-b', 'resource-a']);
+		});
+	});
+});

package/src/resourceRegistry.ts

@@ -0,0 +1,48 @@
+/**
+ * Allows features to register their resource types without modifying core components
+ * These resources can then be used in ResourcesListLayout.
+ *
+ * Apart from this, new resource types can be registered like this:
+  	1. Create a types.d.ts file in your feature directory
+		2. Define your resource type extending BaseResource
+  	3. Use module augmentation to extend ModuleResources:
+  			declare module '@/Interface' {
+    			interface ModuleResources {
+      			myFeature: MyFeatureResource;
+    		}
+			}
+  	4. Import your resource type from the local types file in your components
+ */
+
+import { type ResourceMetadata } from './module.types';
+
+// Private module state
+const resources: Map<string, ResourceMetadata> = new Map();
+
+/**
+ * Register a new resource type
+ */
+export function registerResource(metadata: ResourceMetadata): void {
+	resources.set(metadata.key, metadata);
+}
+
+/**
+ * Get resource metadata by key
+ */
+export function getResource(key: string): ResourceMetadata | undefined {
+	return resources.get(key);
+}
+
+/**
+ * Check if a resource is registered
+ */
+export function hasResource(key: string): boolean {
+	return resources.has(key);
+}
+
+/**
+ * Get all registered resource keys
+ */
+export function getAllResourceKeys(): string[] {
+	return Array.from(resources.keys());
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "@n8n/typescript-config/tsconfig.frontend.json",
+	"compilerOptions": {
+		"rootDirs": [".", "../design-system/src", "../composables/src"],
+		"noEmit": true,
+		"moduleResolution": "bundler",
+		"types": [
+			"vite/client",
+			"vitest/globals",
+			"unplugin-icons/types/vue",
+			"../design-system/src/shims-modules.d.ts"
+		],
+		"paths": {
+			"@n8n/design-system*": ["../design-system/src*"],
+			"@n8n/composables*": ["../composables/src*"],
+			"@n8n/utils*": ["../../../@n8n/utils/src*"]
+		}
+	},
+	"include": ["src/**/*.ts", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig, mergeConfig } from 'vite';
+import { vitestConfig } from '@n8n/vitest-config/frontend';
+
+export default mergeConfig(defineConfig({}), vitestConfig);