@origostudio/origo-design 0.0.52 → 0.0.53

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

@@ -45,8 +45,8 @@ const contractSchema: Record<
 };
 // We will modify the schema slightly to avoid dropping columns/gap
 const finalSchema = { ...contractSchema };
-delete (finalSchema as any).columns;
-delete (finalSchema as any).gap;
+delete (finalSchema as Record<string, unknown>)['columns'];
+delete (finalSchema as Record<string, unknown>)['gap'];
 
 @Component({
   selector: 'origo-grid',
@@ -66,8 +66,9 @@ export class GridComponent implements OrigoAdapter<GridProps>, IContainerCompone
   protected props = computed(() => {
     const p = coerceContractProps<GridProps>(this.contract().props, finalSchema);
     const original = this.contract().props || {};
-    if ('columns' in original) p.columns = original.columns as any;
-    if ('gap' in original) p.gap = original.gap as any;
+    if ('columns' in original)
+      p.columns = original.columns as string | number | Record<string, number>;
+    if ('gap' in original) p.gap = original.gap as string | number;
     return p;
   });
 
@@ -80,7 +81,7 @@ export class GridComponent implements OrigoAdapter<GridProps>, IContainerCompone
       return cols;
     }
     if (typeof cols === 'object' && cols !== null) {
-      const base = (cols as any)['xs'] || 1;
+      const base = (cols as Record<string, number>)['xs'] || 1;
       return `repeat(${base}, minmax(0, 1fr))`;
     }
     return 'repeat(1, minmax(0, 1fr))';

package/packages/angular-renderer/src/components/primitives/rich-text-editor/rich-text-editor.component.html

@@ -0,0 +1,23 @@
+<div class="origo-rich-text-editor__wrapper" [class.origo-rich-text-editor--disabled]="disabled">
+  <div class="origo-rich-text-editor__toolbar" *ngIf="computedToolbar().length > 0">
+    <button
+      *ngFor="let btn of computedToolbar()"
+      (mousedown)="$event.preventDefault()"
+      (click)="execCommand(btn)"
+      [disabled]="disabled"
+      type="button"
+      class="origo-rich-text-editor__toolbar-btn"
+    >
+      {{ btn }}
+    </button>
+  </div>
+  <div
+    #contentEl
+    class="origo-rich-text-editor__content"
+    [attr.contenteditable]="!disabled"
+    (input)="onInput($event)"
+    (focus)="onFocus($event)"
+    (blur)="onBlur($event)"
+  ></div>
+  <ng-container #vc></ng-container>
+</div>

package/packages/angular-renderer/src/components/primitives/rich-text-editor/rich-text-editor.component.scss

@@ -0,0 +1,33 @@
+:host {
+  display: block;
+}
+
+.origo-rich-text-editor__wrapper {
+  border: 1px solid var(--origo-color-border-default);
+  border-radius: var(--origo-shape-border-radius-medium);
+  background-color: var(--origo-color-surface-default);
+  display: flex;
+  flex-direction: column;
+}
+
+.origo-rich-text-editor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--origo-spacing-small);
+  padding-block: var(--origo-spacing-small);
+  padding-inline: var(--origo-spacing-small);
+  border-block-end: 1px solid var(--origo-color-border-default);
+  background-color: var(--origo-color-surface-subtle);
+}
+
+.origo-rich-text-editor__content {
+  padding-block: var(--origo-spacing-medium);
+  padding-inline: var(--origo-spacing-medium);
+  min-height: 120px;
+  outline: none;
+}
+
+.origo-rich-text-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}

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

