@origostudio/origo-design 0.0.37 → 0.0.39

package/packages/angular-renderer/src/components/primitives/tabs/tabs.component.pw.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { TabsComponent, TabsProps } from './tabs.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('TabsComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(TabsComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'tabs',
+          props: {
+            columns: [{ key: 'name', label: 'Name' }],
+            rows: [{ name: 'Test' }],
+            items: [{ label: 'Item 1', id: '1', href: '/' }],
+            tabs: [{ label: 'Tab 1', id: 'tab-1' }],
+          },
+        } as InteractionContract<TabsProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/text-input/text-input.component.pw.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/experimental-ct-angular';
+import { test, expect } from '@jscutlery/playwright-ct-angular';
 import { TextInputComponent, TextInputProps } from './text-input.component';
 import { InteractionContract } from '@origo/core';
 import AxeBuilder from '@axe-core/playwright';
@@ -11,19 +11,28 @@ test.describe('TextInputComponent Accessibility', () => {
     await mount(TextInputComponent, {
       props: {
         contract: {
-          id: '2',
+          id: 'test-id',
           type: 'textInput',
           props: {
-            placeholder: 'Enter name',
-            value: 'Jane',
-            'aria-label': 'Name input',
-            'aria-describedby': 'name-hint',
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
           },
         } as InteractionContract<TextInputProps>,
       },
     });
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 });

