@object-ui/components 0.3.0 → 0.5.0

package/src/renderers/form/switch.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { SwitchSchema } from '@object-ui/types';
 import { Switch, Label } from '../../ui';
@@ -25,6 +33,7 @@ ComponentRegistry.register('switch',
   );
   },
   {
+    namespace: 'ui',
     label: 'Switch',
     inputs: [
       { name: 'label', type: 'string', label: 'Label', required: true },

package/src/renderers/form/textarea.tsx

@@ -1,45 +1,76 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { TextareaSchema } from '@object-ui/types';
 import { Textarea, Label } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+const TextareaRenderer = ({ schema, className, onChange, value, ...props }: { schema: TextareaSchema; className?: string; onChange?: (val: any) => void; value?: any; [key: string]: any }) => {
+  // Handle change for both raw inputs and form-bound inputs
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (onChange) {
+      onChange(e.target.value);
+    }
+  };
+
+  // Extract designer-related props
+  const { 
+    'data-obj-id': dataObjId, 
+    'data-obj-type': dataObjType,
+    style, 
+    ...inputProps 
+  } = props;
 
-ComponentRegistry.register('textarea', 
-  ({ schema, className, ...props }: { schema: TextareaSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-      'data-obj-id': dataObjId, 
-      'data-obj-type': dataObjType,
-      style, 
-      ...inputProps 
-    } = props;
+  return (
+    <div 
+      className={cn("grid w-full gap-1.5", schema.wrapperClass)}
+      data-obj-id={dataObjId}
+      data-obj-type={dataObjType}
+      style={style}
+    >
+      {schema.label && <Label htmlFor={schema.id} className={cn(schema.required && "text-destructive after:content-['*'] after:ml-0.5")}>{schema.label}</Label>}
+      <Textarea 
+        id={schema.id} 
+        name={schema.name}
+        placeholder={schema.placeholder} 
+        className={className} 
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        required={schema.required}
+        rows={schema.rows}
+        value={value ?? schema.value ?? ''}
+        defaultValue={value === undefined ? schema.defaultValue : undefined}
+        onChange={handleChange}
+        {...inputProps} 
+      />
+    </div>
+  );
+};
 
-    return (
-      <div 
-        className={`grid w-full gap-1.5 ${schema.wrapperClass || ''}`}
-        data-obj-id={dataObjId}
-        data-obj-type={dataObjType}
-        style={style}
-      >
-        {schema.label && <Label htmlFor={schema.id}>{schema.label}</Label>}
-        <Textarea 
-          id={schema.id} 
-          placeholder={schema.placeholder} 
-          className={className} 
-          {...inputProps} 
-        />
-      </div>
-    );
-  },
+ComponentRegistry.register('textarea', TextareaRenderer,
   {
+    namespace: 'ui',
     label: 'Textarea',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'placeholder', type: 'string', label: 'Placeholder' },
+      { name: 'rows', type: 'number', label: 'Rows' },
+      { name: 'required', type: 'boolean', label: 'Required' },
+      { name: 'disabled', type: 'boolean', label: 'Disabled' },
       { name: 'id', type: 'string', label: 'ID', required: true }
     ],
     defaultProps: {
       label: 'Textarea label',
       placeholder: 'Enter text here...',
-      id: 'textarea-field' // Will be made unique by designer's ensureNodeIds
+      rows: 3,
+      id: 'textarea-field'
     }
   }
 );

package/src/renderers/form/toggle.tsx