@@ -0,0 +1,165 @@
+import {
+  Component,
+  input,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  forwardRef,
+  viewChild,
+  ViewContainerRef,
+  output,
+  computed,
+  inject,
+  ElementRef,
+  SecurityContext,
+} from '@angular/core';
+import { InteractionContract } from '@origostudio/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+export interface RichTextEditorProps {
+  permissions?: Record<string, string>;
+  rules?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
+  toolbar?: string[];
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-rich-text-editor',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './rich-text-editor.component.html',
+  styleUrls: ['./rich-text-editor.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RichTextEditorComponent),
+      multi: true,
+    },
+  ],
+  host: {
+    '[class.origo-rich-text-editor]': 'true',
+    '[attr.data-testid]': 'contract().id',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
+  },
+})
+export class RichTextEditorComponent
+  implements OrigoAdapter<RichTextEditorProps>, ControlValueAccessor
+{
+  static readonly contractSchema = {
+    permissions: 'object',
+    rules: 'object',
+    metadata: 'object',
+    toolbar: 'object', // array of strings
+    'aria-label': 'string',
+    'aria-describedby': 'string',
+  } as const;
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<RichTextEditorProps>>();
+  vc = viewChild.required('vc', { read: ViewContainerRef });
+  contentRef = viewChild<ElementRef<HTMLElement>>('contentEl');
+
+  focus = output<FocusEvent>();
+  blur = output<FocusEvent>();
+
+  protected props = computed(() => {
+    return coerceContractProps<RichTextEditorProps>(
+      this.contract().props,
+      RichTextEditorComponent.contractSchema
+    );
+  });
+
+  computedToolbar = computed(() => {
+    const t = this.props()?.toolbar;
+    return Array.isArray(t) ? t : ['bold', 'italic', 'underline'];
+  });
+
+  computedAriaLabel = computed(() => this.props()?.['aria-label'] || null);
+  computedAriaDescribedBy = computed(() => this.props()?.['aria-describedby'] || null);
+
+  disabled = false;
+
+  private sanitizer = inject(DomSanitizer);
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onChange: (value: string) => void = () => {};
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private onTouched: () => void = () => {};
+
+  writeValue(obj: unknown): void {
+    const val = typeof obj === 'string' ? obj : '';
+    const safeHtml = this.sanitizer.sanitize(SecurityContext.HTML, val) || '';
+
+    const el = this.contentRef()?.nativeElement;
+    if (el && el.innerHTML !== safeHtml) {
+      el.innerHTML = safeHtml;
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onInput(event: Event) {
+    if (this.disabled) return;
+    const target = event.target as HTMLElement;
+    this.onChange(target.innerHTML);
+  }
+
+  onFocus(event: FocusEvent) {
+    this.focus.emit(event);
+  }
+
+  onBlur(event: FocusEvent) {
+    this.onTouched();
+    this.blur.emit(event);
+  }
+
+  execCommand(command: string) {
+    if (this.disabled) return;
+    const el = this.contentRef()?.nativeElement;
+    if (!el) return;
+
+    // Custom formatting engine to support Shadow DOM
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+
+    const range = selection.getRangeAt(0);
+    // Ensure the selection is within our contentEditable
+    if (!el.contains(range.commonAncestorContainer)) return;
+
+    const tagMap: Record<string, string> = {
+      bold: 'b',
+      italic: 'i',
+      underline: 'u',
+    };
+    const tag = tagMap[command];
+
+    if (tag) {
+      const newNode = document.createElement(tag);
+      try {
+        range.surroundContents(newNode);
+      } catch {
+        // Fallback for complex selections
+        newNode.appendChild(range.extractContents());
+        range.insertNode(newNode);
+      }
+      this.onChange(el.innerHTML);
+    }
+  }
+}

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

@@ -45,9 +45,9 @@ const contractSchema: Record<
 };
 
 const finalSchema = { ...contractSchema };
-delete (finalSchema as any).direction;
-delete (finalSchema as any).gap;
-delete (finalSchema as any).wrap;
+delete (finalSchema as Record<string, unknown>)['direction'];
+delete (finalSchema as Record<string, unknown>)['gap'];
+delete (finalSchema as Record<string, unknown>)['wrap'];
 
 @Component({
   selector: 'origo-stack',
@@ -67,9 +67,9 @@ export class StackComponent implements OrigoAdapter<StackProps>, IContainerCompo
   protected props = computed(() => {
     const p = coerceContractProps<StackProps>(this.contract().props, finalSchema);
     const original = this.contract().props || {};
-    if ('direction' in original) p.direction = original.direction as any;
-    if ('gap' in original) p.gap = original.gap as any;
-    if ('wrap' in original) p.wrap = original.wrap as any;
+    if ('direction' in original) p.direction = original.direction as StackProps['direction'];
+    if ('gap' in original) p.gap = original.gap as string | number;
+    if ('wrap' in original) p.wrap = original.wrap as boolean | 'wrap' | 'nowrap';
     return p;
   });
 

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

@@ -36,3 +36,6 @@ export * from './components/primitives/container/container.component';
 export * from './components/primitives/grid/grid.component';
 export * from './components/primitives/stack/stack.component';
 export * from './components/primitives/divider/divider.component';
+export * from './components/primitives/file-input/file-input.component';
+export * from './components/primitives/dropzone/dropzone.component';
+export * from './components/primitives/rich-text-editor/rich-text-editor.component';

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

@@ -32,6 +32,9 @@ import { ContainerComponent } from '../components/primitives/container/container
 import { GridComponent } from '../components/primitives/grid/grid.component';
 import { StackComponent } from '../components/primitives/stack/stack.component';
 import { DividerComponent } from '../components/primitives/divider/divider.component';
+import { FileInputComponent } from '../components/primitives/file-input/file-input.component';
+import { DropzoneComponent } from '../components/primitives/dropzone/dropzone.component';
+import { RichTextEditorComponent } from '../components/primitives/rich-text-editor/rich-text-editor.component';
 
 export function provideOrigo9Primitives(): EnvironmentProviders {
   const registryMap = new Map<string, unknown>([
@@ -68,6 +71,9 @@ export function provideOrigo9Primitives(): EnvironmentProviders {
     ['Grid', GridComponent],
     ['Stack', StackComponent],
     ['Divider', DividerComponent],
+    ['FileInput', FileInputComponent],
+    ['Dropzone', DropzoneComponent],
+    ['RichTextEditor', RichTextEditorComponent],
     ['vbox', VBoxComponent], // For backward compatibility with 'vbox' in preview-root
   ]);
 

package/packages/cli/CHANGELOG.md

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

package/packages/core/CHANGELOG.md

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

package/packages/design-tokens/CHANGELOG.md

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

package/packages/devtools/CHANGELOG.md

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

package/packages/devtools/package.json

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

package/packages/playground/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.53 (2026-10-09)
+
+This was a version bump only for playground to align it with other projects, there were no code changes.
+
 ## 0.0.52 (2026-10-09)
 
 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/editor/badl-editor.component.spec.ts",{"duration":491.2160299999996,"failed":false}],[":src/workers/compiler.worker.spec.ts",{"duration":5145.256712000002,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":462.3917999999976,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":23.204484999998385,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":104.07553299999927,"failed":false}],[":src/app/app.component.spec.ts",{"duration":398.93594400000075,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":227.64884000000166,"failed":false}]]}
+{"version":"4.1.11","results":[[":src/workers/compiler.worker.spec.ts",{"duration":5812.498847999999,"failed":false}],[":src/preview/preview-root.component.spec.ts",{"duration":457.88223500000095,"failed":false}],[":src/editor/badl-editor.component.spec.ts",{"duration":288.8890730000021,"failed":false}],[":src/editor/schema-registry.spec.ts",{"duration":35.12855900000068,"failed":false}],[":src/preview/preview.service.spec.ts",{"duration":95.56524999999965,"failed":false}],[":src/app/app.component.spec.ts",{"duration":425.4823429999997,"failed":false}],[":src/preview/preview-pane.component.spec.ts",{"duration":220.1293110000006,"failed":false}]]}

package/packages/playground/package.json

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