@k-4u/resource-mapper-core 0.0.1

package/data/services/api/lambda-users.yaml

@@ -0,0 +1,15 @@
+friendlyName: "User Management Lambda"
+description: |
+  Lambda function handling user authentication, registration, and profile management.
+  
+  Processes user-related API requests with JWT token validation and session management.
+  Connects to DynamoDB for user data storage and RDS for transactional operations.
+serviceType: LAMBDA
+outgoingConnections:
+  - targetIdentifier: "data/dynamodb-users"
+    description: "User data storage"
+    connectionType: CALLS
+  - targetIdentifier: "data/rds-postgres"
+    description: "User authentication data"
+    connectionType: TCP
+

package/data/services/compute/alb.yaml

@@ -0,0 +1,15 @@
+friendlyName: "Application Load Balancer"
+description: |
+  Application Load Balancer distributing traffic to ECS services across availability zones.
+  
+  Provides health checks, SSL termination, and intelligent routing with path-based rules.
+  Configured with auto-scaling and connection draining for zero-downtime deployments.
+serviceType: ALB
+outgoingConnections:
+  - targetIdentifier: "compute/ecs-inventory"
+    description: "Routes to inventory service"
+    connectionType: TCP
+  - targetIdentifier: "compute/ecs-notification"
+    description: "Routes to notification service"
+    connectionType: TCP
+

package/data/services/compute/ecs-inventory.yaml

@@ -0,0 +1,16 @@
+friendlyName: "ECS Inventory Service"
+description: |
+  Containerized Spring Boot inventory management service running on ECS Fargate.
+  
+  REST API service handling real-time inventory tracking, stock updates, and warehouse management.
+  Built with Spring Boot, provides endpoints for inventory CRUD operations, stock level monitoring,
+  and automated reorder alerts. Auto-scales based on CPU and memory metrics.
+serviceType: ECS
+outgoingConnections:
+  - targetIdentifier: "data/rds-postgres"
+    description: "PostgreSQL database for inventory persistence"
+    connectionType: TCP
+  - targetIdentifier: "data/redis"
+    description: "Redis cache for high-frequency inventory lookups"
+    connectionType: TCP
+

package/data/services/compute/ecs-notification.yaml

@@ -0,0 +1,15 @@
+friendlyName: "ECS Notification Service"
+description: |
+  Containerized notification service running on ECS for email and SMS delivery.
+  
+  Processes notification queues and sends alerts to users via multiple channels.
+  Integrates with external services and maintains delivery logs in DynamoDB.
+serviceType: ECS
+outgoingConnections:
+  - targetIdentifier: "data/dynamodb-notifications"
+    description: "Notification logs and queue"
+    connectionType: CALLS
+  - targetIdentifier: "data/redis"
+    description: "Redis cache for high-frequency inventory lookups"
+    connectionType: TCP
+

package/data/services/compute/group-info.yaml

@@ -0,0 +1,7 @@
+name: "Compute Services"
+description: |
+  Manages containerized applications, load balancers, and compute resources.
+  This group handles ECS clusters, container services, and application load balancers
+  for running stateful and long-running applications.
+teamId: "cloud-shepherds"
+

package/data/services/data/dynamodb-notifications.yaml

@@ -0,0 +1,12 @@
+friendlyName: "DynamoDB Notifications Table"
+description: |
+  DynamoDB table tracking notification delivery status and queued messages.
+  
+  Manages notification queue with TTL for automatic cleanup of processed notifications.
+  Provides audit trail for compliance and debugging notification issues.
+serviceType: DYNAMODB
+outgoingConnections:
+  - targetIdentifier: "api/lambda-orders"
+    description: "Triggers order processing Lambda function"
+    connectionType: STREAM
+

package/data/services/data/dynamodb-orders.yaml

@@ -0,0 +1,9 @@
+friendlyName: "DynamoDB Orders Table"
+description: |
+  DynamoDB table storing order history and real-time order status tracking.
+  
+  Optimized for high-throughput reads and writes with TTL for order archival.
+  Uses DynamoDB Streams for event-driven order processing workflows.
+serviceType: DYNAMODB
+outgoingConnections: []
+

