@origostudio/origo-design 0.0.24 → 0.0.26

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "angular-renderer",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": true,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origo/core": "0.0.24",
-    "@origo/design-tokens": "0.0.24",
+    "@origo/core": "0.0.26",
+    "@origo/design-tokens": "0.0.26",
     "tslib": "^2.3.0",
     "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.36.0"
@@ -16,5 +16,9 @@
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
     "@angular/platform-browser": ">=18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OrigoStudio/origo-design.git"
   }
 }

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.26 (2026-09-08)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.25 (2026-09-07)
+
+### 🚀 Features
+
+- initialize package.json files for cli, core, design-tokens, playground, and angular-renderer packages ([2dee8cc](https://github.com/OrigoStudio/origo-design/commit/2dee8cc))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.24 (2026-09-07)
 
 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.24",
+  "version": "0.0.26",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,8 +9,12 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origo/core": "0.0.24",
+    "@origo/core": "0.0.26",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OrigoStudio/origo-design.git"
   }
 }

package/packages/core/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.26 (2026-09-08)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
+## 0.0.25 (2026-09-07)
+
+### 🚀 Features
+
+- initialize package.json files for cli, core, design-tokens, playground, and angular-renderer packages ([2dee8cc](https://github.com/OrigoStudio/origo-design/commit/2dee8cc))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.24 (2026-09-07)
 
 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.24",
+  "version": "0.0.26",
   "private": true,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -17,5 +17,9 @@
   "devDependencies": {
     "@types/json-source-map": "^0.6.0",
     "@types/semver": "^7.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OrigoStudio/origo-design.git"
   }
 }

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.26 (2026-09-08)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.25 (2026-09-07)
+
+### 🚀 Features
+
+- initialize package.json files for cli, core, design-tokens, playground, and angular-renderer packages ([2dee8cc](https://github.com/OrigoStudio/origo-design/commit/2dee8cc))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.24 (2026-09-07)
 
 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.24",
+  "version": "0.0.26",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -21,5 +21,9 @@
   "dependencies": {
     "ajv": "^8.20.0"
   },
-  "devDependencies": {}
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OrigoStudio/origo-design.git"
+  }
 }

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 0.0.26 (2026-09-08)
+
+### 🚀 Features
+
+- implement live compilation and rendering pipeline in playground environment ([d6dd322](https://github.com/OrigoStudio/origo-design/commit/d6dd322))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.25 (2026-09-07)
+
+### 🚀 Features
+
+- initialize package.json files for cli, core, design-tokens, playground, and angular-renderer packages ([2dee8cc](https://github.com/OrigoStudio/origo-design/commit/2dee8cc))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.24 (2026-09-07)
 
 This was a version bump only for playground to align it with other projects, there were no code changes.

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

@@ -1,8 +1,8 @@
 {
-  "hash": "d39ccc8f",
-  "configHash": "df395598",
+  "hash": "88d8f2fd",
+  "configHash": "1e17074a",
   "lockfileHash": "451f3e06",
-  "browserHash": "8e8201da",
+  "browserHash": "13639ef9",
   "optimized": {},
   "chunks": {}
 }

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

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/editor/schema-registry.spec.ts",{"duration":14.678867999999056,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":87.46060899999975,"failed":false}],[":src/app/app.component.spec.ts",{"duration":86.3053660000005,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/editor/badl-editor.component.spec.ts",{"duration":121.80809300000146,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":226.10447299999942,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":11.560529000000315,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":168.94734900000003,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":151.09215100000074,"failed":false}],[":src/app/app.component.spec.ts",{"duration":172.2051109999993,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":17.45730200000071,"failed":false}]]}

package/packages/playground/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@origo/playground",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": true,
   "dependencies": {},
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OrigoStudio/origo-design.git"
   }
 }

package/packages/playground/src/app/app.component.html

@@ -1 +1,11 @@
-<origo-badl-editor [initialValue]="'{}'"></origo-badl-editor>
+<div class="playground-layout">
+  <div class="editor-pane">
+    <origo-badl-editor
+      [initialValue]="'{}'"
+      (editorContentChange)="onContentChange($event)"
+    ></origo-badl-editor>
+  </div>
+  <div class="preview-pane">
+    <origo-playground-preview></origo-playground-preview>
+  </div>
+</div>

package/packages/playground/src/app/app.component.scss

