@origostudio/origo-design 0.0.44 → 0.0.46

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 {

package/packages/playground/src/preview/preview-root.component.ts

@@ -74,7 +74,7 @@ export class PreviewRootComponent {
               props: {
                 'aria-label': 'Capabilities',
                 columns: [{ key: 'name', label: 'Capability Name' }],
-                rows: capabilities.map(c => ({ name: c?.name || '-' })),
+                rows: capabilities.map((c: any) => ({ name: c?.name || '-' })),
               },
             },
           ]

package/packages/playground/src/schemas/entity.schema.json

@@ -65,6 +65,12 @@
       "items": {
         "$ref": "#/$defs/field"
       }
+    },
+    "capabilities": {
+      "type": "array",
+      "items": {
+        "$ref": "capability.schema.json"
+      }
     }
   },
   "required": ["id", "name", "fields"],