package/data/services/data/dynamodb-products.yaml

@@ -0,0 +1,9 @@
+friendlyName: "DynamoDB Products Table"
+description: |
+  DynamoDB table managing product catalog with full-text search capabilities.
+  
+  Stores product details, pricing, and inventory levels with global tables for multi-region access.
+  Integrated with ElastiCache for frequently accessed product data.
+serviceType: DYNAMODB
+outgoingConnections: []
+

package/data/services/data/dynamodb-users.yaml

@@ -0,0 +1,9 @@
+friendlyName: "DynamoDB Users Table"
+description: |
+  DynamoDB table storing user profiles and session data with global secondary indexes.
+  
+  Provides single-digit millisecond latency for user lookups and session management.
+  Configured with on-demand capacity and point-in-time recovery enabled.
+serviceType: DYNAMODB
+outgoingConnections: []
+

package/data/services/data/group-info.yaml

@@ -0,0 +1,7 @@
+name: "Data Storage"
+description: |
+  Manages database systems and data persistence layers.
+  This group handles RDS relational databases, DynamoDB NoSQL tables,
+  and data backup/recovery strategies for the entire platform.
+teamId: "data-wizards"
+

package/data/services/data/rds-postgres.yaml

@@ -0,0 +1,9 @@
+friendlyName: "RDS PostgreSQL Database"
+description: |
+  Multi-AZ PostgreSQL RDS instance for transactional data and relational storage.
+  
+  Provides ACID transactions, complex queries, and data consistency for critical business data.
+  Configured with automated backups, point-in-time recovery, and read replicas for scaling.
+serviceType: RDS
+outgoingConnections: []
+

package/data/services/data/redis.yaml

@@ -0,0 +1,10 @@
+friendlyName: "Redis Cache Server"
+description: |
+  High-performance in-memory data store used for caching and session management.
+  
+  This Redis instance provides fast data access for session storage, reducing
+  database load and improving application performance. Configured with persistence
+  enabled for data durability.
+serviceType: VALKEY
+outgoingConnections: []
+

package/data/services/frontend/cloudfront.yaml

@@ -0,0 +1,12 @@
+friendlyName: "CloudFront CDN Distribution"
+description: |
+  CloudFront distribution providing global content delivery with edge caching.
+  
+  Configured with custom SSL certificate, HTTPS enforcement, and optimized
+  cache behaviors. Improves website performance and reduces S3 costs by caching content at edge locations.
+serviceType: CLOUDFRONT
+outgoingConnections:
+  - targetIdentifier: "frontend/s3-website"
+    description: "Origin - S3 static website bucket"
+    connectionType: TCP
+

package/data/services/frontend/group-info.yaml

@@ -0,0 +1,7 @@
+name: "Frontend Infrastructure"
+description: |
+  Manages static website hosting, CDN, and DNS for the web application.
+  This group handles all frontend-facing AWS services including S3 buckets
+  for static assets, CloudFront for global content delivery, and Route53 for DNS management.
+teamId: "interface-architects"
+

package/data/services/frontend/route53.yaml

@@ -0,0 +1,15 @@
+friendlyName: "Route53 DNS Zone"
+description: |
+  Route53 hosted zone managing DNS records for the application domain.
+  
+  Handles domain name resolution with health checks and routing policies.
+  Configured with alias records pointing to CloudFront and ALB endpoints.
+serviceType: ROUTE53
+outgoingConnections:
+  - targetIdentifier: "frontend/cloudfront"
+    description: "DNS resolution to CloudFront distribution"
+    connectionType: TCP
+  - targetIdentifier: "compute/alb"
+    description: "DNS resolution to Application Load Balancer"
+    connectionType: TCP
+

package/data/services/frontend/s3-website.yaml

