@origostudio/origo-design 0.0.48 → 0.0.49

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

@@ -14,12 +14,22 @@ import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface TextInputProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   value?: string;
   placeholder?: string;
   disabled?: boolean;
   readonly?: boolean;
   'aria-label'?: string;
   'aria-describedby'?: string;
+  variant?: 'outlined' | 'filled' | 'text';
+  fluid?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
+  type?: string;
 }
 
 @Component({
@@ -31,15 +41,29 @@ export interface TextInputProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-text-input]': 'true',
-    '[attr.data-testid]': 'contract().id ?? ""',
+    '[attr.data-testid]': 'contract().id',
+    '[class.origo-text-input--fluid]': 'computedFluid()',
+    '[class.origo-text-input--outlined]': 'computedVariant() === "outlined"',
+    '[class.origo-text-input--filled]': 'computedVariant() === "filled"',
+    '[class.origo-text-input--text]': 'computedVariant() === "text"',
   },
 })
 export class TextInputComponent implements OrigoAdapter<TextInputProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     value: 'string',
     placeholder: 'string',
     disabled: 'boolean',
     readonly: 'boolean',
+    variant: 'string',
+    fluid: 'boolean',
+    required: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
+    type: 'string',
   };
   static readonly strictContract = false;
 
@@ -62,6 +86,14 @@ export class TextInputComponent implements OrigoAdapter<TextInputProps> {
       : undefined;
   });
 
