Add semantic layout components to renderer

Introduced a new semantic.tsx file that registers semantic HTML elements (aside, main, header, nav, footer, section, article) as components in the ComponentRegistry. Updated the layout index to include the new semantic components for improved semantic structure in layouts.

Author: hotlong

packages/components/src/renderers/layout/index.ts

@@ -5,5 +5,6 @@ import './flex';
 import './stack';
 import './container';
 import './page';
+import './semantic';
 
 

packages/components/src/renderers/layout/semantic.tsx

@@ -0,0 +1,39 @@
+import { ComponentRegistry } from '@object-ui/core';
+import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
+
+const tags = ['aside', 'main', 'header', 'nav', 'footer', 'section', 'article'] as const;
+
+tags.forEach(tag => {
+  const Component = forwardRef<HTMLElement, any>(({ schema, className, ...props }, ref) => {
+      // Extract designer-related props
+      const { 
+          'data-obj-id': dataObjId, 
+          'data-obj-type': dataObjType,
+          style,
+          ...restProps
+      } = props;
+      
+      const Tag = tag;
+      
+      return (
+      <Tag 
+          ref={ref}
+          className={className} 
+          {...restProps}
+          {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {renderChildren(schema.children || schema.body)}
+      </Tag>
+    );
+  });
+  Component.displayName = `Semantic${tag.charAt(0).toUpperCase() + tag.slice(1)}`;
+
+  ComponentRegistry.register(tag, Component, {
+      label: tag.charAt(0).toUpperCase() + tag.slice(1),
+      category: 'layout',
+      inputs: [
+        { name: 'className', type: 'string', label: 'CSS Class' }
+      ]
+  });
+});