@origostudio/origo-design 0.0.45 → 0.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.46 (2026-10-02)
+
+This was a version bump only for angular-renderer to align it with other projects, there were no code changes.
+
 ## 0.0.45 (2026-10-02)
 
 This was a version bump only for angular-renderer to align it with other projects, there were no code changes.

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@origostudio/angular-renderer",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "private": false,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origostudio/core": "0.0.45",
-    "@origostudio/design-tokens": "0.0.45",
+    "@origostudio/core": "0.0.46",
+    "@origostudio/design-tokens": "0.0.46",
     "tslib": "^2.3.0",
     "@analogjs/vite-plugin-angular": "^2.7.1",
     "zone.js": "^0.16.3",

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.46 (2026-10-02)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.45 (2026-10-02)
 
 ### 🚀 Features

package/packages/cli/package.json

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

package/packages/core/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.46 (2026-10-02)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.45 (2026-10-02)
 
 ### 🚀 Features

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/core",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.46 (2026-10-02)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.45 (2026-10-02)
 
 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": "@origostudio/design-tokens",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.46 (2026-10-02)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
 ## 0.0.45 (2026-10-02)
 
 This was a version bump only for devtools to align it with other projects, there were no code changes.

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

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

package/packages/devtools/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/devtools",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "type": "module",
   "dependencies": {
-    "@origostudio/core": "0.0.45",
-    "@origostudio/cli": "0.0.45",
+    "@origostudio/core": "0.0.46",
+    "@origostudio/cli": "0.0.46",
     "@angular/core": "18.1.0",
     "@angular/common": "18.1.0"
   },

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.46 (2026-10-02)
+
+### 🚀 Features
+
+- add playground application with editor, preview pane, and help links ([7113c55](https://github.com/OrigoStudio/origo-design/commit/7113c55))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.45 (2026-10-02)
 
 ### 🚀 Features

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

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/preview/preview-root.component.spec.ts",{"duration":297.3056980000001,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":3459.714333,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":423.45306699999855,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":17.902663000000757,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":54.607191999999486,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":214.2577139999994,"failed":false}],[":src/app/app.component.spec.ts",{"duration":153.67071700000088,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/preview/preview-root.component.spec.ts",{"duration":285.11165699999765,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":3506.677444000001,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":239.81496600000173,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":15.238445000002685,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":54.886765999999625,"failed":false}],[":src/app/app.component.spec.ts",{"duration":258.6450029999978,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":180.8436389999988,"failed":false}]]}

package/packages/playground/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@origostudio/playground",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "private": true,
   "dependencies": {
-    "@origostudio/core": "0.0.45",
-    "@origostudio/cli": "0.0.45"
+    "@origostudio/core": "0.0.46",
+    "@origostudio/cli": "0.0.46"
   },
   "peerDependencies": {
     "@angular/common": "^18.0.0",

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

@@ -1,4 +1,11 @@
 <div class="playground-layout">
+  <header class="playground-header">
+    <div class="branding">
+      <img class="origo-icon" src="/logo.png" alt="Origo Logo" />
+      <h1>Origo Design Playground</h1>
+    </div>
+    <a class="help-link" [href]="docsUrl" target="_blank" rel="noopener noreferrer">📖 Docs</a>
+  </header>
   <div class="editor-pane">
     <origo-badl-editor
       [initialValue]="'{}'"

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

@@ -8,13 +8,13 @@
 .playground-layout {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 1fr 1fr;
+  grid-template-rows: auto 1fr 1fr;
   height: 100%;
   width: 100%;
 
   @media (min-width: 768px) {
     grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr;
+    grid-template-rows: auto 1fr;
   }
 }
 
@@ -27,3 +27,58 @@
   min-width: 0;
   height: 100%;
 }