@@ -1,6 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { ToggleSchema } from '@object-ui/types';
-import { Toggle, ToggleGroup, ToggleGroupItem } from '../../ui';
+import { Toggle } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('toggle', 
@@ -16,13 +24,14 @@ ComponentRegistry.register('toggle',
     </Toggle>
   ),
   {
+    namespace: 'ui',
     label: 'Toggle',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },
       { name: 'pressed', type: 'boolean', label: 'Pressed' },
       { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' },
       { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
-         { name: 'ariaLabel', type: 'string', label: 'Aria Label' }
+      { name: 'ariaLabel', type: 'string', label: 'Aria Label' }
     ],
     defaultProps: {
       label: 'Toggle',
@@ -31,46 +40,3 @@ ComponentRegistry.register('toggle',
     }
   }
 );
-
-ComponentRegistry.register('toggle-group', 
-  ({ schema, className, ...props }) => (
-    <ToggleGroup 
-      type={schema.groupType || 'single'} 
-      variant={schema.variant} 
-      size={schema.size} 
-      className={className}
-      {...props}
-    >
-      {schema.items?.map((item: any) => (
-        <ToggleGroupItem key={item.value} value={item.value} aria-label={item.label}>
-          {item.icon || item.label}
-        </ToggleGroupItem>
-      ))}
-    </ToggleGroup>
-  ),
-  {
-    label: 'Toggle Group',
-    inputs: [
-      { name: 'groupType', type: 'enum', enum: ['single', 'multiple'], defaultValue: 'single', label: 'Type' },
-       { name: 'variant', type: 'enum', enum: ['default', 'outline'], defaultValue: 'default', label: 'Variant' },
-      { name: 'size', type: 'enum', enum: ['default', 'sm', 'lg'], defaultValue: 'default', label: 'Size' },
-       { 
-        name: 'items', 
-        type: 'array', 
-        label: 'Items',
-        description: 'Array of {label, value, icon?} objects'
-      },
-      { name: 'className', type: 'string', label: 'CSS Class' }
-    ],
-    defaultProps: {
-      groupType: 'single',
-      variant: 'default',
-      size: 'default',
-      items: [
-        { label: 'A', value: 'a' },
-        { label: 'B', value: 'b' },
-        { label: 'C', value: 'c' }
-      ]
-    }
-  }
-);

package/src/renderers/index.ts

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './basic';
 import './form';
 import './layout';

package/src/renderers/layout/aspect-ratio.tsx

@@ -0,0 +1,51 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { AspectRatioSchema } from '@object-ui/types';
+import { AspectRatio } from '../../ui/aspect-ratio';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('aspect-ratio', 
+  ({ schema, ...props }: { schema: AspectRatioSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...aspectRatioProps
+    } = props;
+    
+    return (
+      <AspectRatio 
+        ratio={schema.ratio || 16 / 9}
+        className={schema.className} 
+        {...aspectRatioProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.image ? (
+          <img src={schema.image} alt={schema.alt || ''} className="rounded-md object-cover w-full h-full" />
+        ) : (
+          renderChildren(schema.children || schema.body)
+        )}
+      </AspectRatio>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Aspect Ratio',
+    inputs: [
+      { name: 'ratio', type: 'number', label: 'Ratio', defaultValue: 16/9 },
+      { name: 'image', type: 'string', label: 'Image URL' },
+      { name: 'alt', type: 'string', label: 'Alt Text' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      ratio: 16 / 9
+    }
+  }
+);

package/src/renderers/layout/card.tsx

@@ -1,6 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { CardSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
+import { renderChildren, cn } from '../../lib/utils';
 import {
   Card,
   CardHeader,
@@ -20,11 +28,18 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
         style, 
         ...cardProps 
     } = props;
+    
+    const isClickable = schema.clickable || !!props.onClick;
+    const isHoverable = schema.hoverable || isClickable;
 
     return (
     <Card 
         ref={ref}
-        className={className} 
+        className={cn(
+          className, 
+          isHoverable && "transition-colors hover:bg-muted/50",
+          isClickable && "cursor-pointer active:bg-muted"
+        )} 
         {...cardProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
@@ -46,6 +61,7 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
 ComponentRegistry.register('card', 
   CardRenderer,
   {
+    namespace: 'ui',
     label: 'Card',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/layout/container.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { ContainerSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -28,19 +36,19 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
       maxWidth === 'screen' && 'max-w-screen-2xl',
       // Centering
       centered && 'mx-auto',
-      // Padding
+      // Padding - Mobile-first responsive
       padding === 0 && 'p-0',
-      padding === 1 && 'p-1',
-      padding === 2 && 'p-2',
-      padding === 3 && 'p-3',
-      padding === 4 && 'p-4',
-      padding === 5 && 'p-5',
-      padding === 6 && 'p-6',
-      padding === 7 && 'p-7',
-      padding === 8 && 'p-8',
-      padding === 10 && 'p-10',
-      padding === 12 && 'p-12',
-      padding === 16 && 'p-16',
+      padding === 1 && 'p-0.5 sm:p-1',
+      padding === 2 && 'p-1 sm:p-2',
+      padding === 3 && 'p-2 sm:p-3',
+      padding === 4 && 'p-2 sm:p-3 md:p-4',
+      padding === 5 && 'p-3 sm:p-4 md:p-5',
+      padding === 6 && 'p-3 sm:p-4 md:p-6',
+      padding === 7 && 'p-4 sm:p-5 md:p-7',
+      padding === 8 && 'p-4 sm:p-6 md:p-8',
+      padding === 10 && 'p-5 sm:p-7 md:p-10',
+      padding === 12 && 'p-6 sm:p-8 md:p-12',
+      padding === 16 && 'p-8 sm:p-10 md:p-16',
       className
     );
 
@@ -69,6 +77,7 @@ const ContainerRenderer = forwardRef<HTMLDivElement, { schema: ContainerSchema;
 ComponentRegistry.register('container', 
   ContainerRenderer,
   {
+    namespace: 'ui',
     label: 'Container',
     inputs: [
       { 

package/src/renderers/layout/flex.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { FlexSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -31,16 +39,16 @@ ComponentRegistry.register('flex',
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 7 && 'gap-7',
-      gap === 8 && 'gap-8',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 7 && 'gap-4 sm:gap-5 md:gap-7',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
       // Wrap
       wrap && 'flex-wrap',
       className
@@ -68,6 +76,7 @@ ComponentRegistry.register('flex',
     );
   },
   {
+    namespace: 'ui',
     label: 'Flex Layout',
     inputs: [
       { 

package/src/renderers/layout/grid.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { GridSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -42,13 +50,27 @@ const GAPS: Record<number, string> = {
 ComponentRegistry.register('grid', 
   ({ schema, className, ...props }: { schema: GridSchema & { smColumns?: number, mdColumns?: number, lgColumns?: number, xlColumns?: number }; className?: string; [key: string]: any }) => {
     // Determine columns configuration
-    // Supports direct number or responsive object logic if schema allows, 
-    // but here we primarily handle the flat properties supported by the designer inputs
-    const baseCols = typeof schema.columns === 'number' ? schema.columns : 2;
-    const smCols = schema.smColumns;
-    const mdCols = schema.mdColumns;
-    const lgCols = schema.lgColumns;
-    const xlCols = schema.xlColumns;
+    // Supports detailed object configuration from schema
+    let baseCols = 2;
+    let smCols, mdCols, lgCols, xlCols;
+
+    if (typeof schema.columns === 'number') {
+      baseCols = schema.columns;
+    } else if (typeof schema.columns === 'object' && schema.columns !== null) {
+      // Handle responsive object: { xs: 1, sm: 2, md: 3, lg: 4 }
+      // Note: 'xs' corresponds to base (mobile-first)
+      baseCols = schema.columns.xs ?? 1;
+      smCols = schema.columns.sm;
+      mdCols = schema.columns.md;
+      lgCols = schema.columns.lg;
+      xlCols = schema.columns.xl;
+    }
+
+    // Fallback to legacy flat props if provided (from designer)
+    if (schema.smColumns) smCols = schema.smColumns;
+    if (schema.mdColumns) mdCols = schema.mdColumns;
+    if (schema.lgColumns) lgCols = schema.lgColumns;
+    if (schema.xlColumns) xlCols = schema.xlColumns;
 
     const gap = schema.gap ?? 4;
     
@@ -63,7 +85,7 @@ ComponentRegistry.register('grid',
       lgCols && GRID_COLS_LG[lgCols],
       xlCols && GRID_COLS_XL[xlCols],
       // Gap
-      GAPS[gap] || 'gap-4',
+      GAPS[gap] || `gap-[${gap * 0.25}rem]`, // Fallback for arbitrary values if not in map
       className
     );
 
@@ -89,6 +111,7 @@ ComponentRegistry.register('grid',
     );
   },
   {
+    namespace: 'ui',
     label: 'Grid Layout',
     inputs: [
       { 

package/src/renderers/layout/index.ts

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './card';
 import './tabs';
 import './grid';
@@ -6,5 +14,6 @@ import './stack';
 import './container';
 import './page';
 import './semantic';
+import './aspect-ratio';
 
 

package/src/renderers/layout/page.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React from 'react';
 import { PageSchema } from '@object-ui/types';
 import { SchemaRenderer } from '@object-ui/react';
@@ -9,9 +17,18 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
   className,
   ...props 
 }) => {
-  // Support both body (legacy/playground) and children
-  const content = schema.body || schema.children;
-  const nodes = Array.isArray(content) ? content : (content ? [content] : []);
+  // Support regions (spec compliant), body (legacy), and children
+  let nodes: any[] = [];
+  
+  if (schema.regions && schema.regions.length > 0) {
+    // If regions are present, flatten their components into the main flow
+    // Ideally, we might want a grid layout here, but linear stacking works for simple single-region pages
+    nodes = schema.regions.flatMap(r => r.components || []);
+  } else {
+    // Fallback to direct children/body
+    const content = schema.body || schema.children;
+    nodes = Array.isArray(content) ? content : (content ? [content] : []);
+  }
 
   // Extract designer-related props
   const { 
@@ -23,7 +40,7 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
 
   return (
     <div 
-      className={cn("min-h-full w-full bg-background p-6 md:p-8", className)}
+      className={cn("min-h-full w-full bg-background p-4 md:p-6 lg:p-8", className)}
       {...pageProps}
       // Apply designer props
       data-obj-id={dataObjId}
@@ -60,23 +77,26 @@ export const PageRenderer: React.FC<{ schema: PageSchema; className?: string; [k
   );
 };
 
-ComponentRegistry.register(
-  'page',
-  PageRenderer,
-  {
-    label: 'Page',
-    icon: 'Layout',
-    category: 'layout',
-    inputs: [
-      { name: 'title', type: 'string', label: 'Title' },
-      { name: 'description', type: 'string', label: 'Description' },
-      { 
-        name: 'body', 
-        type: 'array', 
-        label: 'Content',
-        // @ts-expect-error - itemType is experimental/extended metadata
-        itemType: 'component' 
-      }
-    ]
-  }
-);
+const pageMeta: any = {
+  namespace: 'ui',
+  label: 'Page',
+  icon: 'Layout',
+  category: 'layout',
+  inputs: [
+    { name: 'title', type: 'string', label: 'Title' },
+    { name: 'description', type: 'string', label: 'Description' },
+    { 
+      name: 'body', 
+      type: 'array', 
+      label: 'Content',
+      itemType: 'component' 
+    }
+  ]
+};
+
+ComponentRegistry.register('page', PageRenderer, pageMeta);
+ComponentRegistry.register('app', PageRenderer, { ...pageMeta, label: 'App Page' });
+ComponentRegistry.register('utility', PageRenderer, { ...pageMeta, label: 'Utility Page' });
+ComponentRegistry.register('home', PageRenderer, { ...pageMeta, label: 'Home Page' });
+ComponentRegistry.register('record', PageRenderer, { ...pageMeta, label: 'Record Page' });
+

package/src/renderers/layout/semantic.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import { renderChildren } from '../../lib/utils';
 import { forwardRef } from 'react';
@@ -30,6 +38,7 @@ tags.forEach(tag => {
   Component.displayName = `Semantic${tag.charAt(0).toUpperCase() + tag.slice(1)}`;
 
   ComponentRegistry.register(tag, Component, {
+      namespace: 'ui',
       label: tag.charAt(0).toUpperCase() + tag.slice(1),
       category: 'layout',
       inputs: [

package/src/renderers/layout/stack.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { StackSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -11,7 +19,7 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
     const direction = schema.direction || 'col';
     const justify = schema.justify || 'start';
     const align = schema.align || 'stretch'; // Stack items usually stretch
-    const gap = schema.gap || 2;
+    const gap = schema.gap ?? (schema as any).spacing ?? 2;
     const wrap = schema.wrap || false;
     
     const stackClass = cn(
@@ -34,16 +42,16 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
       align === 'center' && 'items-center',
       align === 'baseline' && 'items-baseline',
       align === 'stretch' && 'items-stretch',
-      // Gap
+      // Gap - Mobile-first responsive
       gap === 0 && 'gap-0',
       gap === 1 && 'gap-1',
-      gap === 2 && 'gap-2',
-      gap === 3 && 'gap-3',
-      gap === 4 && 'gap-4',
-      gap === 5 && 'gap-5',
-      gap === 6 && 'gap-6',
-      gap === 8 && 'gap-8',
-      gap === 10 && 'gap-10',
+      gap === 2 && 'gap-1.5 sm:gap-2',
+      gap === 3 && 'gap-2 sm:gap-3',
+      gap === 4 && 'gap-2 sm:gap-3 md:gap-4',
+      gap === 5 && 'gap-3 sm:gap-4 md:gap-5',
+      gap === 6 && 'gap-3 sm:gap-4 md:gap-6',
+      gap === 8 && 'gap-4 sm:gap-6 md:gap-8',
+      gap === 10 && 'gap-5 sm:gap-7 md:gap-10',
       // Wrap
       wrap && 'flex-wrap',
       className
@@ -74,6 +82,7 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
 ComponentRegistry.register('stack', 
   StackRenderer,
   {
+    namespace: 'ui',
     label: 'Stack',
     inputs: [
       {