+  computedVariant = computed(() => this.contract().props?.variant ?? 'outlined');
+  computedFluid = computed(() => !!this.contract().props?.fluid);
+  computedRequired = computed(() => !!this.contract().props?.required);
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedErrorText = computed(() => this.contract().props?.errorText ?? '');
+  computedHelpText = computed(() => this.contract().props?.helpText ?? '');
+  computedType = computed(() => this.contract().props?.type ?? 'text');
+
   private experienceAdapter = inject(WebExperienceAdapterService);
 
   constructor() {
@@ -75,7 +107,7 @@ export class TextInputComponent implements OrigoAdapter<TextInputProps> {
 
   onInput(event: Event) {
     const target = event.target as HTMLInputElement | null;
-    if (!target) return;
+    if (!target || this.computedDisabled() || this.computedReadonly()) return;
 
     const rawValue = target.value;
     const sanitizedValue = String(rawValue);
@@ -87,4 +119,18 @@ export class TextInputComponent implements OrigoAdapter<TextInputProps> {
     this.value.set(sanitizedValue);
     this.experienceAdapter.updateState(this.contract().id, 'value', sanitizedValue);
   }
+
+  onPaste(event: ClipboardEvent) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    event.preventDefault();
+    const plain = event.clipboardData?.getData('text/plain') ?? '';
+    const target = event.target as HTMLInputElement | null;
+    if (!target) return;
+    const start = target.selectionStart ?? target.value.length;
+    const end = target.selectionEnd ?? target.value.length;
+    const newValue = target.value.slice(0, start) + plain + target.value.slice(end);
+    target.value = newValue;
+    this.value.set(newValue);
+    this.experienceAdapter.updateState(this.contract().id, 'value', newValue);
+  }
 }

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

@@ -1,12 +1,22 @@
-<textarea
-  [id]="contract().id"
-  [disabled]="computedDisabled()"
-  [readonly]="computedReadonly()"
-  [required]="computedRequired()"
-  [attr.placeholder]="computedPlaceholder()"
-  [attr.rows]="computedRows()"
-  [attr.aria-label]="computedAriaLabel()"
-  [attr.aria-describedby]="computedAriaDescribedBy()"
-  (input)="onInput($event)"
-  [value]="value()"
-></textarea>
+<div class="origo-textarea__wrapper">
+  <textarea
+    [id]="contract().id"
+    [disabled]="computedDisabled()"
+    [readonly]="computedReadonly()"
+    [required]="computedRequired()"
+    [attr.placeholder]="computedPlaceholder()"
+    [attr.rows]="computedRows()"
+    [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
+    [attr.aria-invalid]="computedInvalid() ? 'true' : null"
+    (input)="onInput($event)"
+    (paste)="onPaste($event)"
+    [value]="value()"
+  ></textarea>
+</div>
+@if (computedErrorText()) {
+  <div class="origo-textarea__error">{{ computedErrorText() }}</div>
+}
+@if (computedHelpText()) {
+  <div class="origo-textarea__help">{{ computedHelpText() }}</div>
+}

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

@@ -1,31 +1,69 @@
 :host {
   display: block;
 }
-
-textarea {
+:host(.origo-textarea--fluid) {
   display: block;
   width: 100%;
-  font-family: var(--origo-typography-input-font-family, inherit);
-  font-size: var(--origo-typography-input-font-size, 1rem);
-  color: var(--origo-color-text-primary, #333);
-  background-color: var(--origo-color-surface-background, #fff);
-  border: 1px solid var(--origo-color-border-default, #ccc);
-  border-radius: var(--origo-radius-sm, 4px);
-  padding: var(--origo-spacing-container-padding, 8px);
+}
+.origo-textarea__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+textarea {
   box-sizing: border-box;
+  width: 100%;
   resize: vertical;
-
-  &:focus {
-    outline: 2px solid var(--origo-color-focus, #005fcc);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: var(--origo-opacity-disabled, 0.5);
-    cursor: not-allowed;
-  }
-
-  &[readonly] {
-    background-color: var(--origo-color-surface-readonly, #f9f9f9);
-  }
+  background-color: var(--origo-color-surface-background);
+  color: var(--origo-color-text-primary);
+  padding: var(--origo-spacing-container-padding);
+  border: var(--origo-border-width-default) solid var(--origo-color-border-default);
+  border-radius: var(--origo-radius-sm);
+  box-shadow: var(--origo-shadow-sm);
+  font-family: var(--origo-typography-input-font-family);
+  font-size: var(--origo-typography-input-font-size);
+  font-weight: var(--origo-typography-input-font-weight);
+  line-height: var(--origo-typography-input-line-height);
+  transition: all var(--origo-duration-fast) ease-in-out;
+}
+:host(.origo-textarea--filled) textarea {
+  background-color: var(--origo-color-surface-subtle);
+  border: none;
+}
+:host(.origo-textarea--text) textarea {
+  background-color: transparent;
+  border: none;
+}
+textarea::placeholder {
+  color: var(--origo-color-text-muted);
+}
+textarea:hover:not(:disabled):not([readonly]) {
+  border-color: var(--origo-color-border-hover);
+}
+textarea:active:not(:disabled):not([readonly]) {
+  border-color: var(--origo-color-border-active);
+}
+textarea:focus,
+textarea:focus-visible {
+  outline: var(--origo-border-width-thick) solid var(--origo-color-focus);
+  outline-offset: var(--origo-border-offset-negative);
+  border-color: var(--origo-color-focus);
+}
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: var(--origo-opacity-disabled);
+  background-color: var(--origo-color-surface-disabled);
+  color: var(--origo-color-text-disabled);
+}
+textarea[readonly] {
+  background-color: var(--origo-color-surface-readonly);
+}
+.origo-textarea__error {
+  color: var(--origo-color-text-danger);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
+}
+.origo-textarea__help {
+  color: var(--origo-color-text-muted);
+  font-size: var(--origo-typography-caption-font-size);
+  margin-top: var(--origo-spacing-xs);
 }

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

@@ -9,13 +9,19 @@ import {
   effect,
   untracked,
   SecurityContext,
+  PLATFORM_ID,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origostudio/core';
+
+import { isPlatformBrowser } from '@angular/common';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
 
 export interface TextareaProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   value?: string;
   placeholder?: string;
   rows?: number;
@@ -24,6 +30,12 @@ export interface TextareaProps {
   'aria-label'?: string;
   'aria-describedby'?: string;
   required?: boolean;
+  variant?: 'outlined' | 'filled' | 'text';
+  fluid?: boolean;
+  invalid?: boolean;
+  errorText?: string;
+  helpText?: string;
+  autoResize?: boolean;
 }
 
 @Component({
@@ -36,16 +48,29 @@ export interface TextareaProps {
   host: {
     '[class.origo-textarea]': 'true',
     '[attr.data-testid]': 'contract().id',
+    '[class.origo-textarea--fluid]': 'computedFluid()',
+    '[class.origo-textarea--outlined]': 'computedVariant() === "outlined"',
+    '[class.origo-textarea--filled]': 'computedVariant() === "filled"',
+    '[class.origo-textarea--text]': 'computedVariant() === "text"',
   },
 })
 export class TextareaComponent implements OrigoAdapter<TextareaProps> {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     value: 'string',
     placeholder: 'string',
     rows: 'number',
     disabled: 'boolean',
     readonly: 'boolean',
     required: 'boolean',
+    variant: 'string',
+    fluid: 'boolean',
+    invalid: 'boolean',
+    errorText: 'string',
+    helpText: 'string',
+    autoResize: 'boolean',
   };
   static readonly strictContract = false;
 
@@ -69,8 +94,16 @@ export class TextareaComponent implements OrigoAdapter<TextareaProps> {
     return desc !== undefined && desc !== null ? String(desc) : undefined;
   });
 
+  computedVariant = computed(() => this.contract().props?.variant ?? 'outlined');
+  computedFluid = computed(() => !!this.contract().props?.fluid);
+  computedInvalid = computed(() => !!this.contract().props?.invalid);
+  computedErrorText = computed(() => this.contract().props?.errorText ?? '');
+  computedHelpText = computed(() => this.contract().props?.helpText ?? '');
+  computedAutoResize = computed(() => !!this.contract().props?.autoResize);
+
   private experienceAdapter = inject(WebExperienceAdapterService);
   private sanitizer = inject(DomSanitizer);
+  private platformId = inject(PLATFORM_ID);
 
   constructor() {
     effect(() => {
@@ -98,5 +131,30 @@ export class TextareaComponent implements OrigoAdapter<TextareaProps> {
 
     this.value.set(sanitizedValue);
     this.experienceAdapter.updateState(this.contract().id, 'value', sanitizedValue);
+
+    if (this.computedAutoResize() && isPlatformBrowser(this.platformId)) {
+      target.style.height = 'auto';
+      target.style.height = `${target.scrollHeight}px`;
+    }
+  }
+
+  onPaste(event: ClipboardEvent) {
+    if (this.computedDisabled() || this.computedReadonly()) return;
+    event.preventDefault();
+    const plain = event.clipboardData?.getData('text/plain') ?? '';
+    const target = event.target as HTMLTextAreaElement | null;
+    if (!target) return;
+    const start = target.selectionStart ?? target.value.length;
+    const end = target.selectionEnd ?? target.value.length;
+    const newValue = target.value.slice(0, start) + plain + target.value.slice(end);
+
+    target.value = newValue;
+    this.value.set(newValue);
+    this.experienceAdapter.updateState(this.contract().id, 'value', newValue);
+
+    if (this.computedAutoResize() && isPlatformBrowser(this.platformId)) {
+      target.style.height = 'auto';
+      target.style.height = `${target.scrollHeight}px`;
+    }
   }
 }

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

@@ -11,6 +11,9 @@ import { InteractionContract } from '@origostudio/core';
 import { OrigoAdapter, ContainerComponent } from '../../../adapters/web/adapter';
 
 export interface VBoxProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
   gap?: number | string;
   alignment?: 'start' | 'center' | 'end' | 'stretch';
   padding?: number | string;
@@ -38,6 +41,9 @@ export interface VBoxProps {
 })
 export class VBoxComponent implements OrigoAdapter<VBoxProps>, ContainerComponent {
   static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
     gap: 'string',
     alignment: 'string',
     padding: 'string',

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

@@ -24,3 +24,4 @@ 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';
+export * from './components/primitives/input-number/input-number.component';

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

@@ -21,6 +21,7 @@ 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';
+import { InputNumberComponent } from '../components/primitives/input-number/input-number.component';
 
 export function provideOrigo9Primitives(): EnvironmentProviders {
   const registryMap = new Map<string, unknown>([
@@ -46,6 +47,7 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
     ['TextInput', TextInputComponent],
     ['Button', ButtonComponent],
     ['VBox', VBoxComponent],
+    ['InputNumber', InputNumberComponent],
     ['vbox', VBoxComponent], // For backward compatibility with 'vbox' in preview-root
   ]);
 

package/packages/cli/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.49 (2026-10-08)
+
+This was a version bump only for cli to align it with other projects, there were no code changes.
+
 ## 0.0.48 (2026-10-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.48",
+  "version": "0.0.49",
   "private": false,
   "type": "commonjs",
   "main": "./src/index.js",
@@ -9,7 +9,7 @@
     "origo": "./src/main.js"
   },
   "dependencies": {
-    "@origostudio/core": "0.0.48",
+    "@origostudio/core": "0.0.49",
     "commander": "^15.0.0",
     "tslib": "^2.3.0"
   },

package/packages/core/CHANGELOG.md

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

package/packages/design-tokens/CHANGELOG.md

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

package/packages/devtools/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.49 (2026-10-08)
+
+This was a version bump only for devtools to align it with other projects, there were no code changes.
+
 ## 0.0.48 (2026-10-07)
 
 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":175.88274900000033,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/devtools-panel/app.component.spec.ts",{"duration":159.0430180000003,"failed":false}]]}

package/packages/devtools/package.json

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

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.49 (2026-10-08)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
 ## 0.0.48 (2026-10-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/results.json

@@ -1 +1 @@
-{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":3739.1939329999987,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":464.2565289999984,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":428.31811200000084,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":13.936109000002034,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":86.00780300000042,"failed":false}],[":src/app/app.component.spec.ts",{"duration":269.9306109999998,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":161.74670799999876,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/editor/badl-editor.component.spec.ts",{"duration":355.58316600000035,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":3910.8276769999975,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":552.2895629999985,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":23.031402000000526,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":53.45418900000004,"failed":false}],[":src/app/app.component.spec.ts",{"duration":232.5201330000018,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":124.97693900000013,"failed":false}]]}

package/packages/playground/package.json

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