+
+.playground-header {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  height: 3rem;
+  background: var(--origo-color-surface, #ffffff);
+  border-bottom: 1px solid var(--origo-color-border, #e0e0e0);
+
+  .branding {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .origo-icon {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: var(--origo-color-text, #333333);
+    }
+  }
+
+  a.help-link {
+    font-size: 0.875rem;
+    color: var(--origo-color-on-primary, #ffffff);
+    background-color: var(--origo-color-primary, #389bff);
+    padding: 0.375rem 0.75rem;
+    border-radius: 4px;
+    text-decoration: none;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+    border: 1px solid transparent;
+
+    &:hover {
+      background-color: var(--origo-color-primary-dark, #0c86ff);
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--origo-color-primary, #0066cc);
+      outline-offset: 2px;
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ 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';
+import { ORIGO_DOCS_URL } from './app.config';
 
 @Component({
   standalone: true,
@@ -12,6 +13,7 @@ import { PreviewPaneComponent } from '../preview/preview-pane.component';
 })
 export class AppComponent {
   protected title = 'playground';
+  protected docsUrl = inject(ORIGO_DOCS_URL) + '/reference/schemas/';
   private previewService = inject(PreviewService);
 
   public onContentChange(content: string) {

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

@@ -1,14 +1,18 @@
 import {
   ApplicationConfig,
+  InjectionToken,
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
 import { provideOrigo9Primitives } from '@origostudio/angular-renderer';
 
+export const ORIGO_DOCS_URL = new InjectionToken<string>('ORIGO_DOCS_URL');
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideOrigo9Primitives(),
+    { provide: ORIGO_DOCS_URL, useValue: 'https://origo-design-docs.netlify.app' },
   ],
 };

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

@@ -6,7 +6,7 @@
 }
 
 .editor-header {
-  padding: 12px 24px;
+  padding: 5px 24px;
   background: var(--origo-color-surface, #1e1e1e);
   border-bottom: 1px solid var(--origo-color-border-subtle, rgba(255, 255, 255, 0.1));
   display: flex;
@@ -15,7 +15,7 @@
 
   .editor-title {
     color: var(--origo-color-text-secondary, #cccccc);
-    font-size: 0.9rem;
+    font-size: 0.75rem;
     font-weight: 600;
     letter-spacing: 0.05em;
     text-transform: uppercase;

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

@@ -80,12 +80,16 @@ export class BadlEditorComponent implements AfterViewInit, OnDestroy {
           console.warn('Could not restore playground draft, falling back to initialValue', e);
         }
 
+        const modelUri = monaco.Uri.parse('inmemory://model/domain.json');
+        let model = monaco.editor.getModel(modelUri);
+        if (model) {
+          model.setValue(savedState);
+        } else {
+          model = monaco.editor.createModel(savedState, 'json', modelUri);
+        }
+
         this.editor = monaco.editor.create(this.editorContainer.nativeElement, {
-          model: monaco.editor.createModel(
-            savedState,
-            'json',
-            monaco.Uri.parse('inmemory://model/domain.json')
-          ),
+          model: model,
           theme: this.theme(),
           readOnly: this.readOnly(),
           automaticLayout: true, // Required for split-pane resize in Story 7.2
@@ -191,6 +195,48 @@ export class BadlEditorComponent implements AfterViewInit, OnDestroy {
             ],
           },
         ],
+        capabilities: [
+          {
+            id: 'cap-create-user',
+            name: 'Create',
+            description: 'Create a new user in the system',
+            type: 'Command',
+            entityId: 'ent-user',
+            outcome_ref: [],
+            preconditions: ['User does not already exist'],
+            postconditions: ['User is saved to database'],
+            permissions: [
+              {
+                role: 'admin',
+                access: 'grant',
+              },
+            ],
+            risk_level: 'medium',
+            async: false,
+          },
+          {
+            id: 'cap-read-user',
+            name: 'Read',
+            description: 'Read user details by ID',
+            type: 'Query',
+            entityId: 'ent-user',
+            outcome_ref: [],
+            preconditions: [],
+            postconditions: [],
+            permissions: [
+              {
+                role: 'admin',
+                access: 'grant',
+              },
+              {
+                role: 'user',
+                access: 'grant',
+              },
+            ],
+            risk_level: 'low',
+            async: false,
+          },
+        ],
       };
 
       const formatted = JSON.stringify(sample, null, 2);
@@ -200,7 +246,10 @@ export class BadlEditorComponent implements AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.editor?.dispose(); // CRITICAL — prevents Monaco timer memory leak
-    this.editor = null;
+    if (this.editor) {
+      this.editor.getModel()?.dispose();
+      this.editor.dispose(); // CRITICAL — prevents Monaco timer memory leak
+      this.editor = null;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 <div class="preview-container">
   <div class="preview-header">
-    <h2>Preview</h2>
+    <span class="preview-title">Preview</span>
   </div>
 
   <div class="iframe-wrapper">

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

@@ -14,26 +14,27 @@
 }
 
 .preview-header {
-  padding: var(--origo-spacing-m, 16px) 24px;
+  padding: 13px 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;
+  .preview-title {
+    color: var(--origo-color-text-primary, #323232);
+    font-size: 0.75rem;
     font-weight: 600;
-    letter-spacing: -0.01em;
-    color: var(--origo-color-text, #111827);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
   }
 }
 
 .iframe-wrapper {
   flex: 1;
   position: relative;
-  min-height: 0; /* Important for flex child to not overflow */
+  min-height: 0;
+  /* Important for flex child to not overflow */
   overflow: hidden;
 
   iframe {