@@ -0,0 +1,9 @@
+friendlyName: "S3 Static Website Bucket"
+description: |
+  S3 bucket hosting static website assets including HTML, CSS, JavaScript, and images.
+  
+  Configured with website hosting enabled, versioning for rollback capability,
+  and lifecycle policies for cost optimization. Serves as the origin for CloudFront distribution.
+serviceType: S3
+outgoingConnections: []
+

package/data/teams/cloud-shepherds.yaml

@@ -0,0 +1,15 @@
+name: "The Cloud Shepherds"
+description: |
+  Herding clouds and wrangling infrastructure since day one.
+  This team manages all things cloud infrastructure, networking, and compute.
+  We keep the lights on and the packets flowing.
+teamLead: "Alex Rivera"
+reachability:
+  - channel: email
+    detail: "cloud-shepherds@k4u.nl"
+  - channel: slack
+    detail: "#team-cloud-shepherds"
+  - channel: phone
+    detail: "+31 20 100 2000"
+  - channel: pigeon
+    detail: "Release the blue pigeon from HQ rooftop"

package/data/teams/data-wizards.yaml

@@ -0,0 +1,15 @@
+name: "The Data Wizards"
+description: |
+  Conjuring data magic and casting database spells daily.
+  Masters of persistence, guardians of state, and keepers of the sacred schemas.
+  If it needs to be stored, we've got a spell for it.
+teamLead: "Morgan Chen"
+reachability:
+  - channel: email
+    detail: "data-wizards@k4u.nl"
+  - channel: slack
+    detail: "#team-data-wizards"
+  - channel: phone
+    detail: "+31 20 200 3000"
+  - channel: teams
+    detail: "teams://data-wizards-room"

package/data/teams/interface-architects.yaml

@@ -0,0 +1,19 @@
+name: "The Interface Architects"
+description: |
+  Building bridges between humans and machines since the dawn of APIs.
+  From pixels to payloads, we design the experiences that users love.
+  Frontend, APIs, and everything in between.
+teamLead: "Jordan Lee"
+reachability:
+  - channel: email
+    detail: "interface-architects@k4u.nl"
+  - channel: slack
+    detail: "#team-interface-architects"
+  - channel: phone
+    detail: "+31 20 300 4000"
+  - channel: pagerduty
+    detail: "pagerduty://interface-architects"
+  - channel: teams
+    detail: "teams://interface-architects-room"
+  - channel: pigeon
+    detail: "Release the red pigeon from HQ rooftop"

package/e2e/demo.test.ts

@@ -0,0 +1,54 @@
+import { expect, test } from '@playwright/test';
+import type { Page } from '@playwright/test';
+
+const logBrowserConsole = (page: Page) => {
+	page.on('console', (msg) => {
+		console.log(`[browser:${msg.type()}] ${msg.text()}`);
+	});
+};
+
+const waitForOverlayToDisappear = async (page: Page) => {
+	const overlay = page.locator('[data-testid="flow-loading-overlay"]');
+	try {
+		await overlay.waitFor({ state: 'detached', timeout: 20000 });
+	} catch {
+		await expect(overlay).toHaveCount(0);
+	}
+};
+
+const gotoHomeAndWaitForDiagram = async (page: Page) => {
+	logBrowserConsole(page);
+	await page.goto('/');
+	await page.waitForSelector('[data-testid="flow-canvas"]', { timeout: 20000 });
+	await expect(page.locator('[data-testid="flow-canvas"]')).toBeVisible();
+	await waitForOverlayToDisappear(page);
+	const anyNode = page.locator('[data-testid="flow-canvas"] .svelte-flow__node').first();
+	await anyNode.waitFor({ state: 'visible', timeout: 20000 });
+};
+
+test('home page renders diagram with data', async ({ page }) => {
+	await gotoHomeAndWaitForDiagram(page);
+	const flowCanvas = page.locator('[data-testid="flow-canvas"]');
+	await expect(flowCanvas.locator('.svelte-flow__node').first()).toBeVisible();
+	await expect(flowCanvas.getByText('No diagram available.')).toHaveCount(0);
+});
+
+test('clicking a group node updates the sidebar selection', async ({ page }) => {
+	await gotoHomeAndWaitForDiagram(page);
+	const groupNode = page.locator('.svelte-flow__node').filter({ hasText: 'API Services' });
+	await groupNode.first().waitFor({ state: 'visible' });
+	await groupNode.first().click();
+	const sidebar = page.locator('[data-testid="group-sidebar"], aside').filter({ hasText: 'API Services' });
+	await expect(sidebar.first()).toBeVisible();
+});
+
+test('double clicking a node navigates to the group detail page', async ({ page }) => {
+	await gotoHomeAndWaitForDiagram(page);
+	const groupNode = page.locator('.svelte-flow__node').filter({ hasText: 'API Services' });
+	await groupNode.first().waitFor({ state: 'visible' });
+	await groupNode.first().dblclick();
+	await page.waitForURL('**/group/api', { timeout: 20000 });
+	await page.waitForSelector('[data-testid="flow-canvas"]', { timeout: 20000 });
+	await waitForOverlayToDisappear(page);
+	await expect(page.locator('h2').filter({ hasText: 'API Services' }).first()).toBeVisible();
+});