package/packages/angular-renderer/src/components/primitives/textarea/textarea.component.pw.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { TextareaComponent, TextareaProps } from './textarea.component';
+import { InteractionContract } from '@origo/core';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('TextareaComponent Accessibility', () => {
+  test('should not have any automatically detectable accessibility issues', async ({
+    mount,
+    page,
+  }) => {
+    await mount(TextareaComponent, {
+      props: {
+        contract: {
+          id: 'test-id',
+          type: 'textarea',
+          props: {
+            label: 'Test Label',
+            placeholder: 'Test',
+            'aria-label': 'Test',
+            options: [{ label: 'Option 1', value: '1' }],
+            items: [{ label: 'Item 1' }],
+          },
+        } as InteractionContract<TextareaProps>,
+      },
+    });
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});

package/packages/angular-renderer/src/components/primitives/vbox/vbox.component.pw.ts

@@ -1,5 +1,6 @@
-import { test, expect } from '@playwright/experimental-ct-angular';
-import { VBoxComponent } from './vbox.component';
+import { test, expect } from '@jscutlery/playwright-ct-angular';
+import { VBoxComponent, VBoxProps } from './vbox.component';
+import { InteractionContract } from '@origo/core';
 import AxeBuilder from '@axe-core/playwright';
 
 test.describe('VBoxComponent Accessibility', () => {
@@ -9,11 +10,23 @@ test.describe('VBoxComponent Accessibility', () => {
   }) => {
     await mount(VBoxComponent, {
       props: {
-        contract: { id: '1', type: 'vbox', props: { gap: '10px' } } as never,
+        contract: {
+          id: 'test-id',
+          type: 'vbox',
+          props: {},
+        } as InteractionContract<VBoxProps>,
       },
     });
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules([
+        'document-title',
+        'html-has-lang',
+        'landmark-one-main',
+        'page-has-heading-one',
+        'region',
+      ])
+      .analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
 });

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

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { isDevMode } from '@angular/core';
 
 export interface MetadataSource {

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

@@ -20,3 +20,4 @@ export * from './components/primitives/card/card.component';
 export * from './components/primitives/sidebar/sidebar.component';
 export * from './components/primitives/tabs/tabs.component';
 export * from './components/primitives/breadcrumbs/breadcrumbs.component';
+export * from './adapters/web/experience-adapter.service';

package/packages/angular-renderer/src/lib/primitives.provider.ts

@@ -1,4 +1,4 @@
-import { EnvironmentProviders, makeEnvironmentProviders, Type } from '@angular/core';
+import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 import { RENDERER_REGISTRY } from './renderer.tokens';
 import { SelectComponent } from '../components/primitives/select/select.component';
 import { CheckboxComponent } from '../components/primitives/checkbox/checkbox.component';
@@ -15,30 +15,38 @@ import { TabsComponent } from '../components/primitives/tabs/tabs.component';
 import { BreadcrumbsComponent } from '../components/primitives/breadcrumbs/breadcrumbs.component';
 import { SwitchComponent } from '../components/primitives/switch/switch.component';
 import { ChipComponent } from '../components/primitives/chip/chip.component';
+import { TextInputComponent } from '../components/primitives/text-input/text-input.component';
+import { ButtonComponent } from '../components/primitives/button/button.component';
+import { VBoxComponent } from '../components/primitives/vbox/vbox.component';
+
 export function provideOrigo9Primitives(): EnvironmentProviders {
+  const registryMap = new Map<string, unknown>([
+    ['Select', SelectComponent],
+    ['Checkbox', CheckboxComponent],
+    ['RadioGroup', RadioGroupComponent],
+    ['Textarea', TextareaComponent],
+    ['HBox', HBoxComponent],
+    ['Label', LabelComponent],
+    ['FormField', FormFieldComponent],
+    ['DataGrid', DataGridComponent],
+    ['List', ListComponent],
+    ['Card', CardComponent],
+    ['Sidebar', SidebarComponent],
+    ['Tabs', TabsComponent],
+    ['Breadcrumbs', BreadcrumbsComponent],
+    ['Navigation', SidebarComponent],
+    ['Switch', SwitchComponent],
+    ['Chip', ChipComponent],
+    ['TextInput', TextInputComponent],
+    ['Button', ButtonComponent],
+    ['VBox', VBoxComponent],
+    ['vbox', VBoxComponent], // For backward compatibility with 'vbox' in preview-root
+  ]);
+
   return makeEnvironmentProviders([
     {
       provide: RENDERER_REGISTRY,
-      useFactory: (m: Map<string, Type<unknown>>) => {
-        m.set('Select', SelectComponent);
-        m.set('Checkbox', CheckboxComponent);
-        m.set('RadioGroup', RadioGroupComponent);
-        m.set('Textarea', TextareaComponent);
-        m.set('HBox', HBoxComponent);
-        m.set('Label', LabelComponent);
-        m.set('FormField', FormFieldComponent);
-        m.set('DataGrid', DataGridComponent);
-        m.set('List', ListComponent);
-        m.set('Card', CardComponent);
-        m.set('Sidebar', SidebarComponent);
-        m.set('Tabs', TabsComponent);
-        m.set('Breadcrumbs', BreadcrumbsComponent);
-        m.set('Navigation', SidebarComponent);
-        m.set('Switch', SwitchComponent);
-        m.set('Chip', ChipComponent);
-        return m;
-      },
-      deps: [RENDERER_REGISTRY],
+      useValue: registryMap,
     },
   ]);
 }

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.39 (2026-09-29)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
+## 0.0.38 (2026-09-28)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.37 (2026-09-24)
 
 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.37",
+  "version": "0.0.39",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origo/core": "0.0.37",
+    "@origo/core": "0.0.39",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.39 (2026-09-29)
+
+### 🚀 Features
+
+- add GitHub Actions release workflow and package configurations for core and angular-renderer ([d80abc7](https://github.com/OrigoStudio/origo-design/commit/d80abc7))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.38 (2026-09-28)
+
+This was a version bump only for core to align it with other projects, there were no code changes.
+
 ## 0.0.37 (2026-09-24)
 
 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,7 +1,7 @@
 {
   "name": "@origo/core",
-  "version": "0.0.37",
-  "private": true,
+  "version": "0.0.39",
+  "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",

package/packages/design-tokens/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.39 (2026-09-29)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
+## 0.0.38 (2026-09-28)
+
+This was a version bump only for design-tokens to align it with other projects, there were no code changes.
+
 ## 0.0.37 (2026-09-24)
 
 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.37",
+  "version": "0.0.39",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.0.39 (2026-09-29)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
+## 0.0.38 (2026-09-28)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
 ## 0.0.37 (2026-09-24)
 
 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/deps___vitest_vm__/_metadata.json

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

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":186.03909399999975,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":180.89486299999953,"failed":false}]]}

package/packages/devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origo/devtools",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "type": "module",
   "dependencies": {
     "@origo/core": "0.0.30",

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.0.39 (2026-09-29)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
+## 0.0.38 (2026-09-28)
+
+### 🚀 Features
+
+- integrate Epic 9 primitives into playground application config and preview root component ([9775c0b](https://github.com/OrigoStudio/origo-design/commit/9775c0b))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.37 (2026-09-24)
 
 This was a version bump only for playground to align it with other projects, there were no code changes.

package/packages/playground/netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  command = "npx nx build playground"
+  publish = "../../dist/packages/playground/browser"
+
+[build.environment]
+  NODE_VERSION = "20"

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

@@ -1,8 +1,8 @@
 {
-  "hash": "2e658804",
+  "hash": "94abad82",
   "configHash": "1e17074a",
-  "lockfileHash": "9e4a8fc3",
-  "browserHash": "bdfc56e5",
+  "lockfileHash": "a351d80c",
+  "browserHash": "0f2883ef",
   "optimized": {},
   "chunks": {}
 }

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

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":4351.962877999998,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":758.8180159999974,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":46.5824649999995,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":146.99058499999956,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":209.5323270000008,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":184.9373110000015,"failed":false}],[":src/app/app.component.spec.ts",{"duration":183.36756700000115,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":4081.863498999999,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":512.2351859999981,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":50.38799400000062,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":123.91644499999893,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":240.91410800000085,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":178.30596200000218,"failed":false}],[":src/app/app.component.spec.ts",{"duration":193.94169600000168,"failed":false}]]}

package/packages/playground/package.json

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

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

@@ -3,7 +3,12 @@ import {
   provideBrowserGlobalErrorListeners,
   provideZonelessChangeDetection,
 } from '@angular/core';
+import { provideOrigo9Primitives } from '@origo/angular-renderer';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners(), provideZonelessChangeDetection()],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideOrigo9Primitives(),
+  ],
 };

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

