refactor: consolidate gui package boundaries and release v0.0.10

Author: FloSch62

PUBLISHING.md

@@ -9,9 +9,8 @@
 
 The `publish-package.yml` workflow publishes `@srl-labs/clab-ui` to GitHub Packages.
 
-Wrapper packages in this workspace (`@srl-labs/clab-ui-core`, `@srl-labs/clab-ui-explorer`,
-`@srl-labs/clab-ui-inspect`, `@srl-labs/containerlab-gui`) are compatibility layers for local
-development and are not published as standalone deliverables in this flow.
+No wrapper packages are published separately; consume core/explorer/inspect APIs from
+`@srl-labs/clab-ui` subpath exports.
 
 ## Local publish (manual)
 

README.md

@@ -2,6 +2,15 @@
 
 Workspace for shared containerlab UI packages.
 
+## Setup
+
+Run dependency installation from the workspace root:
+
+```bash
+cd /home/flschwar/projects/clab/containerlab-gui
+npm install
+```
+
 ## Active development flow
 
 - `npm run dev`: run the standalone browser harness from `dev/`
@@ -24,14 +33,13 @@ The main published package is:
 
 - `@srl-labs/clab-ui`
 
-Compatibility wrapper packages in this repo:
-
-- `@srl-labs/clab-ui-core`
-- `@srl-labs/clab-ui-explorer`
-- `@srl-labs/clab-ui-inspect`
-- `@srl-labs/containerlab-gui`
+Import API surfaces directly from subpaths:
 
-These wrappers are for internal/workspace compatibility and re-export canonical implementations from `@srl-labs/clab-ui`.
+- `@srl-labs/clab-ui/core`
+- `@srl-labs/clab-ui/explorer`
+- `@srl-labs/clab-ui/inspect`
+- `@srl-labs/clab-ui/theme`
+- `@srl-labs/clab-ui/services`
 
 Host adapter packages:
 

dev/main.tsx

@@ -4,7 +4,7 @@ import { createRoot, type Root as ReactRoot } from "react-dom/client";
 import { ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import { App } from "@webview/App";
-import type { CustomNodeTemplate, CustomIconInfo, SchemaData } from "@srl-labs/clab-ui-core";
+import type { CustomNodeTemplate, CustomIconInfo, SchemaData } from "@srl-labs/clab-ui/core";
 import "@webview/styles/global.css";
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
@@ -18,7 +18,7 @@ import {
   EXPORT_COMMANDS,
   MSG_SVG_EXPORT_RESULT,
   parseSchemaData
-} from "@srl-labs/clab-ui-core";
+} from "@srl-labs/clab-ui/core";
 
 import { DevStateManager } from "./mock/DevState";
 import { DevSettingsOverlay } from "./components/DevSettingsOverlay";
@@ -30,12 +30,12 @@ import {
   type ExplorerActionInvocation,
   type ExplorerSnapshotOptions,
   type ExplorerSnapshotProviders
-} from "@srl-labs/clab-ui-explorer";
+} from "@srl-labs/clab-ui/explorer";
 import type {
   ExplorerIncomingMessage,
   ExplorerOutgoingMessage,
   ExplorerUiState
-} from "@srl-labs/clab-ui-explorer";
+} from "@srl-labs/clab-ui/explorer";
 import { installInMemoryApi } from "./mock/inMemoryApi";
 import { loadDevSession, saveDevSession } from "./mock/devSession";
 

dev/mock/DevState.ts

@@ -10,7 +10,7 @@
  * Clipboard is handled locally by useUnifiedClipboard (React refs).
  */
 
-import type { CustomNodeTemplate } from "@srl-labs/clab-ui-core";
+import type { CustomNodeTemplate } from "@srl-labs/clab-ui/core";
 
 // ============================================================================
 // Types

dev/mock/devSession.ts

@@ -1,4 +1,4 @@
-import type { CustomNodeTemplate } from "@srl-labs/clab-ui-core";
+import type { CustomNodeTemplate } from "@srl-labs/clab-ui/core";
 
 const DEV_SESSION_STORAGE_KEY = "containerlab-gui.dev.session.v1";
 

dev/mock/inMemoryApi.ts

@@ -5,7 +5,7 @@ import type {
   TopologyHostCommand,
   TopologyHostResponseMessage,
   TopologySnapshot
-} from "@srl-labs/clab-ui-core";
+} from "@srl-labs/clab-ui/core";
 
 import datacenterYaml from "../topologies-original/datacenter.clab.yml?raw";
 import datacenterAnnotations from "../topologies-original/datacenter.clab.yml.annotations.json?raw";