@@ -1,4 +1,29 @@
 :host {
   display: block;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.playground-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  height: 100%;
+  width: 100%;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+
+.editor-pane {
+  min-width: 0;
+  height: 100%;
+}
+
+.preview-pane {
+  min-width: 0;
   height: 100%;
 }

package/packages/playground/src/app/app.component.ts

@@ -1,13 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { PreviewService } from '../preview/preview.service';
 import { BadlEditorComponent } from '../editor/badl-editor.component';
+import { PreviewPaneComponent } from '../preview/preview-pane.component';
 
 @Component({
   standalone: true,
-  imports: [BadlEditorComponent],
+  imports: [BadlEditorComponent, PreviewPaneComponent],
   selector: 'origo-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
   protected title = 'playground';
+  private previewService = inject(PreviewService);
+
+  public onContentChange(content: string) {
+    this.previewService.onContentChange(content);
+  }
 }

package/packages/playground/src/editor/badl-editor.component.html

@@ -1 +1,5 @@
+<div class="editor-header">
+  <span class="editor-title">BADL Editor</span>
+  <button class="load-sample-btn" (click)="loadSample()">Load Sample JSON</button>
+</div>
 <div class="editor-container" #editorContainer></div>

package/packages/playground/src/editor/badl-editor.component.scss

@@ -1,10 +1,51 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
+.editor-header {
+  padding: 12px 24px;
+  background: var(--origo-color-surface, #1e1e1e);
+  border-bottom: 1px solid var(--origo-color-border-subtle, rgba(255, 255, 255, 0.1));
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .editor-title {
+    color: var(--origo-color-text-secondary, #cccccc);
+    font-size: 0.9rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .load-sample-btn {
+    background: transparent;
+    border: 1px solid var(--origo-color-border, #4a4a4a);
+    color: var(--origo-color-text-primary, #e0e0e0);
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+
+    &:hover {
+      background: var(--origo-color-surface-hover, rgba(255, 255, 255, 0.1));
+      border-color: var(--origo-color-border-hover, #666);
+    }
+
+    &:active {
+      background: var(--origo-color-surface-active, rgba(255, 255, 255, 0.15));
+    }
+  }
+}
+
 .editor-container {
+  flex: 1;
   width: 100%;
-  height: 100%;
+  min-height: 0;
 }

package/packages/playground/src/editor/badl-editor.component.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
   ViewChild,
   input,
+  output,
   NgZone,
   inject,
 } from '@angular/core';
@@ -24,6 +25,7 @@ export class BadlEditorComponent implements AfterViewInit, OnDestroy {
   readonly initialValue = input<string>('');
   readonly theme = input<string>('vs-dark');
   readonly readOnly = input<boolean>(false);
+  readonly editorContentChange = output<string>();
 
   private editor: monaco.editor.IStandaloneCodeEditor | null = null;
   private zone = inject(NgZone);
@@ -44,12 +46,109 @@ export class BadlEditorComponent implements AfterViewInit, OnDestroy {
           automaticLayout: true, // Required for split-pane resize in Story 7.2
           minimap: { enabled: false },
         });
+
+        // Initial compilation trigger
+        this.editorContentChange.emit(this.initialValue());
+
+        this.editor.onDidChangeModelContent(() => {
+          const val = this.editor?.getValue();
+          if (val !== undefined) {
+            this.editorContentChange.emit(val);
+          }
+        });
       } catch (e) {
         console.error('Failed to initialize Monaco Editor', e);
       }
     });
   }
 
+  loadSample(): void {
+    if (this.editor) {
+      const sample = {
+        id: 'dom-identity',
+        name: 'Identity Management',
+        version: '1.0.0',
+        domain: 'core',
+        entities: [
+          {
+            id: 'ent-user',
+            name: 'User',
+            fields: [
+              {
+                id: 'fld-user-id',
+                name: 'id',
+                type: 'string',
+                label: 'User ID',
+                validation: ['required', 'uuid'],
+                metadata_path: '/user/id',
+              },
+              {
+                id: 'fld-user-username',
+                name: 'username',
+                type: 'string',
+                label: 'Username',
+                validation: ['required', 'min:3', 'max:50'],
+                metadata_path: '/user/username',
+              },
+              {
+                id: 'fld-user-email',
+                name: 'email',
+                type: 'string',
+                label: 'Email Address',
+                validation: ['required', 'email'],
+                metadata_path: '/user/email',
+              },
+              {
+                id: 'fld-user-roleId',
+                name: 'roleId',
+                type: 'string',
+                label: 'Assigned Role',
+                references: 'ent-role',
+                validation: ['required'],
+                metadata_path: '/user/roleId',
+              },
+            ],
+          },
+          {
+            id: 'ent-role',
+            name: 'Role',
+            fields: [
+              {
+                id: 'fld-role-id',
+                name: 'id',
+                type: 'string',
+                label: 'Role ID',
+                validation: ['required', 'uuid'],
+                metadata_path: '/role/id',
+              },
+              {
+                id: 'fld-role-name',
+                name: 'name',
+                type: 'string',
+                label: 'Role Name',
+                validation: ['required'],
+                metadata_path: '/role/name',
+              },
+              {
+                id: 'fld-role-permissions',
+                name: 'permissions',
+                type: 'array',
+                itemType: 'string',
+                label: 'Permissions List',
+                validation: [],
+                metadata_path: '/role/permissions',
+              },
+            ],
+          },
+        ],
+      };
+
+      const formatted = JSON.stringify(sample, null, 2);
+      this.editor.setValue(formatted);
+      // The onDidChangeModelContent will trigger preview compilation automatically
+    }
+  }
+
   ngOnDestroy(): void {
     this.editor?.dispose(); // CRITICAL — prevents Monaco timer memory leak
     this.editor = null;

package/packages/playground/src/index.html

@@ -6,6 +6,12 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <origo-root></origo-root>

package/packages/playground/src/main.ts

@@ -1,5 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
+import { PreviewRootComponent } from './preview/preview-root.component';
 
-bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+if (window.location.search.includes('preview=true')) {
+  bootstrapApplication(PreviewRootComponent, appConfig).catch(err => console.error(err));
+} else {
+  bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
+}

package/packages/playground/src/preview/error-display.component.html

@@ -0,0 +1,29 @@
+@if (previewService.compilationErrorsSignal().length > 0) {
+  <div class="error-container">
+    <h3>Compilation Errors</h3>
+    <ul>
+      @for (error of previewService.compilationErrorsSignal(); track $index) {
+        <li class="error-item">
+          <span
+            class="badge"
+            [ngClass]="{
+              'badge-syntax': error.type === 'Syntax Error',
+              'badge-semantic': error.type === 'Semantic Error',
+            }"
+          >
+            {{ error.type }}
+          </span>
+          <div class="error-details">
+            <span class="error-message">{{ error.message }}</span>
+            @if (error.path || error.line) {
+              <span class="error-location">
+                at {{ error.path || 'document' }} (Line: {{ error.line || '?' }}, Col:
+                {{ error.column || '?' }})
+              </span>
+            }
+          </div>
+        </li>
+      }
+    </ul>
+  </div>
+}

package/packages/playground/src/preview/error-display.component.scss

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+  flex-shrink: 0;
+}
+
+.error-container {
+  padding: 20px;
+  background-color: var(--origo-color-surface, #ffffff);
+  border-top: 1px solid var(--origo-color-border, #eaeaea);
+  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);
+  max-height: 300px;
+  overflow-y: auto;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  margin-top: -12px; /* Pull up to overlap slightly */
+  position: relative;
+  z-index: 10;
+
+  h3 {
+    margin-top: 0;
+    margin-bottom: 12px;
+    color: var(--origo-color-danger, #ef4444);
+    font-size: 0.95rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .error-item {
+    display: flex;
+    align-items: flex-start;
+    padding: var(--origo-spacing-xs) 0;
+    border-bottom: 1px solid var(--origo-color-border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .badge {
+    padding: 2px 6px;
+    border-radius: var(--origo-border-radius-s);
+    font-size: var(--origo-typography-size-caption);
+    font-weight: 600;
+    margin-right: var(--origo-spacing-s);
+    white-space: nowrap;
+
+    &.badge-syntax {
+      background-color: var(--origo-color-danger);
+      color: white;
+    }
+
+    &.badge-semantic {
+      background-color: var(--origo-color-warning);
+      color: black;
+    }
+  }
+
+  .error-details {
+    display: flex;
+    flex-direction: column;
+
+    .error-message {
+      font-weight: 500;
+    }
+
+    .error-location {
+      font-size: var(--origo-typography-size-caption);
+      color: var(--origo-color-text-muted);
+      margin-top: 2px;
+    }
+  }
+}

package/packages/playground/src/preview/error-display.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { PreviewService } from './preview.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'origo-playground-error-display',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './error-display.component.html',
+  styleUrl: './error-display.component.scss',
+})
+export class ErrorDisplayComponent {
+  public previewService = inject(PreviewService);
+}

package/packages/playground/src/preview/preview-pane.component.html

@@ -0,0 +1,18 @@
+<div class="preview-container">
+  <div class="preview-header">
+    <h2>Preview</h2>
+  </div>
+
+  <div class="iframe-wrapper">
+    <iframe
+      #previewIframe
+      (load)="onIframeLoad()"
+      sandbox="allow-scripts allow-same-origin"
+      src="/?preview=true"
+      title="Origo Live Preview"
+    >
+    </iframe>
+  </div>
+
+  <origo-playground-error-display></origo-playground-error-display>
+</div>

package/packages/playground/src/preview/preview-pane.component.scss

@@ -0,0 +1,44 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.preview-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--origo-color-surface, #fafafa);
+  border-left: 1px solid var(--origo-color-border, #eaeaea);
+  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.03);
+}
+
+.preview-header {
+  padding: var(--origo-spacing-m, 16px) 24px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--origo-color-border, #eaeaea);
+  display: flex;
+  align-items: center;
+
+  h2 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--origo-color-text, #111827);
+  }
+}
+
+.iframe-wrapper {
+  flex: 1;
+  display: flex;
+  min-height: 0; /* Important for flex child to not overflow */
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+  }
+}