@@ -1,18 +1,14 @@
-import { Component, HostListener, signal, computed } from '@angular/core';
+import { Component, HostListener, signal, computed, inject } from '@angular/core';
 import { CanonicalAST, ASTNode } from '@origo/core';
-import { CommonModule, JsonPipe } from '@angular/common';
-import { OrigoRendererComponent } from '@origo/angular-renderer';
+import { CommonModule } from '@angular/common';
+import { OrigoRendererComponent, WebExperienceAdapterService } from '@origo/angular-renderer';
 
 @Component({
   selector: 'origo-root',
   standalone: true,
-  imports: [CommonModule, JsonPipe, OrigoRendererComponent],
+  imports: [CommonModule, OrigoRendererComponent],
   template: `
     @if (ast(); as validAst) {
-      <div class="debug-ast">
-        <h3>Compiled AST (No UI Primitives Registered Yet)</h3>
-        <pre>{{ validAst | json }}</pre>
-      </div>
       @if (uiNode(); as node) {
         <origo-renderer [node]="node" />
       }
@@ -24,14 +20,179 @@ import { OrigoRendererComponent } from '@origo/angular-renderer';
 })
 export class PreviewRootComponent {
   public ast = signal<CanonicalAST | null>(null);
+  private experience = inject(WebExperienceAdapterService);
 
   public uiNode = computed<ASTNode | null>(() => {
     const data = this.ast();
-    if (!data) return null;
+    if (!data || !data.domains || data.domains.length === 0) return null;
+
+    const domain = data.domains[0];
+    const entities = domain.entities || [];
+    const fields = entities[0]?.fields || [];
+
+    const activeOutcome =
+      (this.experience.getState('main-sidebar', 'activeOutcome') as string) || 'home';
+    const activeTab = (this.experience.getState('tabs', 'activeTab') as string) || 'overview';
+
+    // Create a showcase UI AST that uses Epic 9 primitives to visualize the BADL Domain
     return {
-      id: 'root-vbox',
-      type: 'vbox',
-      children: [],
+      id: 'root-hbox',
+      type: 'HBox',
+      props: { gap: '0', alignment: 'stretch' },
+      children: [
+        {
+          id: 'main-sidebar',
+          type: 'Sidebar',
+          props: {
+            'aria-label': 'Main Navigation',
+            activeOutcome: activeOutcome,
+            items: [
+              { key: 'nav-1', label: domain.name || 'Domain', outcomeRef: 'home' },
+              { key: 'nav-2', label: 'Entities', outcomeRef: 'entities' },
+              { key: 'nav-3', label: 'Capabilities', outcomeRef: 'capabilities' },
+            ],
+          },
+        },
+        {
+          id: 'content-vbox',
+          type: 'vbox',
+          props: { padding: '20px', gap: '20px', flex: 1 },
+          children: [
+            {
+              id: 'breadcrumbs',
+              type: 'Breadcrumbs',
+              props: {
+                items: [
+                  { label: 'Home', outcomeRef: 'home' },
+                  { label: domain.domain || 'Domain', outcomeRef: 'domain' },
+                ],
+              },
+            },
+            {
+              id: 'tabs',
+              type: 'Tabs',
+              props: {
+                activeTab: activeTab,
+                tabs: [
+                  { key: 'overview', label: 'Overview' },
+                  { key: 'settings', label: 'Settings' },
+                ],
+              },
+            },
+            {
+              id: 'entity-grid',
+              type: 'DataGrid',
+              props: {
+                'aria-label': 'Entities Grid',
+                columns: [
+                  { key: 'name', label: 'Name' },
+                  { key: 'type', label: 'Type' },
+                  { key: 'label', label: 'Label' },
+                ],
+                rows: fields.map(f => ({ name: f.name, type: f.type, label: f.label || '-' })),
+              },
+            },
+            {
+              id: 'entity-card',
+              type: 'Card',
+              props: {
+                title: 'Domain Configuration',
+                subtitle: 'Manage core settings for this domain',
+              },
+            },
+            {
+              id: 'form-vbox',
+              type: 'vbox',
+              props: { gap: '15px' },
+              children: [
+                {
+                  id: 'form-hbox',
+                  type: 'HBox',
+                  props: { gap: '15px' },
+                  children: [
+                    {
+                      id: 'ff-status',
+                      type: 'FormField',
+                      props: { label: 'Status' },
+                      children: [{ id: 'switch-status', type: 'Switch', props: { checked: true } }],
+                    },
+                    {
+                      id: 'ff-version',
+                      type: 'FormField',
+                      props: { label: 'Version' },
+                      children: [
+                        {
+                          id: 'chip-version',
+                          type: 'Chip',
+                          props: { text: domain.version || '1.0' },
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  id: 'ff-desc',
+                  type: 'FormField',
+                  props: { label: 'Description' },
+                  children: [
+                    {
+                      id: 'textarea-desc',
+                      type: 'Textarea',
+                      props: { placeholder: 'Enter description' },
+                    },
+                  ],
+                },
+                {
+                  id: 'ff-type',
+                  type: 'FormField',
+                  props: { label: 'Type' },
+                  children: [
+                    {
+                      id: 'select-type',
+                      type: 'Select',
+                      props: {
+                        options: [
+                          { value: 'core', label: 'Core' },
+                          { value: 'plugin', label: 'Plugin' },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: 'ff-radio',
+                  type: 'FormField',
+                  props: { label: 'Environment' },
+                  children: [
+                    {
+                      id: 'radio-env',
+                      type: 'RadioGroup',
+                      props: {
+                        options: [
+                          { value: 'dev', label: 'Development' },
+                          { value: 'prod', label: 'Production' },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                {
+                  id: 'ff-check',
+                  type: 'FormField',
+                  props: { label: 'Enable Validation' },
+                  children: [
+                    {
+                      id: 'check-val',
+                      type: 'Checkbox',
+                      props: { checked: true, label: 'Strict mode' },
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
     };
   });