@openvcs/sdk 0.2.17-nightly.20260407.3 → 0.2.18-beta.8

package/lib/runtime/modal.d.ts

@@ -1,4 +1,4 @@
-import type { ModalButtonVariant, ModalContentAlign, ModalInputKind, ModalListRowDefinition, ModalSelectOptionDefinition, PluginModalDefinition } from '../types/modal.js';
+import type { ModalButtonVariant, ModalContentAlign, ModalInputKind, ModalListRowDefinition, ModalSelectOptionDefinition, PluginModalContentItem, PluginModalDefinition } from '../types/modal.js';
 /** Describes the options accepted by `ModalBuilder.button()`. */
 export interface ModalBuilderButtonOptions {
     /** Stores the optional tooltip text. */
@@ -50,6 +50,27 @@ export interface ModalBuilderListOptions {
     /** Stores the list rows. */
     items: ModalListRowDefinition[];
 }
+/** Describes the options accepted by `ModalBuilder.horizontalBox()`. */
+export interface ModalBuilderHorizontalBoxOptions {
+    /** Stores the spacing between children. */
+    gap?: string;
+    /** Stores the alignment hint for the main axis. */
+    align?: ModalContentAlign;
+    /** Stores whether children may wrap. */
+    wrap?: boolean;
+}
+/** Describes the options accepted by `ModalBuilder.verticalBox()`. */
+export interface ModalBuilderVerticalBoxOptions {
+    /** Stores the spacing between children. */
+    gap?: string;
+}
+/** Describes the options accepted by `ModalBuilder.grid()`. */
+export interface ModalBuilderGridOptions {
+    /** Stores the CSS grid column template. */
+    columns: string;
+    /** Stores the spacing between cells. */
+    gap?: string;
+}
 /** Builds a structured modal definition with a fluent class API. */
 export declare class ModalBuilder {
     private readonly definition;
@@ -59,6 +80,12 @@ export declare class ModalBuilder {
     text(content: string, options?: ModalBuilderTextOptions): this;
     /** Adds a separator to the modal body. */
     separator(): this;
+    /** Adds a horizontal box to the modal body. */
+    horizontalBox(content: PluginModalContentItem[], options?: ModalBuilderHorizontalBoxOptions): this;
+    /** Adds a vertical box to the modal body. */
+    verticalBox(content: PluginModalContentItem[], options?: ModalBuilderVerticalBoxOptions): this;
+    /** Adds a grid container to the modal body. */
+    grid(content: PluginModalContentItem[], options: ModalBuilderGridOptions): this;
     /** Adds a button to the modal body. */
     button(id: string, content: string, options?: ModalBuilderButtonOptions): this;
     /** Adds a text input to the modal body. */

package/lib/runtime/modal.js

@@ -28,6 +28,36 @@ class ModalBuilder {
         this.definition.content.push({ type: 'separator' });
         return this;
     }
+    /** Adds a horizontal box to the modal body. */
+    horizontalBox(content, options = {}) {
+        this.definition.content.push({
+            type: 'horizontal-box',
+            content: cloneContent(content),
+            ...(options.gap ? { gap: options.gap } : {}),
+            ...(options.align ? { align: options.align } : {}),
+            ...(options.wrap !== undefined ? { wrap: options.wrap } : {}),
+        });
+        return this;
+    }
+    /** Adds a vertical box to the modal body. */
+    verticalBox(content, options = {}) {
+        this.definition.content.push({
+            type: 'vertical-box',
+            content: cloneContent(content),
+            ...(options.gap ? { gap: options.gap } : {}),
+        });
+        return this;
+    }
+    /** Adds a grid container to the modal body. */
+    grid(content, options) {
+        this.definition.content.push({
+            type: 'grid',
+            content: cloneContent(content),
+            columns: String(options.columns || '').trim(),
+            ...(options.gap ? { gap: options.gap } : {}),
+        });
+        return this;
+    }
     /** Adds a button to the modal body. */
     button(id, content, options = {}) {
         this.definition.content.push({
@@ -83,7 +113,7 @@ class ModalBuilder {
     build() {
         return {
             title: this.definition.title,
-            content: this.definition.content.map((item) => ({ ...item })),
+            content: cloneContent(this.definition.content),
         };
     }
     /** Returns the serialized modal payload for a host request. */
@@ -92,3 +122,31 @@ class ModalBuilder {
     }
 }
 exports.ModalBuilder = ModalBuilder;
+/** Clones modal content recursively so nested containers stay isolated. */
+function cloneContent(content) {
+    return Array.isArray(content) ? content.map((item) => cloneItem(item)) : [];
+}
+/** Clones one modal content item recursively. */
+function cloneItem(item) {
+    if (!item || typeof item !== 'object')
+        return item;
+    if (item.type === 'horizontal-box') {
+        return {
+            ...item,
+            content: cloneContent(item.content),
+        };
+    }
+    if (item.type === 'vertical-box') {
+        return {
+            ...item,
+            content: cloneContent(item.content),
+        };
+    }
+    if (item.type === 'grid') {
+        return {
+            ...item,
+            content: cloneContent(item.content),
+        };
+    }
+    return { ...item };
+}

package/lib/types/modal.d.ts

@@ -35,6 +35,39 @@ export interface ModalSeparatorDefinition {
     /** Always stores `separator`. */
     type: 'separator';
 }
+/** Describes one horizontal box rendered inside a modal. */
+export interface ModalHorizontalBoxDefinition {
+    /** Always stores `horizontal-box`. */
+    type: 'horizontal-box';
+    /** Stores the ordered child content. */
+    content: PluginModalContentItem[];
+    /** Stores the optional spacing between children. */
+    gap?: string;
+    /** Stores the alignment hint along the main axis. */
+    align?: ModalContentAlign;
+    /** Stores whether children may wrap onto multiple rows. */
+    wrap?: boolean;
+}
+/** Describes one vertical box rendered inside a modal. */
+export interface ModalVerticalBoxDefinition {
+    /** Always stores `vertical-box`. */
+    type: 'vertical-box';
+    /** Stores the ordered child content. */
+    content: PluginModalContentItem[];
+    /** Stores the optional spacing between children. */
+    gap?: string;
+}
+/** Describes one grid rendered inside a modal. */
+export interface ModalGridDefinition {
+    /** Always stores `grid`. */
+    type: 'grid';
+    /** Stores the ordered child content. */
+    content: PluginModalContentItem[];
+    /** Stores the CSS grid column template. */
+    columns: string;
+    /** Stores the optional spacing between cells. */
+    gap?: string;
+}
 /** Describes one button rendered inside a modal body. */
 export interface ModalButtonItemDefinition extends ModalButtonDefinition {
     /** Always stores `button`. */
@@ -119,7 +152,7 @@ export interface ModalListDefinition {
     items: ModalListRowDefinition[];
 }
 /** Describes one plugin modal content item. */
-export type PluginModalContentItem = ModalTextDefinition | ModalSeparatorDefinition | ModalButtonItemDefinition | ModalInputDefinition | ModalSelectDefinition | ModalListDefinition;
+export type PluginModalContentItem = ModalTextDefinition | ModalSeparatorDefinition | ModalHorizontalBoxDefinition | ModalVerticalBoxDefinition | ModalGridDefinition | ModalButtonItemDefinition | ModalInputDefinition | ModalSelectDefinition | ModalListDefinition;
 /** Describes the structured payload used to render a plugin modal. */
 export interface PluginModalDefinition {
     /** Stores the modal title. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openvcs/sdk",
-  "version": "0.2.17-nightly.20260407.3",
+  "version": "0.2.18-beta.8",
   "description": "OpenVCS SDK CLI for plugin scaffolding and runtime asset builds",
   "license": "GPL-3.0-or-later",
   "homepage": "https://openvcs.app/",

package/src/lib/runtime/modal.ts

@@ -2,14 +2,13 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import type {
-  ModalButtonDefinition,
   ModalButtonVariant,
   ModalContentAlign,
-  ModalInputDefinition,
+  ModalGridDefinition,
   ModalInputKind,
-  ModalListDefinition,
+  ModalHorizontalBoxDefinition,
   ModalListRowDefinition,
-  ModalSelectDefinition,
+  ModalVerticalBoxDefinition,
   ModalSelectOptionDefinition,
   PluginModalContentItem,
   PluginModalDefinition,
@@ -71,6 +70,30 @@ export interface ModalBuilderListOptions {
   items: ModalListRowDefinition[];
 }
 
+/** Describes the options accepted by `ModalBuilder.horizontalBox()`. */
+export interface ModalBuilderHorizontalBoxOptions {
+  /** Stores the spacing between children. */
+  gap?: string;
+  /** Stores the alignment hint for the main axis. */
+  align?: ModalContentAlign;
+  /** Stores whether children may wrap. */
+  wrap?: boolean;
+}
+
+/** Describes the options accepted by `ModalBuilder.verticalBox()`. */
+export interface ModalBuilderVerticalBoxOptions {
+  /** Stores the spacing between children. */
+  gap?: string;
+}
+
+/** Describes the options accepted by `ModalBuilder.grid()`. */
+export interface ModalBuilderGridOptions {
+  /** Stores the CSS grid column template. */
+  columns: string;
+  /** Stores the spacing between cells. */
+  gap?: string;
+}
+
 /** Builds a structured modal definition with a fluent class API. */
 export class ModalBuilder {
   private readonly definition: PluginModalDefinition;
@@ -100,6 +123,39 @@ export class ModalBuilder {
     return this;
   }
 
+  /** Adds a horizontal box to the modal body. */
+  horizontalBox(content: PluginModalContentItem[], options: ModalBuilderHorizontalBoxOptions = {}): this {
+    this.definition.content.push({
+      type: 'horizontal-box',
+      content: cloneContent(content),
+      ...(options.gap ? { gap: options.gap } : {}),
+      ...(options.align ? { align: options.align } : {}),
+      ...(options.wrap !== undefined ? { wrap: options.wrap } : {}),
+    } as ModalHorizontalBoxDefinition);
+    return this;
+  }
+
+  /** Adds a vertical box to the modal body. */
+  verticalBox(content: PluginModalContentItem[], options: ModalBuilderVerticalBoxOptions = {}): this {
+    this.definition.content.push({
+      type: 'vertical-box',
+      content: cloneContent(content),
+      ...(options.gap ? { gap: options.gap } : {}),
+    } as ModalVerticalBoxDefinition);
+    return this;
+  }
+
+  /** Adds a grid container to the modal body. */
+  grid(content: PluginModalContentItem[], options: ModalBuilderGridOptions): this {
+    this.definition.content.push({
+      type: 'grid',
+      content: cloneContent(content),
+      columns: String(options.columns || '').trim(),
+      ...(options.gap ? { gap: options.gap } : {}),
+    } as ModalGridDefinition);
+    return this;
+  }
+
   /** Adds a button to the modal body. */
   button(id: string, content: string, options: ModalBuilderButtonOptions = {}): this {
     this.definition.content.push({
@@ -159,7 +215,7 @@ export class ModalBuilder {
   build(): PluginModalDefinition {
     return {
       title: this.definition.title,
-      content: this.definition.content.map((item) => ({ ...item })) as PluginModalContentItem[],
+      content: cloneContent(this.definition.content),
     };
   }
 
@@ -168,3 +224,36 @@ export class ModalBuilder {
     return this.build();
   }
 }
+
+/** Clones modal content recursively so nested containers stay isolated. */
+function cloneContent(content: PluginModalContentItem[]): PluginModalContentItem[] {
+  return Array.isArray(content) ? content.map((item) => cloneItem(item)) : [];
+}
+
+/** Clones one modal content item recursively. */
+function cloneItem(item: PluginModalContentItem): PluginModalContentItem {
+  if (!item || typeof item !== 'object') return item;
+
+  if (item.type === 'horizontal-box') {
+    return {
+      ...item,
+      content: cloneContent(item.content),
+    } as ModalHorizontalBoxDefinition;
+  }
+
+  if (item.type === 'vertical-box') {
+    return {
+      ...item,
+      content: cloneContent(item.content),
+    } as ModalVerticalBoxDefinition;
+  }
+
+  if (item.type === 'grid') {
+    return {
+      ...item,
+      content: cloneContent(item.content),
+    } as ModalGridDefinition;
+  }
+
+  return { ...item };
+}

package/src/lib/types/modal.ts

@@ -44,6 +44,42 @@ export interface ModalSeparatorDefinition {
   type: 'separator';
 }
 
+/** Describes one horizontal box rendered inside a modal. */
+export interface ModalHorizontalBoxDefinition {
+  /** Always stores `horizontal-box`. */
+  type: 'horizontal-box';
+  /** Stores the ordered child content. */
+  content: PluginModalContentItem[];
+  /** Stores the optional spacing between children. */
+  gap?: string;
+  /** Stores the alignment hint along the main axis. */
+  align?: ModalContentAlign;
+  /** Stores whether children may wrap onto multiple rows. */
+  wrap?: boolean;
+}
+
+/** Describes one vertical box rendered inside a modal. */
+export interface ModalVerticalBoxDefinition {
+  /** Always stores `vertical-box`. */
+  type: 'vertical-box';
+  /** Stores the ordered child content. */
+  content: PluginModalContentItem[];
+  /** Stores the optional spacing between children. */
+  gap?: string;
+}
+
+/** Describes one grid rendered inside a modal. */
+export interface ModalGridDefinition {
+  /** Always stores `grid`. */
+  type: 'grid';
+  /** Stores the ordered child content. */
+  content: PluginModalContentItem[];
+  /** Stores the CSS grid column template. */
+  columns: string;
+  /** Stores the optional spacing between cells. */
+  gap?: string;
+}
+
 /** Describes one button rendered inside a modal body. */
 export interface ModalButtonItemDefinition extends ModalButtonDefinition {
   /** Always stores `button`. */
@@ -138,6 +174,9 @@ export interface ModalListDefinition {
 export type PluginModalContentItem =
   | ModalTextDefinition
   | ModalSeparatorDefinition
+  | ModalHorizontalBoxDefinition
+  | ModalVerticalBoxDefinition
+  | ModalGridDefinition
   | ModalButtonItemDefinition
   | ModalInputDefinition
   | ModalSelectDefinition

package/test/modal.test.ts

@@ -10,14 +10,83 @@ describe('ModalBuilder', () => {
   it('builds a structured modal definition', () => {
     const modal = new ModalBuilder('Manage Submodules')
       .text('Hello, World!')
-      .button('new-button', 'Test button, push me!', { align: 'centered' })
+      .verticalBox([
+        {
+          type: 'input',
+          id: 'path',
+          label: 'Submodule Path',
+          placeholder: 'libs/example',
+        },
+        {
+          type: 'grid',
+          columns: 'minmax(0, 1fr) minmax(0, 1fr)',
+          content: [
+            {
+              type: 'input',
+              id: 'name',
+              label: 'Submodule Name',
+              placeholder: 'example',
+            },
+            {
+              type: 'input',
+              id: 'branch',
+              label: 'Branch (optional)',
+              placeholder: 'main',
+            },
+          ],
+        },
+      ])
+      .horizontalBox(
+        [
+          { type: 'button', id: 'new-button', content: 'Test button, push me!', align: 'centered' },
+          { type: 'button', id: 'secondary-button', content: 'Refresh' },
+        ],
+        { align: 'centered', wrap: true },
+      )
       .build();
 
     assert.deepStrictEqual(modal, {
       title: 'Manage Submodules',
       content: [
         { type: 'text', content: 'Hello, World!' },
-        { type: 'button', id: 'new-button', content: 'Test button, push me!', align: 'centered' },
+        {
+          type: 'vertical-box',
+          content: [
+            {
+              type: 'input',
+              id: 'path',
+              label: 'Submodule Path',
+              placeholder: 'libs/example',
+            },
+            {
+              type: 'grid',
+              columns: 'minmax(0, 1fr) minmax(0, 1fr)',
+              content: [
+                {
+                  type: 'input',
+                  id: 'name',
+                  label: 'Submodule Name',
+                  placeholder: 'example',
+                },
+                {
+                  type: 'input',
+                  id: 'branch',
+                  label: 'Branch (optional)',
+                  placeholder: 'main',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'horizontal-box',
+          align: 'centered',
+          wrap: true,
+          content: [
+            { type: 'button', id: 'new-button', content: 'Test button, push me!', align: 'centered' },
+            { type: 'button', id: 'secondary-button', content: 'Refresh' },
+          ],
+        },
       ],
     });
   });