@origostudio/origo-design 0.0.30 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -68,6 +68,7 @@
     "@playwright/test": "^1.36.0",
     "@schematics/angular": "22.0.9",
     "@swc/helpers": "~0.5.18",
+    "@types/chrome": "^0.2.9",
     "@types/jest": "30.0.0",
     "@types/json-source-map": "^0.6.0",
     "@types/node": "^22.12.0",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.0.32 (2026-09-19)
+
+### 🚀 Features
+
+- add devtools bridge to angular renderer package ([26a2a2d](https://github.com/OrigoStudio/origo-design/commit/26a2a2d))
+- implement strict test isolation guards, structured cloning, and update test setup configurations and registry artifacts ([a5e79e2](https://github.com/OrigoStudio/origo-design/commit/a5e79e2))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.31 (2026-09-16)
+
+### 🚀 Features
+
+- implement Origo DevTools inspector UI and angular-renderer bridge ([dedd240](https://github.com/OrigoStudio/origo-design/commit/dedd240))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.30 (2026-09-15)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "angular-renderer",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "private": true,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origo/core": "0.0.30",
-    "@origo/design-tokens": "0.0.30",
+    "@origo/core": "0.0.32",
+    "@origo/design-tokens": "0.0.32",
     "tslib": "^2.3.0",
     "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.36.0"

package/packages/angular-renderer/src/devtools/devtools-bridge.ts

@@ -10,7 +10,9 @@ export interface ResolutionChain {
 }
 
 export interface RenderingPath {
-  path: string; // BADL semantic path
+  name: string;
+  badlPath: string;
+  children?: RenderingPath[];
 }
 
 export interface ErrorContext {
@@ -74,8 +76,31 @@ let _internalState: unknown = {
 
 let _errorTelemetry: ErrorContext[] = [];
 
+function deepCloneState(obj: unknown, seen = new WeakMap()): unknown {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  if (seen.has(obj)) {
+    return seen.get(obj);
+  }
+  const clone: any = Array.isArray(obj) ? [] : {};
+  seen.set(obj, clone);
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      clone[key] = deepCloneState((obj as Record<string, unknown>)[key], seen);
+    }
+  }
+  return clone;
+}
+
 export function _injectTestState(state: unknown): void {
-  _internalState = state;
+  try {
+    _internalState =
+      typeof structuredClone === 'function' ? structuredClone(state) : deepCloneState(state);
+  } catch (e) {
+    // Fallback if structuredClone fails (e.g. contains functions or unsupported types)
+    _internalState = deepCloneState(state);
+  }
 }
 
 export function _resetTestState(): void {
@@ -95,11 +120,48 @@ export function getDevToolsAPI(): OrigoDevToolsAPI | null {
   return {
     getActiveState: () => redactSensitiveData(_internalState),
     getRenderingPath: (path: string) => {
-      // Mock BADL semantic path
-      return { path: `root.components.${path}` };
+      // Build a tree from _internalState
+      const state: any = _internalState;
+
+      if (state && state.id === 'dom-identity') {
+        // Map the provided JSON to a tree
+        const root: RenderingPath = {
+          name: state.name || 'Root',
+          badlPath: `/${state.domain || 'core'}/${state.id}`,
+          children: (state.entities || []).map((ent: any) => ({
+            name: ent.name,
+            badlPath: `/${state.domain || 'core'}/${state.id}/${ent.id}`,
+            children: (ent.fields || []).map((fld: any) => ({
+              name: fld.name,
+              badlPath: fld.metadata_path || `/${ent.id}/${fld.id}`,
+            })),
+          })),
+        };
+        return root;
+      }
+
+      // Default fallback
+      return {
+        name: 'Root Application',
+        badlPath: '/',
+        children: [],
+      };
     },
     getMetadataSource: (path: string) => {
-      return null;
+      // Find the object in _internalState that matches the path
+      const state: any = _internalState;
+      if (state && state.id === 'dom-identity') {
+        // Return the whole state for root, or specific parts based on path
+        if (path === `/${state.domain || 'core'}/${state.id}`) return state as any;
+
+        for (const ent of state.entities || []) {
+          if (path === `/${state.domain || 'core'}/${state.id}/${ent.id}`) return ent;
+          for (const fld of ent.fields || []) {
+            if (path === (fld.metadata_path || `/${ent.id}/${fld.id}`)) return fld;
+          }
+        }
+      }
+      return { file: 'mock.json', line: 1 } as any;
     },
     getResolutionChain: (path: string) => {
       return null;

package/packages/angular-renderer/src/index.ts

@@ -5,3 +5,4 @@ export * from './adapters/web/adapter';
 export * from './components/primitives/vbox/vbox.component';
 export * from './components/primitives/text-input/text-input.component';
 export * from './components/primitives/button/button.component';
+export * from './devtools';

package/packages/angular-renderer/src/test-setup.ts

@@ -6,3 +6,12 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+
+afterEach(() => {
+  getTestBed().resetTestingModule();
+  jest.clearAllMocks();
+  jest.restoreAllMocks();
+  if (typeof document !== 'undefined') {
+    document.body.innerHTML = '';
+  }
+});

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.32 (2026-09-19)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.31 (2026-09-16)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.30 (2026-09-15)
 
 This was a version bump only for cli to align it with other projects, there were no code changes.

package/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/cli",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origo/core": "0.0.30",
+    "@origo/core": "0.0.32",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.32 (2026-09-19)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
+## 0.0.31 (2026-09-16)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.30 (2026-09-15)
 
 This was a version bump only for core to align it with other projects, there were no code changes.

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origo/core",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "private": true,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.32 (2026-09-19)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.31 (2026-09-16)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.30 (2026-09-15)
 
 This was a version bump only for design-tokens to align it with other projects, there were no code changes.

package/packages/design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origo/design-tokens",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -0,0 +1,22 @@
+## 0.0.32 (2026-09-19)
+
+### 🚀 Features
+
+- add devtools and playground packages with retro-8 versioning artifacts ([ff1aedc](https://github.com/OrigoStudio/origo-design/commit/ff1aedc))
+- implement strict test isolation guards, structured cloning, and update test setup configurations and registry artifacts ([a5e79e2](https://github.com/OrigoStudio/origo-design/commit/a5e79e2))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.31 (2026-09-16)
+
+### 🚀 Features
+
+- add Nx project configuration for devtools package ([cb1f628](https://github.com/OrigoStudio/origo-design/commit/cb1f628))
+- add Origo DevTools browser extension package with inspector UI ([4910624](https://github.com/OrigoStudio/origo-design/commit/4910624))
+- implement Origo DevTools inspector UI and angular-renderer bridge ([dedd240](https://github.com/OrigoStudio/origo-design/commit/dedd240))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse

package/packages/devtools/devtools.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Origo DevTools</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'self';" />
+  </head>
+  <body>
+    <!-- 
+      We cannot run inline scripts in MV3 extension pages. 
+      The actual devtools panel registration happens here if needed, 
+      or in main.ts. Actually, devtools.html is the devtools_page in manifest,
+      which is invisible. It just creates the panel.
+    -->
+    <script src="devtools.js"></script>
+  </body>
+</html>

package/packages/devtools/devtools.js

@@ -0,0 +1,10 @@
+chrome.devtools.panels.create('Origo', '', 'panel.html', function (panel) {
+  if (!panel) {
+    console.error(
+      'Origo panel creation failed. chrome.runtime.lastError:',
+      chrome.runtime.lastError
+    );
+    return;
+  }
+  console.log('Origo panel created');
+});

package/packages/devtools/manifest.json

@@ -0,0 +1,24 @@
+{
+  "manifest_version": 3,
+  "name": "Origo DevTools",
+  "version": "0.0.1",
+  "description": "Origo DevTools Inspector UI",
+  "devtools_page": "devtools.html",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["http://localhost/*", "http://127.0.0.1/*"],
+      "js": ["content-script.js"]
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["injected.js"],
+      "matches": ["http://localhost/*", "http://127.0.0.1/*"]
+    }
+  ],
+  "permissions": ["tabs"]
+}

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps___vitest_vm__/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "d1897329",
+  "configHash": "5adf1e88",
+  "lockfileHash": "9e4a8fc3",
+  "browserHash": "ab12f760",
+  "optimized": {},
+  "chunks": {}
+}

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/deps___vitest_vm__/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/packages/devtools/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":189.16830899999877,"failed":false}]]}

package/packages/devtools/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@origo/devtools",
+  "version": "0.0.32",
+  "type": "module",
+  "dependencies": {
+    "@origo/core": "0.0.30",
+    "@origostudio/cli": "0.0.30",
+    "@angular/core": "18.1.0",
+    "@angular/common": "18.1.0"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.268"
+  }
+}

package/packages/devtools/panel.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Origo DevTools</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
+    />
+  </head>
+  <body>
+    <origo-devtools-root></origo-devtools-root>
+  </body>
+</html>

package/packages/devtools/src/background/background.ts

@@ -0,0 +1,57 @@
+const connections: { [tabId: number]: chrome.runtime.Port } = {};
+
+chrome.runtime.onConnect.addListener(port => {
+  if (port.name !== 'origo-devtools-panel') return;
+
+  const extensionListener = (message: any) => {
+    // The original connection event doesn't include the tab ID of the
+    // DevTools page, so we need to send it explicitly.
+    if (message.name === 'init') {
+      const tabId = message.tabId;
+      if (tabId != null) {
+        if (connections[tabId]) {
+          connections[tabId].disconnect();
+        }
+        connections[tabId] = port;
+      }
+      return;
+    }
+
+    // Relay message to content script
+    if (message.tabId != null && message.data !== undefined) {
+      chrome.tabs.sendMessage(message.tabId, message.data).catch(err => {
+        console.warn(`Could not send message to tab ${message.tabId}:`, err);
+      });
+    }
+  };
+
+  // Listen to messages sent from the DevTools page
+  port.onMessage.addListener(extensionListener);
+
+  port.onDisconnect.addListener(port => {
+    port.onMessage.removeListener(extensionListener);
+
+    const tabs = Object.keys(connections);
+    for (let i = 0, len = tabs.length; i < len; i++) {
+      if (connections[parseInt(tabs[i])] === port) {
+        delete connections[parseInt(tabs[i])];
+        break;
+      }
+    }
+  });
+});
+
+// Receive message from content script and relay to the devTools page for the current tab
+chrome.runtime.onMessage.addListener((request, sender) => {
+  // Messages from content scripts should have sender.tab set
+  if (sender.tab && sender.tab.id != null) {
+    const tabId = sender.tab.id;
+    if (tabId in connections) {
+      connections[tabId].postMessage(request);
+    } else {
+      console.log('Tab not found in connection list.');
+    }
+  } else {
+    console.log('sender.tab not defined.');
+  }
+});

package/packages/devtools/src/content-script/content-script.ts

@@ -0,0 +1,43 @@
+// Inject the script into the main world
+const root = document.head || document.documentElement;
+if (root) {
+  const script = document.createElement('script');
+  script.src = chrome.runtime.getURL('injected.js');
+  root.appendChild(script);
+  script.onload = () => {
+    script.remove();
+  };
+}
+
+// Relay messages from background to injected script
+chrome.runtime.onMessage.addListener(message => {
+  window.postMessage(
+    {
+      source: 'origo-devtools-content-script',
+      payload: message,
+    },
+    window.location.origin
+  );
+  // We do not return true here because we are not using sendResponse for async replies;
+  // instead we rely on injected.ts sending a separate postMessage back.
+});
+
+// Relay messages from injected script to background
+window.addEventListener('message', event => {
+  if (
+    event.source !== window ||
+    event.origin !== window.location.origin ||
+    !event.data ||
+    event.data.source !== 'origo-devtools-injected'
+  ) {
+    return;
+  }
+
+  try {
+    if (chrome.runtime?.sendMessage) {
+      chrome.runtime.sendMessage(event.data);
+    }
+  } catch (e) {
+    console.warn('Origo DevTools Extension context invalidated:', e);
+  }
+});

package/packages/devtools/src/content-script/injected.ts

@@ -0,0 +1,124 @@
+import type { DevToolsMessage } from '../types/messages';
+import type { OrigoDevToolsAPI } from '@origo/angular-renderer';
+
+// Declare the window variable based on the API type
+declare global {
+  interface Window {
+    __ORIGO_DEVTOOLS__?: OrigoDevToolsAPI;
+  }
+}
+
+// Injected into the main world to access window.__ORIGO_DEVTOOLS__
+window.addEventListener('message', event => {
+  // Only accept messages from same frame and origin
+  if (
+    event.source !== window ||
+    event.origin !== window.location.origin ||
+    !event.data ||
+    event.data.source !== 'origo-devtools-content-script'
+  ) {
+    return;
+  }
+
+  const message = event.data.payload as DevToolsMessage;
+  const devtools = window.__ORIGO_DEVTOOLS__;
+  const targetOrigin = window.location.origin;
+
+  if (!devtools) {
+    window.postMessage(
+      {
+        source: 'origo-devtools-injected',
+        payload: { type: 'NOT_AVAILABLE' },
+      },
+      targetOrigin
+    );
+    return;
+  }
+
+  try {
+    switch (message.type) {
+      case 'GET_ACTIVE_STATE':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: {
+              type: 'ACTIVE_STATE_RESPONSE',
+              payload: devtools.getActiveState(),
+            },
+          },
+          targetOrigin
+        );
+        break;
+      case 'GET_METADATA_SOURCE':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: {
+              type: 'METADATA_SOURCE_RESPONSE',
+              payload: devtools.getMetadataSource(message.payload?.badlPath || ''),
+            },
+          },
+          targetOrigin
+        );
+        break;
+      case 'GET_RESOLUTION_CHAIN':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: {
+              type: 'RESOLUTION_CHAIN_RESPONSE',
+              payload: devtools.getResolutionChain(message.payload?.badlPath || ''),
+            },
+          },
+          targetOrigin
+        );
+        break;
+      case 'GET_RENDERING_PATH':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: {
+              type: 'RENDERING_PATH_RESPONSE',
+              payload: devtools.getRenderingPath(message.payload?.badlPath || ''),
+            },
+          },
+          targetOrigin
+        );
+        break;
+      case 'GET_ERROR_TELEMETRY':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: {
+              type: 'ERROR_TELEMETRY_RESPONSE',
+              payload: devtools.getErrorTelemetry(),
+            },
+          },
+          targetOrigin
+        );
+        break;
+      case 'PING':
+        window.postMessage(
+          {
+            source: 'origo-devtools-injected',
+            payload: { type: 'PONG' },
+          },
+          targetOrigin
+        );
+        break;
+      default:
+        console.warn('Unknown message type received in injected script:', message.type);
+        break;
+    }
+  } catch (e) {
+    console.error('Origo DevTools Injected Script Error:', e);
+    // Send an error reply if we fail
+    window.postMessage(
+      {
+        source: 'origo-devtools-injected',
+        payload: { type: 'ERROR', error: String(e) },
+      },
+      targetOrigin
+    );
+  }
+});