@unisphere/nx 1.22.8 → 2.1.0

package/README.md

@@ -1,167 +1,4 @@
-# Getting Started with Unisphere Project
+# Unisphere Workspace NX Plugin
 
-> This is a temporary documentation to the @unisphere/nx plugin until the official documentation is available.
 
-> ⚠️ **This generator is currently available only to Kaltura developers.**
-> It depends on internal resources such as CI/CD templates, design systems, and private NPM packages. External support for Kaltura customers is on our roadmap.
 
-Unisphere is Kaltura’s frontend framework for building dynamic, composable experiences. A **Unisphere project** is a structured repository that allows developers to create and organize **applications**, **runtimes**, and **packages** under a single cohesive experience. This setup encourages healthy module separation, runtime decoupling, reusability, and clean ownership boundaries — all key ingredients for scaling product development in a multi-team environment.
-
-Whether you're building a full application like _Content Lab_ or a lightweight widget like _Chat_, Unisphere gives you the tooling and conventions to do it the right way from the start.
-
-## Step 1 - Create a New Unisphere Project
-
-Before creating a new Unisphere project, make sure you have a valid `GITHUB_TOKEN` exported in your environment. This is required for GitHub operations during setup.
-
-To scaffold a new project you can use [create-unisphere-project](https://www.npmjs.com/package/create-unisphere-project) npm package with all necessary tooling and structure, run:
-
-```bash
-npm create unisphere-project@latest
-```
-
-### Set Up the GitHub Repository
-
-Once the project is generated locally, you’ll need to create a new GitHub repository so that CI/CD can operate correctly and your team has proper access.
-
-Please contact **Eran Sakal** or **Omri Ceisler** to provision the repository. The following steps will be completed as part of this process:
-
-1. **Repository Creation**
-   The new repo will be created with **internal scope** and named according to this convention:
-
-   ```
-   unisphere-{friendly-experience-name}
-   ```
-
-   The friendly name is derived from your declared experience name (e.g., `unisphere.widget.reactions` → `reactions` → `unisphere-reactions` as the repository name).
-
-2. **Team Access Configuration**
-   The appropriate GitHub teams will be granted access to the repository to match the experience's ownership and collaboration needs.
-
-3. **CI/CD Enablement**
-   These steps are required to ensure that CI/CD workflows are automatically triggered for builds, deployments, versioning, and testing.
-
-Once created, you can push your local project into the new repository and begin active development.
-
----
-
-## Step 2 - Use the `@unisphere/nx` Plugin
-
-After your project is set up, you’ll use the `@unisphere/nx` plugin to generate and manage your project’s core elements. All generators are interactive and designed to enforce Unisphere best practices and conventions.
-
-All generators support interactive usage through `nx g` and prompt you for the correct configuration.
-
-### 🧹 `add-runtime`
-
-Creates a new **runtime**, one of the possible entry points into an experience. Runtimes define **where** and **how** a specific part of the experience is used.
-
-For example, in the **Genie experience**, there's a runtime called **page** used when the host injects the experience into the main body of a site, and another called **player-plugin** for injecting it into a player drawer. We have additional runtimes, one for each tool that is used by the experience, e.g **flashcards-tool**, **source-tool**, **follow-up-tool** etc.
-
-Naming your runtime based on its integration point helps communicate its purpose and role clearly.
-
-```bash
-npx nx g @unisphere/nx:add-runtime
-```
-
-#### Prompts
-
-- **Runtime name** – e.g., `page`, `player-plugin`, `flashcards-tool`, `source-tool`, `follow-up-tool`, `content-lab-drawer`.
-
-- **How will this runtime be used?**
-
-  - **Loaded by External Host**u
-
-    - Deployed independently and loaded at runtime
-
-  - **Embedded in Widget Playground**
-    - Composed by other runtimes, no standalone deployment
-
-- **How will this runtime be used?**
-
-  - **Independent experience used as an entry point (loaded by host or another experience)**
-
-    - Includes an Dev playground application for developing and simulating a host environment
-
-  - **Composed into another runtime of this experience (not used as an entry point)**
-
-    - Composed by another runtime within the same experience
-
-    - Assume it is developed using a playground dev application of another runtime in the project
-
-### 🎨 `add-visual`
-
-Creates a **visual component** within a runtime — the building blocks of your UI.
-
-```bash
-npx nx g @unisphere/nx:add-visual
-```
-
-#### Prompts
-
-- **Runtime name** – Where this visual belongs
-- **Visual name** – e.g., `card`, `toolbar`, `timeline-visual`
-- **Is this visual limited to a single occurrence?**
-  Choose `Yes` for singleton visuals (e.g., when the visual represent a container that can only have one instance), otherwise `No`.
-
-### 📱 `add-application`
-
-Creates an **application** that acts as a host for your runtime(s). These apps can be used for development, standalone deployments, or iframe integrations. The application can be used as a playground for developing and simulating a host environment without the need to deploy the experience to a customer, or it can be an additional entry point for the experience and use the Unisphere ci/cd to be publically available in multi region environments.
-
-```bash
-npx nx g @unisphere/nx:add-application
-```
-
-#### Prompts
-
-- **Application name**
-
-- **Serving type**
-
-  - **Local Dev Playground** – Local development playground (for development and testing)
-  - **Self-Hosted** – Standalone deployment with routing/auth (used for publically available applications)
-  - **Iframe + Query Params** – Embedded apps with config in URL (used for embedding into other applications like Kaltura Admin or KMC)
-  - **Iframe + Post Messages** – Embedded apps using `postMessage` API (used for embedding into other applications like Kaltura Admin or KMC) - this will replace eventually the query param method to be more secure and reliable but is not yet available.
-
-- **Runtime to load in playground** (if Playground selected)
-
-- **HTML page title** (if not using Playground)
-
-### 📦 `add-package`
-
-Creates a shared **package** for separating concerns within an experience. Most of the actual code in a Unisphere project lives in packages — not in runtimes — making it easier to reuse components, services, and logic across multiple entry points. These packages are usually not distributed externally but serve as internal modules consumed by runtimes.
-
-By using packages this way, you can introduce multiple runtimes (e.g., page, player-plugin, admin-panel) that share the same functionality while remaining decoupled.
-
-Some packages, however, are designed for external consumption. For example:
-
-- Each experience has a `Core` package expose the types needed for runtime integration.
-- Differetn `kit` packages act as extendable, design-system-driven building blocks that allow other teams to plug into your experience in a consistent and styled way.
-
-Packages can be published to GitHub or npm, but in most cases, they serve as a clean internal abstraction layer inside the experience repository without being deployed.
-
-```bash
-npx nx g @unisphere/nx:add-package
-```
-
-#### Prompts
-
-- **Package name**
-- **Package scope**
-
-  - **None (no scope)** - Used only internally by the experience runtimes.
-  - **Internal** - Published to GitHub packages (`@kaltura/unisphere-<experience-name>-<package-name>`)
-  - **Public** - Published to npm (`@unisphere/<experience-name>-<package-name>`)
-
-## Best Practices
-
-🧠 Use descriptive names that reflect the purpose of the runtime or visual. For example, use `player-plugin` for a runtime that integrates into a video player, or `container` for visual that represent a container that can only have one instance, or `drawer` if it is a drawer runtime.
-
-🎯 Select the correct runtime type depending on the deployment context. Choose "Independent experience" if the runtime will be loaded by a host or standalone app, and "Composed into another runtime" if it will only exist as part of a larger experience.
-
-♻️ Share logic and components using packages. Most Unisphere code lives in packages rather than runtimes. This promotes reusability and modularity — for instance, content-lab-drawer and content-lab-modal runtimes may reuse the same internal package. Use the non scoped package if you are not sure what to choose.
-
-🔍 Use the interactive CLI mode to generate all project elements. This ensures naming consistency, correct scaffolding, and alignment with Unisphere conventions.
-
-## What’s Next?
-
-Stay tuned for full documentation on each concept and tool at
-**[unisphere.kaltura.com](https://unisphere.kaltura.com)** _(coming soon)_

package/dist/generators/add-application/add-application.js

@@ -113,7 +113,7 @@ async function addApplicationGenerator(tree, options) {
     (0, devkit_1.generateFiles)(tree, path.join(__dirname, templatePath), projectRoot, templateVariables);
     // Install selected dependencies
     (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
-    const distributionChannel = options.servingType !== 'local-dev-playground' ? 'none' : 'unisphere';
+    const distributionChannel = options.servingType === 'local-dev-playground' ? 'none' : 'unisphere';
     // Update .unisphere configuration
     (0, utils_1.updateUnisphereConfig)(tree, 'applications', userInputApplicationName, {
         sourceRoot: `unisphere/applications/${userInputApplicationName}`,

package/dist/generators/add-application/templates/default/package.json.template

@@ -1,8 +1,5 @@
 {
   "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {
-
-  }
+  "version": "1.0.0",  
+  "dependencies": {}
 }

package/dist/generators/add-application/templates/local-dev-playground/package.json

@@ -1,5 +1,6 @@
 {
   "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
   "version": "1.0.0",
+  "private": true,
   "dependencies": {}
 }

package/dist/generators/add-package/add-package.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-package.d.ts","sourceRoot":"","sources":["../../../src/generators/add-package/add-package.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAA2B,MAAM,YAAY,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AAyJrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAgInC;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"add-package.d.ts","sourceRoot":"","sources":["../../../src/generators/add-package/add-package.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAA2B,MAAM,YAAY,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA6DrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBA8HnC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/generators/add-package/add-package.js

@@ -36,88 +36,6 @@ function resolveUnisphereRuntimeVersion(tree) {
         return defaultVersion;
     }
 }
-function generateDemoComponent(tree, projectRoot, vars) {
-    // path: packages/<pkg>/src/lib/panel-demo.tsx
-    const targetPath = `${projectRoot}/src/lib/${vars['packageName__lowerDashCase']}-demo.tsx`;
-    // component and logger names
-    const loggerName = `${vars['packageName__lowerDashCase']}-demo`;
-    const demoName = `${vars['packageName__pascalCase']}Demo`;
-    let content;
-    if (demoName.includes('react')) {
-        content = `import { useContext, useEffect } from 'react';
-import {
-  ScopedUnisphereWorkspaceContext,
-  useGetScopedWorkspaceLogger,
-} from '@unisphere/runtime-react';
-
-const Hihi = () => {
-  return (
-    <div
-      style={{
-        border: '2px dashed #888',
-        borderRadius: '8px',
-        padding: '2rem',
-        margin: '2rem auto',
-        maxWidth: '500px',
-        textAlign: 'center',
-        fontFamily: 'sans-serif',
-        color: '#444',
-        backgroundColor: '#fcfcfc',
-      }}
-    >
-      <h2
-        style={{
-          marginBottom: '1rem',
-          fontSize: '1.25rem',
-          fontWeight: 500,
-        }}
-      >
-        Hihi :)
-      </h2>
-      <p
-        style={{
-          lineHeight: 1.5,
-          marginBottom: '1.5rem',
-          fontSize: '1rem',
-        }}
-      >
-        This '${demoName}' component shows you how to connect with the Unisphere workspace and set up a scoped logger.
-      </p>
-    </div>
-  );
-};
-
-export const ${demoName} = () => {
-  const { unisphereWorkspace } = useContext(ScopedUnisphereWorkspaceContext);
-  const logger = useGetScopedWorkspaceLogger({
-    type: 'react',
-    name: '${loggerName}',
-  });
-
-  useEffect(() => {
-    // example only - feel free to remove
-    logger?.log('${loggerName} mounted');
-    return () => {
-      logger?.log('${loggerName} unmounted');
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!unisphereWorkspace) return;
-    
-    // you can access the unisphere workspace that renders the runtime this component is mounted in
-  }, [unisphereWorkspace]);
-
-  // render your visual
-  return <Hihi />;
-};
-`;
-    }
-    else {
-        content = `export const ${demoName} = {}`;
-    }
-    tree.write(targetPath, content);
-}
 async function addPackageGenerator(tree, options) {
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
@@ -194,7 +112,6 @@ async function addPackageGenerator(tree, options) {
     });
     // Update tsconfig.base.json with path mapping
     (0, utils_1.updateTsConfigPaths)(tree, packageJsonName, `unisphere/packages/${userInputPackageName}/src/index.ts`);
-    generateDemoComponent(tree, projectRoot, templateVariables);
     // Install selected dependencies
     (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
     await (0, devkit_1.formatFiles)(tree);

package/dist/generators/add-package/templates/new-package/package.json.template

@@ -9,14 +9,5 @@
     "url": "<%= githubUrl %>"
   },
   "types": "./index.esm.d.ts",
-  "dependencies": {
-    "@unisphere/runtime": "<%= unisphereRuntimeVersion %>"
-  },
-  "publishConfig": {
-    <% if (distributionChannel === 'github') { %>
-    "registry": "https://npm.pkg.github.com"
-    <% } else if (distributionChannel === 'npm') { %>
-    "registry": "https://registry.npmjs.org"
-    <% } %>
-  }
+  "dependencies": {}
 }

package/dist/generators/add-package/templates/new-package/src/index.ts.template

@@ -1 +0,0 @@
-export * from './lib/<%= packageName__lowerDashCase %>-demo';

package/dist/generators/add-runtime/add-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-runtime.d.ts","sourceRoot":"","sources":["../../../src/generators/add-runtime/add-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA6CrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAwInC;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"add-runtime.d.ts","sourceRoot":"","sources":["../../../src/generators/add-runtime/add-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;AA4CrD,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,yBAAyB,uBAyHnC;AAED,eAAe,mBAAmB,CAAC"}

package/dist/generators/add-runtime/add-runtime.js

@@ -26,8 +26,8 @@ function updateTypesIndexExport(tree, runtimeName, basePath) {
     tree.write(indexPath, updatedContent);
 }
 async function addRuntimeGenerator(tree, options) {
-    // Normalize standalone option - Nx list prompts may return string labels instead of boolean values
-    let isStandalone = options?.standalone === 'yes' ? true : false;
+    // Normalize consumer option - Nx list prompts may return string labels instead of boolean values
+    let isExternal = options?.consumer === 'external' ? true : false;
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
     // Validate dependencies
@@ -38,7 +38,6 @@ async function addRuntimeGenerator(tree, options) {
     const widgetName = unisphereConfig.name;
     // Validate and correct runtime naming for React/DS dependencies
     let userInputRuntimeName = (0, devkit_1.names)(options.name).fileName;
-    userInputRuntimeName = (0, dependency_config_1.validateReactNaming)(userInputRuntimeName, selectedDependencies);
     // Find types package (or fallback to core)
     const typesPackageInfo = (0, utils_1.findTypesOrCorePackageInfo)(tree);
     // Prepare template variables
@@ -78,17 +77,8 @@ async function addRuntimeGenerator(tree, options) {
     const runtimePathKey = `unisphere-runtime-${userInputRuntimeName}`;
     const runtimePathValue = `unisphere/runtimes/${userInputRuntimeName}/src/index.ts`;
     (0, utils_1.updateTsConfigPaths)(tree, runtimePathKey, runtimePathValue);
-    // // Create a package with the same name as the runtime and distribution set to none
-    // const packageResult = await addPackageGenerator(tree, {
-    //   packageName: userInputRuntimeName,
-    //   scope: 'none',
-    // });
-    // // Execute the package generation callback if it exists
-    // if (packageResult && typeof packageResult === 'function') {
-    //   packageResult();
-    // }
-    // Handle standalone usage - create dev application
-    if (isStandalone === true) {
+    // Handle internal usage - create dev application
+    if (!!isExternal) {
         // Create a dev application without prompts
         const applicationResult = await (0, add_application_1.addApplicationGenerator)(tree, {
             name: `${userInputRuntimeName}-dev`,
@@ -111,8 +101,8 @@ async function addRuntimeGenerator(tree, options) {
         devkit_1.logger.info('');
         devkit_1.logger.info(`🚀 Runtime Name: ${userInputRuntimeName}`);
         devkit_1.logger.info(`📁 Location: ${projectRoot}`);
-        devkit_1.logger.info(`🔧 Standalone: ${isStandalone ? 'Yes' : 'No'}`);
-        if (isStandalone === true) {
+        devkit_1.logger.info(`🔧 Consumer: ${isExternal ? 'External' : 'Internal'}`);
+        if (isExternal === true) {
             devkit_1.logger.info('');
             devkit_1.logger.info('📦 Additional components created:');
             devkit_1.logger.info(`   • Dev Application: ${userInputRuntimeName}-dev`);

package/dist/generators/add-runtime/schema.d.ts

@@ -1,5 +1,5 @@
 export interface AddRuntimeGeneratorSchema {
   name: string;
-  standalone: string;
+  consumer: string;
   dependencies?: string[];
 }

package/dist/generators/add-runtime/schema.json

@@ -10,20 +10,20 @@
       "pattern": "^[a-zA-Z][a-zA-Z0-9\\-\\s]*$",
       "x-prompt": "What's the runtime name? (letters, numbers, dashes and spaces allowed)"
     },
-    "standalone": {
+    "consumer": {
       "type": "string",
-      "description": "Is this experience being loaded by the host application, or by another experience (not this one)?",
+      "description": "Is this runtime loaded from within the same experience or by an external consumer?",
       "x-prompt": {
-        "message": "Is this experience being loaded by the host application, or by another experience (not this one)?",
+        "message": "Is this runtime loaded from within the same experience or by an external consumer?",
         "type": "list",
         "items": [
           {
-            "value": "yes",
-            "label": "Yes -loaded by host application"
+            "value": "external",
+            "label": "Loaded by an external consumer"
           },
           {
-            "value": "no",
-            "label": "No - loaded by another experience"
+            "value": "internal",
+            "label": "Loaded by another runtime or application within this experience"
           }
         ]
       }
@@ -63,6 +63,6 @@
   },
   "required": [
     "name",
-    "standalone"
+    "consumer"
   ]
-}
+}

package/dist/migrations/1-22-0/check-nx-version.js

@@ -12,7 +12,7 @@ function checkNxVersion(tree) {
     }
     const majorVersion = parseInt(nxVersion.match(/\d+/)?.[0] ?? '0');
     if (majorVersion < 22) {
-        const errorMessage = `❌ This migration requires Nx 22 or higher. read https://unisphere.kaltura.com/docs/create/changelog/1-22-7-changelog`;
+        const errorMessage = `❌ This migration requires Nx 22 or higher. read https://unisphere.kaltura.com/docs/create/changelog/1-22-6-changelog`;
         devkit_1.logger.error(errorMessage);
         throw new Error(errorMessage);
     }

package/dist/migrations/1-22-2/templates/cicd.template

@@ -9,7 +9,7 @@ on:
 permissions:
   id-token: write
   contents: write
-  packages: write
+  packages: read
 
 jobs:
   release:

package/dist/migrations/1-22-4/summary.js

@@ -7,6 +7,5 @@ async function default_1() {
     devkit_1.logger.info('🎉 Migration to @unisphere/nx 1.22.4 finished successfully!');
     devkit_1.logger.info('');
     devkit_1.logger.info('📋 Full details:');
-    devkit_1.logger.info('https://unisphere.kaltura.com/docs/create/changelog/1-22-7-changelog');
-    devkit_1.logger.info('');
+    devkit_1.logger.info('https://unisphere.kaltura.com/docs/create/changelog/1-22-6-changelog');
 }

package/dist/migrations/2-0-0/fix-playground-apps.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export default function update(tree: Tree): Promise<void>;
+//# sourceMappingURL=fix-playground-apps.d.ts.map

package/dist/migrations/2-0-0/fix-playground-apps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fix-playground-apps.d.ts","sourceRoot":"","sources":["../../../src/migrations/2-0-0/fix-playground-apps.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,IAAI,EAIL,MAAM,YAAY,CAAC;AAGpB,wBAA8B,MAAM,CAAC,IAAI,EAAE,IAAI,iBAqG9C"}

package/dist/migrations/2-0-0/fix-playground-apps.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = update;
+const devkit_1 = require("@nx/devkit");
+const ts_morph_1 = require("ts-morph");
+async function update(tree) {
+    devkit_1.logger.info('🔄 Starting fix playground apps migration...');
+    let filesUpdated = 0;
+    // Create a ts-morph project
+    const project = new ts_morph_1.Project({
+        useInMemoryFileSystem: true,
+    });
+    // Find and fix settings-buttons.tsx, configuration-provider.tsx, and playground-configuration-provider.tsx files
+    (0, devkit_1.visitNotIgnoredFiles)(tree, '.', (filePath) => {
+        if (filePath.endsWith('settings-buttons.tsx') ||
+            filePath.endsWith('configuration-provider.tsx') ||
+            filePath.endsWith('playground-configuration-provider.tsx')) {
+            const content = tree.read(filePath, 'utf-8');
+            if (content) {
+                let hasChanges = false;
+                // Check if the file contains patterns we need to fix
+                const buttonsContainerPattern = /export const ButtonsContainer: React\.FC<{\s*children\?\: React\.ReactChild;\s*}>/;
+                const configProviderPattern = /const getPlaygroundConfigurationFromLocalStorage = \(\s*configurationKey: string\s*\)(?!\s*:)/;
+                const configProviderWithTypePattern = /const getPlaygroundConfigurationFromLocalStorage = \(\s*configurationKey: string\s*\):\s*PlaygroundConfiguration(?!\s*\|)/;
+                if (buttonsContainerPattern.test(content) || configProviderPattern.test(content) || configProviderWithTypePattern.test(content)) {
+                    // Create a source file from the content
+                    const sourceFile = project.createSourceFile(filePath, content, { overwrite: true });
+                    // Replace patterns using regex
+                    let updatedContent = content;
+                    // Fix ButtonsContainer type definition
+                    if (buttonsContainerPattern.test(content)) {
+                        updatedContent = updatedContent.replace(/export const ButtonsContainer: React\.FC<{\s*children\?\: React\.ReactChild;\s*}>/, 'export const ButtonsContainer: React.FC<PropsWithChildren>');
+                    }
+                    // Fix getPlaygroundConfigurationFromLocalStorage return type (no return type)
+                    if (configProviderPattern.test(content)) {
+                        updatedContent = updatedContent.replace(/const getPlaygroundConfigurationFromLocalStorage = \(\s*configurationKey: string\s*\)(?!\s*:)/, 'const getPlaygroundConfigurationFromLocalStorage = (\n  configurationKey: string\n): PlaygroundConfiguration | null');
+                    }
+                    // Fix getPlaygroundConfigurationFromLocalStorage return type (PlaygroundConfiguration -> PlaygroundConfiguration | null)
+                    if (configProviderWithTypePattern.test(content)) {
+                        updatedContent = updatedContent.replace(/const getPlaygroundConfigurationFromLocalStorage = \(\s*configurationKey: string\s*\):\s*PlaygroundConfiguration(?!\s*\|)/, 'const getPlaygroundConfigurationFromLocalStorage = (\n  configurationKey: string\n): PlaygroundConfiguration | null');
+                    }
+                    // Update the source file with the new content
+                    sourceFile.replaceWithText(updatedContent);
+                    // Handle imports with ts-morph (only for settings-buttons.tsx)
+                    if (filePath.endsWith('settings-buttons.tsx') && buttonsContainerPattern.test(content)) {
+                        const reactImport = sourceFile.getImportDeclaration('react');
+                        if (reactImport) {
+                            // Check if PropsWithChildren is already imported
+                            const namedImports = reactImport.getNamedImports();
+                            const hasPropsWithChildren = namedImports.some(imp => imp.getName() === 'PropsWithChildren');
+                            if (!hasPropsWithChildren) {
+                                // Add PropsWithChildren to the existing React import
+                                reactImport.addNamedImport('PropsWithChildren');
+                                hasChanges = true;
+                            }
+                        }
+                        else {
+                            // If no React import exists, create one
+                            sourceFile.addImportDeclaration({
+                                defaultImport: 'React',
+                                namedImports: ['PropsWithChildren'],
+                                moduleSpecifier: 'react'
+                            });
+                            hasChanges = true;
+                        }
+                    }
+                    // Check if any changes were made
+                    if (updatedContent !== content || hasChanges) {
+                        // Write the updated content back to the tree
+                        const finalContent = sourceFile.getFullText();
+                        tree.write(filePath, finalContent);
+                        filesUpdated++;
+                        devkit_1.logger.info(`✅ Updated ${filePath}`);
+                    }
+                }
+            }
+        }
+    });
+    if (filesUpdated > 0) {
+        await (0, devkit_1.formatFiles)(tree);
+        devkit_1.logger.info(`✅ Fix playground apps migration completed. Updated ${filesUpdated} files.`);
+    }
+    else {
+        devkit_1.logger.info('ℹ️ No playground files found to migrate.');
+    }
+}

package/dist/migrations/2-0-0/move-runtime-info-to-core.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+export default function update(tree: Tree): Promise<void | string[]>;
+//# sourceMappingURL=move-runtime-info-to-core.d.ts.map

package/dist/migrations/2-0-0/move-runtime-info-to-core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-runtime-info-to-core.d.ts","sourceRoot":"","sources":["../../../src/migrations/2-0-0/move-runtime-info-to-core.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAIL,MAAM,YAAY,CAAC;AAiEpB,wBAA8B,MAAM,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,EAAE,CAAC,CA+MzE"}