package/e2e/header-toolbar.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+
+// Helper to get the header toolbar buttons
+const getToolbarButtons = async (page) => {
+  const legendBtn = page.locator('[data-testid="toolbar-legend"]');
+  const darkBtn = page.locator('[data-testid="toolbar-darkmode"]');
+  const logBtn = page.locator('[data-testid="toolbar-log"]');
+  return { legendBtn, darkBtn, logBtn };
+};
+
+test.describe('Header Toolbar', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+    await page.waitForSelector('[data-testid="toolbar-legend"]');
+  });
+
+  test('shows all three toolbar buttons', async ({ page }) => {
+    const { legendBtn, darkBtn, logBtn } = await getToolbarButtons(page);
+    await expect(legendBtn).toBeVisible();
+    await expect(darkBtn).toBeVisible();
+    await expect(logBtn).toBeVisible();
+  });
+
+  test('Show/Hide Legend toggles legend', async ({ page }) => {
+    const { legendBtn } = await getToolbarButtons(page);
+    // Legend should be visible by default
+    await expect(page.locator('.pointer-events-none.absolute.bottom-4.right-4')).toBeVisible();
+    await legendBtn.click();
+    await expect(page.locator('.pointer-events-none.absolute.bottom-4.right-4')).toBeHidden();
+    await legendBtn.click();
+    await expect(page.locator('.pointer-events-none.absolute.bottom-4.right-4')).toBeVisible();
+  });
+
+  test('Light/Dark mode toggles color mode', async ({ page }) => {
+    const { darkBtn } = await getToolbarButtons(page);
+    // Default is light mode
+    await expect(page.locator('html')).not.toHaveClass(/dark/);
+    await darkBtn.click();
+    await expect(page.locator('html')).toHaveClass(/dark/);
+    await darkBtn.click();
+    await expect(page.locator('html')).not.toHaveClass(/dark/);
+  });
+
+  test('Log button logs to console', async ({ page }) => {
+    const { logBtn } = await getToolbarButtons(page);
+    const [msg] = await Promise.all([
+      page.waitForEvent('console', (m) => m.text().includes('[Header] Log button clicked')),
+      logBtn.click()
+    ]);
+    expect(msg.text()).toContain('[Header] Log button clicked');
+  });
+});
+