dev/mockData.ts

@@ -2,7 +2,7 @@
  * Mock data for standalone development of React TopoViewer.
  */
 
-import type { CustomIconInfo, CustomNodeTemplate } from "@srl-labs/clab-ui-core";
+import type { CustomIconInfo, CustomNodeTemplate } from "@srl-labs/clab-ui/core";
 
 /**
  * Sample custom node templates (from VS Code settings)

dev/tsconfig.json

@@ -10,8 +10,6 @@
     "./**/*.tsx",
     "../src/reactTopoViewer/**/*.ts",
     "../src/reactTopoViewer/**/*.tsx",
-    "../src/webviews/**/*.ts",
-    "../src/webviews/**/*.tsx",
     "../packages/**/*.ts",
     "../packages/**/*.tsx"
   ]

dev/vite.config.ts

@@ -15,12 +15,9 @@ export default defineConfig({
       react: path.resolve(nodeModules, "react"),
       "react-dom": path.resolve(nodeModules, "react-dom"),
       "@webview": path.resolve(__dirname, "../packages/ui/src"),
-      "@webviews": path.resolve(__dirname, "../src/webviews"),
-      "@shared": path.resolve(__dirname, "../packages/core/src"),
-      "@srl-labs/clab-ui-core": path.resolve(__dirname, "../packages/core/src"),
+      "@webviews": path.resolve(__dirname, "../packages/ui/src/webviews"),
+      "@shared": path.resolve(__dirname, "../packages/ui/src/core"),
       "@srl-labs/clab-ui": path.resolve(__dirname, "../packages/ui/src"),
-      "@srl-labs/clab-ui-explorer": path.resolve(__dirname, "../packages/explorer/src"),
-      "@srl-labs/clab-ui-inspect": path.resolve(__dirname, "../packages/inspect/src"),
       "@srl-labs/clab-host-contract": path.resolve(__dirname, "../packages/host-contract/src"),
       "@srl-labs/clab-adapter-api": path.resolve(__dirname, "../packages/adapter-api/src"),
       "@srl-labs/clab-adapter-memory": path.resolve(__dirname, "../packages/adapter-memory/src"),

esbuild.config.js

@@ -3,6 +3,16 @@ const path = require("path");
 const fs = require("fs");
 const { execSync } = require("child_process");
 
+function resolvePackageFile(specifier) {
+  try {
+    return require.resolve(specifier, {
+      paths: [__dirname, path.join(__dirname, "packages/ui")]
+    });
+  } catch {
+    return null;
+  }
+}
+
 const WEBVIEW_ASSET_MANIFEST = {
   reactTopoViewerWebview: "reactTopoViewerWebview.js",
   reactTopoViewerStyles: "reactTopoViewerStyles.css",
@@ -60,7 +70,8 @@ async function copyFonts() {
 }
 
 async function copyMapLibreWorker() {
-  const srcPath = path.join(__dirname, "node_modules/maplibre-gl/dist/maplibre-gl-csp-worker.js");
+  const srcPath = resolvePackageFile("maplibre-gl/dist/maplibre-gl-csp-worker.js");
+  if (!srcPath) return;
   const destPath = path.join(__dirname, "dist/maplibre-gl-csp-worker.js");
   if (!fs.existsSync(srcPath)) return;
   await fs.promises.copyFile(srcPath, destPath);
@@ -125,19 +136,19 @@ async function build() {
       outfile: "dist/containerlabExplorerView.js"
     },
     {
-      entryPoints: ["src/webviews/welcome/welcomePage.webview.tsx"],
+      entryPoints: ["packages/ui/src/webviews/welcome/welcomePage.webview.tsx"],
       outfile: "dist/welcomePageWebview.js"
     },
     {
       entryPoints: ["packages/ui/src/inspect/entry.tsx"],
       outfile: "dist/inspectWebview.js"
     },
     {
-      entryPoints: ["src/webviews/nodeImpairments/nodeImpairments.webview.tsx"],
+      entryPoints: ["packages/ui/src/webviews/nodeImpairments/nodeImpairments.webview.tsx"],
       outfile: "dist/nodeImpairmentsWebview.js"
     },
     {
-      entryPoints: ["src/webviews/wiresharkVnc/wiresharkVnc.webview.tsx"],
+      entryPoints: ["packages/ui/src/webviews/wiresharkVnc/wiresharkVnc.webview.tsx"],
       outfile: "dist/wiresharkVncWebview.js"
     }
   ].map((build) =>