feat(editor): Publish @n8n/design-system from dist with an exports map (no-changelog) (#36305)

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

.github/scripts/trim-fe-packageJson.js

@@ -2,17 +2,24 @@ const { writeFileSync } = require('fs');
 const { resolve } = require('path');
 const baseDir = resolve(__dirname, '../..');
 
-const trimPackageJson = (packageName) => {
+/**
+ * `keepRuntimeDeps` packages publish a `dist` their consumers resolve, so npm
+ * has to install what that `dist` imports — dropping the declarations ships
+ * code that cannot resolve. Packages published only as a bundled app keep
+ * nothing.
+ */
+const trimPackageJson = (packageName, { keepRuntimeDeps = false } = {}) => {
 	const filePath = resolve(baseDir, 'packages', packageName, 'package.json');
 	const { scripts, peerDependencies, devDependencies, dependencies, ...packageJson } = require(
 		filePath,
 	);
-	if (packageName === 'frontend/@n8n/chat') {
-		packageJson.dependencies = dependencies;
+	if (keepRuntimeDeps) {
+		if (dependencies) packageJson.dependencies = dependencies;
+		if (peerDependencies) packageJson.peerDependencies = peerDependencies;
 	}
 	writeFileSync(filePath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
 };
 
-trimPackageJson('frontend/@n8n/chat');
-trimPackageJson('frontend/@n8n/design-system');
+trimPackageJson('frontend/@n8n/chat', { keepRuntimeDeps: true });
+trimPackageJson('frontend/@n8n/design-system', { keepRuntimeDeps: true });
 trimPackageJson('frontend/editor-ui');

packages/frontend/@n8n/design-system/.npmignore

@@ -1,14 +0,0 @@
-/src/**/*.{ts,vue,scss,snap}
-/theme/src
-!dist
-
-storybook-static
-.storybook
-
-.browserslistrc
-# Stale as `vite.config.ts` since the rename to .mts, so both build configs were
-# shipping to consumers. Glob covers vite.config.mts and vite.config.styles.mts.
-vite.config.*
-
-*.md
-*.stories.js

packages/frontend/@n8n/design-system/package.json

@@ -2,7 +2,32 @@
   "type": "module",
   "name": "@n8n/design-system",
   "version": "2.34.0",
-  "main": "src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./icons/lucide": {
+      "types": "./dist/icons/lucide/index.d.ts",
+      "import": "./dist/icons/lucide/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./theme.css": "./dist/theme.css",
+    "./css/*": "./dist/css/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "files": [
+    "dist",
+    "assets/fonts",
+    "README.md"
+  ],
   "scripts": {
     "dev": "pnpm run --dir=../storybook dev",
     "clean": "rimraf dist .turbo",

packages/frontend/@n8n/design-system/src/types/tabs.ts

@@ -5,7 +5,7 @@ import type { IconName } from '../components/N8nIcon/icons';
 export interface TabOptions<Value extends string | number> {
 	value: Value;
 	label?: string;
-	icon?: IconName;
+	icon?: IconName | (string & {});
 	iconPosition?: 'left' | 'right';
 	variant?: 'default' | 'danger';
 	href?: string;

packages/frontend/editor-ui/src/features/agents/channels/types.ts

@@ -1,5 +1,5 @@
 import type { AgentIntegrationSettings, ChatIntegrationDescriptor } from '@n8n/api-types';
-import type { IconName } from '@n8n/design-system/components/N8nIcon/icons';
+import type { IconName } from '@n8n/design-system';
 import type { BaseTextKey } from '@n8n/i18n';
 import type { PermissionsRecord } from '@n8n/permissions';
 import type { Component, Ref } from 'vue';