package/e2e/layout.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '@playwright/test'
+
+const gotoHomeAndWaitForDiagram = async (page: any) => {
+  await page.goto('/')
+  await page.waitForSelector('[data-testid="flow-canvas"]')
+}
+
+test.describe('layout fills viewport', () => {
+  test('overview canvas height tracks viewport', async ({ page }) => {
+    await gotoHomeAndWaitForDiagram(page)
+    const metrics = await page.evaluate(() => {
+      const canvas = document.querySelector('[data-testid="flow-canvas"]')
+      const sidebar = document.querySelector('[data-testid="group-sidebar"]')
+      const header = document.querySelector('header')
+      const main = document.querySelector('main')
+      const headerHeight = header?.getBoundingClientRect().height ?? 0
+      const mainStyles = main ? getComputedStyle(main) : null
+      const mainPadding = mainStyles
+        ? parseFloat(mainStyles.paddingTop) + parseFloat(mainStyles.paddingBottom)
+        : 0
+      const availableHeight = window.innerHeight - headerHeight - mainPadding
+      const canvasHeight = canvas?.getBoundingClientRect().height ?? 0
+      const sidebarHeight = sidebar?.getBoundingClientRect().height ?? 0
+      return { canvasHeight, sidebarHeight, availableHeight }
+    })
+
+    expect(metrics.canvasHeight).toBeGreaterThanOrEqual(metrics.availableHeight - 8)
+    expect(Math.abs(metrics.canvasHeight - metrics.sidebarHeight)).toBeLessThanOrEqual(4)
+  })
+})

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@k-4u/resource-mapper-core",
+  "version": "0.0.1",
+  "description": "SvelteKit UI template for resource-mapper — used internally by the CLI",
+  "keywords": ["architecture", "visualisation", "svelte", "ui"],
+  "author": "K-4U",
+  "homepage": "https://github.com/K-4U/resource-mapper#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/K-4U/resource-mapper.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/K-4U/resource-mapper/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "license": "MIT",
+  "dependencies": {
+    "@k-4u/resource-mapper": "*",
+    "@k-4u/resource-mapper-shared": "*",
+    "@xyflow/svelte": "^1.5.1",
+    "adm-zip": "^0.5.16",
+    "elkjs": "^0.11.0",
+    "libavoid-js": "^0.5.0-beta.3",
+    "svelte-theme": "^1.4.3",
+    "vite-plugin-static-copy": "^3.2.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.2",
+    "@eslint/js": "^9.39.2",
+    "@iconify/svelte": "^5.2.1",
+    "@nx/vite": "^22.5.3",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.51.0",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/adm-zip": "^0.5.7",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^25",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.15.0",
+    "globals": "^17.3.0",
+    "playwright": "^1.58.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "svelte": "^5.51.1",
+    "svelte-check": "^4.4.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.55.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "vitest-browser-svelte": "^2.0.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	webServer: {
+		command: 'npm run dev -- --host 127.0.0.1 --port 4173',
+		port: 4173,
+		reuseExistingServer: !process.env.CI
+	},
+	testDir: 'e2e'
+});

package/plugins/mapper-data-plugin.ts

@@ -0,0 +1,32 @@
+import type {Plugin} from 'vite';
+import * as fs from "node:fs";
+
+export function mapperDataPlugin(): Plugin {
+    const virtualModuleId = 'virtual:mapper-data';
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+
+    return {
+        name: 'mapper-data-plugin',
+        resolveId(id) {
+            if (id === virtualModuleId) return resolvedVirtualModuleId;
+        },
+        load(id) {
+            if (id === resolvedVirtualModuleId) {
+                const filePath = process.env.VITE_MAPPER_DATA
+                let data: string;
+
+                if (filePath) {
+                    this.addWatchFile(filePath);
+                    try {
+                        data = fs.readFileSync(filePath, 'utf-8');
+                    } catch (err) {
+                        console.error(`Failed to read data from ${filePath}: ${err}`);
+                        return '{}';
+                    }
+                }
+
+                return `export default ${data};`;
+            }
+        }
+    };
+}

package/project.json

@@ -0,0 +1,23 @@
+{
+  "name": "core",
+  "projectType": "application",
+  "targets": {
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "vitest run",
+        "cwd": "packages/core"
+      },
+      "configurations": {
+        "coverage": {
+          "command": "vitest run --coverage"
+        }
+      },
+      "outputs": ["{projectRoot}/coverage"]
+    },
+    "publish": {
+      "command": "npm publish --access public",
+      "dependsOn": ["build"]
+    }
+  }
+}

package/src/app.css

