@object-ui/components 0.3.1 → 0.5.0

package/src/renderers/layout/page.tsx

@@ -17,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 { 
@@ -68,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

@@ -38,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

@@ -19,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(
@@ -82,6 +82,7 @@ const StackRenderer = forwardRef<HTMLDivElement, { schema: StackSchema; classNam
 ComponentRegistry.register('stack', 
   StackRenderer,
   {
+    namespace: 'ui',
     label: 'Stack',
     inputs: [
       { 

package/src/renderers/layout/tabs.tsx

@@ -15,39 +15,65 @@ import {
   TabsTrigger,
   TabsContent
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('tabs', 
-  ({ schema, className, ...props }: { schema: TabsSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...tabsProps 
-    } = props;
+const TabsRenderer = ({ schema, className, onChange, value, ...props }: { schema: TabsSchema; className?: string; onChange?: (val: string) => void; value?: string; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...tabsProps 
+  } = props;
 
-    return (
+  const handleValueChange = (val: string) => {
+    if (onChange) {
+      onChange(val);
+    }
+  };
+
+  const isVertical = schema.orientation === 'vertical';
+
+  return (
     <Tabs 
-        defaultValue={schema.defaultValue} 
-        className={className} 
+        defaultValue={value === undefined ? schema.defaultValue : undefined} 
+        value={value ?? schema.value}
+        onValueChange={handleValueChange}
+        orientation={schema.orientation || 'horizontal'}
+        className={cn(className, isVertical && "flex gap-2")} 
         {...tabsProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
     >
-      <TabsList>
+      <TabsList className={cn(isVertical && "flex-col h-auto items-stretch bg-muted/50 p-1")}>
         {schema.items?.map((item) => (
-          <TabsTrigger key={item.value} value={item.value}>{item.label}</TabsTrigger>
+          <TabsTrigger 
+            key={item.value} 
+            value={item.value}
+            disabled={item.disabled}
+            className={cn(isVertical && "justify-start")}
+          >
+            {item.label}
+          </TabsTrigger>
         ))}
       </TabsList>
       {schema.items?.map((item) => (
-        <TabsContent key={item.value} value={item.value}>
-          {renderChildren((item as any).body)}
+        <TabsContent 
+          key={item.value} 
+          value={item.value}
+          className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isVertical && "mt-0 flex-1")}
+        >
+          {renderChildren(item.content || (item as any).body)}
         </TabsContent>
       ))}
     </Tabs>
   );
-  },
+};
+
+ComponentRegistry.register('tabs', TabsRenderer,
   {
+    namespace: 'ui',
     label: 'Tabs',
     inputs: [
       { name: 'defaultValue', type: 'string', label: 'Default Value', required: true },

package/src/renderers/navigation/header-bar.tsx

@@ -44,6 +44,7 @@ ComponentRegistry.register('header-bar',
     </header>
   ),
   {
+    namespace: 'ui',
     label: 'Header Bar',
     inputs: [
        { name: 'crumbs', type: 'array', label: 'Breadcrumbs' }

package/src/renderers/navigation/sidebar.tsx

@@ -30,6 +30,7 @@ ComponentRegistry.register('sidebar-provider',
     <SidebarProvider {...props}>{renderChildren(schema.body)}</SidebarProvider>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Provider',
     inputs: [
       { name: 'defaultOpen', type: 'boolean', label: 'Default Open', defaultValue: true }
@@ -49,6 +50,7 @@ ComponentRegistry.register('sidebar',
     <Sidebar {...props}>{renderChildren(schema.body)}</Sidebar>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar',
     inputs: [
       { name: 'collapsible', type: 'enum', enum: ['offcanvas', 'icon', 'none'], defaultValue: 'icon', label: 'Collapsible' },
@@ -102,6 +104,7 @@ ComponentRegistry.register('sidebar-group',
     </SidebarGroup>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Group',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' }
@@ -147,6 +150,7 @@ ComponentRegistry.register('sidebar-menu-button',
     </SidebarMenuButton>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Menu Button',
     inputs: [
       { name: 'active', type: 'boolean', label: 'Active', defaultValue: false },
@@ -191,6 +195,7 @@ ComponentRegistry.register('sidebar-trigger',
     <SidebarTrigger className={className} {...props} />
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Trigger',
     inputs: [{ name: 'className', type: 'string', label: 'CSS Class' }]
   }

package/src/renderers/overlay/alert-dialog.tsx

@@ -41,6 +41,7 @@ ComponentRegistry.register('alert-dialog',
     </AlertDialog>
   ),
   {
+    namespace: 'ui',
     label: 'Alert Dialog',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/context-menu.tsx

@@ -70,6 +70,7 @@ ComponentRegistry.register('context-menu',
     </ContextMenu>
   )},
   {
+    namespace: 'ui',
     label: 'Context Menu',
     inputs: [
       { 

package/src/renderers/overlay/dialog.tsx

@@ -40,6 +40,7 @@ ComponentRegistry.register('dialog',
     </Dialog>
   ),
   {
+    namespace: 'ui',
     label: 'Dialog',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/drawer.tsx

@@ -42,6 +42,7 @@ ComponentRegistry.register('drawer',
     </Drawer>
   ),
   {
+    namespace: 'ui',
     label: 'Drawer',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/dropdown-menu.tsx

@@ -65,6 +65,7 @@ ComponentRegistry.register('dropdown-menu',
     </DropdownMenu>
   ),
   {
+    namespace: 'ui',
     label: 'Dropdown Menu',
     inputs: [
       { name: 'label', type: 'string', label: 'Menu Label' },

package/src/renderers/overlay/hover-card.tsx

@@ -27,6 +27,7 @@ ComponentRegistry.register('hover-card',
     </HoverCard>
   ),
   {
+    namespace: 'ui',
     label: 'Hover Card',
     inputs: [
        { name: 'openDelay', type: 'number', label: 'Open Delay' },

package/src/renderers/overlay/menubar.tsx

@@ -54,6 +54,7 @@ ComponentRegistry.register('menubar',
     );
   },
   {
+    namespace: 'ui',
     label: 'Menubar',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }

package/src/renderers/overlay/popover.tsx

@@ -27,6 +27,7 @@ ComponentRegistry.register('popover',
     </Popover>
   ),
   {
+    namespace: 'ui',
     label: 'Popover',
     inputs: [
       { name: 'modal', type: 'boolean', label: 'Modal' },

package/src/renderers/overlay/sheet.tsx

@@ -40,6 +40,7 @@ ComponentRegistry.register('sheet',
     </Sheet>
   ),
   {
+    namespace: 'ui',
     label: 'Sheet',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/tooltip.tsx

@@ -34,6 +34,7 @@ ComponentRegistry.register('tooltip',
     </TooltipProvider>
   ),
   {
+    namespace: 'ui',
     label: 'Tooltip',
     inputs: [
       { name: 'delayDuration', type: 'number', label: 'Delay Duration', defaultValue: 700 },

package/src/renderers/placeholders.tsx

@@ -11,7 +11,7 @@ import { ComponentRegistry } from '@object-ui/core';
 import { cn } from '../lib/utils';
 import { Box, FileQuestion } from 'lucide-react';
 
-export const PlaceholderRenderer = ({ schema, className, ...props }: any) => {
+export const PlaceholderRenderer = ({ schema, className }: any) => {
   const type = schema.type;
   const isView = type.startsWith('view:');
   const isWidget = type.startsWith('widget:');
@@ -46,7 +46,7 @@ export const PlaceholderRenderer = ({ schema, className, ...props }: any) => {
 const PROTOCOL_COMPONENTS = [
   // 1. Views (List)
   'view:grid', 'view:kanban', 'view:map', 'view:calendar', 'view:gantt', 
-  'view:timeline', 'view:gallery', 'view:spreadsheet',
+  'view:timeline', 'view:gallery',
   
   // 2. Views (Form)
   'view:simple', 'view:wizard', 'view:tabbed', 'view:drawer', 'view:modal', 'view:split',