@@ -0,0 +1,125 @@
+@import '@xyflow/svelte/dist/style.css';
+@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+@custom-variant dark (&:where(.dark, .dark *));
+
+html,
+body,
+#svelte {
+    height: 100%;
+    min-height: 100%;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+@utility big-title {
+    @apply uppercase tracking-[0.3em] text-blue-600 dark:text-blue-400;
+}
+
+/**
+TODO: The styles below are for all nodes, style them based on the type of node, e.g. .svelte-flow__node[data-type="custom"] { ... }
+ */
+.svelte-flow__node {
+    @apply gap-1 px-4 py-3 dark:text-white text-black transition-colors duration-300 ease-in-out;
+    @apply shadow-sm;
+    @apply rounded-lg;
+    @apply bg-linear-to-tr from-gray-50 to-gray-100 dark:from-gray-500 dark:to-gray-700;
+}
+
+.svelte-flow__node.selected {
+    @apply border-blue-400/80 shadow-lg;
+    @apply from-blue-400 to-blue-700 dark:from-blue-900 dark:to-blue-950;
+}
+
+/* Internal service nodes */
+.svelte-flow__node-service {
+    @apply from-green-50 to-green-100 dark:from-green-500 dark:to-green-800;
+}
+
+/* External service nodes */
+.svelte-flow__node-external {
+    @apply from-yellow-50 to-yellow-100 dark:from-yellow-500 dark:to-yellow-800;
+}
+
+/* Service group nodes (partially transparent) */
+.svelte-flow__node-serviceGroup {
+    @apply transition-colors duration-300 ease-in-out opacity-60 dark:opacity-40;
+}
+
+.svelte-flow__node-serviceGroup.current-group {
+    @apply from-green-400 dark:from-green-900 text-blue-600 dark:text-blue-200 to-green-700 dark:to-green-950;
+}
+
+.svelte-flow__node-serviceGroup.external-group {
+    @apply from-yellow-50 dark:from-yellow-900 text-blue-600 dark:text-blue-200 to-yellow-700 dark:to-yellow-950;
+}
+
+
+.edge-label {
+    @apply absolute bg-slate-900 text-slate-400 px-2 py-0.5 rounded
+    text-[10px] font-bold border border-slate-700 whitespace-nowrap
+    shadow-lg pointer-events-none transition-colors duration-200 ease-in-out;
+}
+
+.edge-label.selected {
+    @apply text-blue-400 border-blue-500 bg-slate-800;
+}
+
+/* The actual SVG path of the edge */
+.snake-edge-path {
+    @apply transition-colors duration-200 ease-in-out;
+    stroke: #64748b; /* slate-500 */
+    stroke-width: 2px;
+    stroke-linejoin: round;
+    stroke-linecap: round;
+}
+
+.snake-edge-path.selected {
+    @apply stroke-blue-500;
+    stroke-width: 3px;
+    /* This creates a subtle SVG filter-based glow if desired,
+       or you can just rely on the stroke color */
+    filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.5));
+}
+
+.snake-edge-path.internal {
+    @apply stroke-blue-400 dark:stroke-blue-600
+}
+
+.svelte-flow__edge {
+    @apply stroke-3;
+}
+
+.snake-edge-path.incoming {
+    @apply stroke-green-400 dark:stroke-green-600;
+}
+
+.snake-edge-path.outgoing {
+    @apply stroke-sky-400 dark:stroke-sky-600
+}
+
+.sidebar-card {
+    @apply rounded-xl border border-gray-200    dark:border-gray-700 bg-gray-50    dark:bg-slate-700 p-4 mt-4
+}
+
+.sidebar-card.external {
+    @apply border-yellow-400 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-800
+}
+
+.sidebar-card-subtitle {
+    @apply text-xl font-semibold text-gray-900 dark:text-white
+}
+
+.sidebar-card-title {
+    @apply big-title
+}
+
+.sidebar-card-contents {
+    @apply mt-2 text-sm text-gray-700 dark:text-gray-300
+}