@object-ui/components 3.1.0 → 3.1.1

package/src/renderers/action/action-bar.tsx

@@ -36,6 +36,7 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { ActionSchema, ActionLocation, ActionComponent } from '@object-ui/types';
 import { useCondition } from '@object-ui/react';
 import { cn } from '../../lib/utils';
+import { useIsMobile } from '../../hooks/use-mobile';
 
 export interface ActionBarSchema {
   type: 'action:bar';
@@ -45,6 +46,8 @@ export interface ActionBarSchema {
   location?: ActionLocation;
   /** Maximum visible inline actions before overflow into "More" menu (default: 3) */
   maxVisible?: number;
+  /** Maximum visible inline actions on mobile devices (default: 1). Desktop uses maxVisible instead. */
+  mobileMaxVisible?: number;
   /** Visibility condition expression */
   visible?: string;
   /** Layout direction */
@@ -66,22 +69,36 @@ const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema;
       'data-obj-id': dataObjId,
       'data-obj-type': dataObjType,
       style,
+      data,
       ...rest
     } = props;
 
     const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+    const isMobile = useIsMobile();
 
-    // Filter actions by location
+    // Filter actions by location and deduplicate by name
     const filteredActions = useMemo(() => {
       const actions = schema.actions || [];
-      if (!schema.location) return actions;
-      return actions.filter(
-        a => !a.locations || a.locations.length === 0 || a.locations.includes(schema.location!),
-      );
+      const located = !schema.location
+        ? actions
+        : actions.filter(
+            a => !a.locations || a.locations.length === 0 || a.locations.includes(schema.location!),
+          );
+      // Deduplicate by action name — keep first occurrence
+      const seen = new Set<string>();
+      return located.filter(a => {
+        if (!a.name) return true;
+        if (seen.has(a.name)) return false;
+        seen.add(a.name);
+        return true;
+      });
     }, [schema.actions, schema.location]);
 
     // Split into visible inline actions and overflow
-    const maxVisible = schema.maxVisible ?? 3;
+    // On mobile, show fewer actions inline (default: 1)
+    const maxVisible = isMobile
+      ? (schema.mobileMaxVisible ?? 1)
+      : (schema.maxVisible ?? 3);
     const { inlineActions, overflowActions } = useMemo(() => {
       if (filteredActions.length <= maxVisible) {
         return { inlineActions: filteredActions, overflowActions: [] as ActionSchema[] };
@@ -137,9 +154,11 @@ const ActionBarRenderer = forwardRef<HTMLDivElement, { schema: ActionBarSchema;
               schema={{
                 ...action,
                 type: componentType,
+                actionType: action.type,
                 variant: action.variant || schema.variant,
                 size: action.size || schema.size,
               }}
+              data={data}
             />
           );
         })}

package/src/renderers/action/action-button.tsx

@@ -28,7 +28,7 @@ import { Loader2 } from 'lucide-react';
 import { resolveIcon } from './resolve-icon';
 
 export interface ActionButtonProps {
-  schema: ActionSchema & { type: string; className?: string };
+  schema: ActionSchema & { type: string; className?: string; actionType?: string };
   className?: string;
   /** Override context for this specific action */
   context?: Record<string, any>;
@@ -41,15 +41,19 @@ const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
       'data-obj-id': dataObjId,
       'data-obj-type': dataObjType,
       style,
+      data,
       ...rest
     } = props;
 
     const { execute } = useAction();
     const [loading, setLoading] = useState(false);
 
-    // Evaluate visibility and enabled conditions
-    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
-    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined);
+    // Record data may be passed from SchemaRenderer (e.g. DetailView passes record data)
+    const recordData = data != null && typeof data === 'object' ? data as Record<string, any> : {};
+
+    // Evaluate visibility and enabled conditions with record data context
+    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined, recordData);
+    const isEnabled = useCondition(schema.enabled ? `\${${schema.enabled}}` : undefined, recordData);
 
     // Resolve icon
     const Icon = resolveIcon(schema.icon);
@@ -63,14 +67,21 @@ const ActionButtonRenderer = forwardRef<HTMLButtonElement, ActionButtonProps>(
       setLoading(true);
 
       try {
+        // Route params correctly:
+        // - Array of objects with name+type → ActionParamDef[] → pass as actionParams for collection
+        // - Otherwise → pass as actual param values
+        const paramsPayload = Array.isArray(schema.params)
+          ? { actionParams: schema.params as any }
+          : { params: schema.params as Record<string, any> | undefined };
+
         await execute({
-          type: schema.type,
+          type: schema.actionType || schema.type,
           name: schema.name,
           target: schema.target,
           execute: schema.execute,
           endpoint: schema.endpoint,
           method: schema.method,
-          params: schema.params as Record<string, any> | undefined,
+          ...paramsPayload,
           confirmText: schema.confirmText,
           successMessage: schema.successMessage,
           errorMessage: schema.errorMessage,

package/src/renderers/complex/data-table.tsx

@@ -796,7 +796,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         {col.headerIcon && (
                           <span className="text-muted-foreground flex-shrink-0">{col.headerIcon}</span>
                         )}
-                        <span className="text-xs font-normal text-muted-foreground">{col.header}</span>
+                        <span className="text-xs font-normal text-muted-foreground whitespace-nowrap truncate">{col.header}</span>
                         {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
                       </div>
                       {resizableColumns && col.resizable !== false && (
@@ -858,7 +858,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
-                        "bg-background border-b border-border hover:bg-muted/30 group/row",
+                        "bg-background border-b border-border hover:bg-muted/50 group/row",
                         schema.onRowClick && "cursor-pointer",
                         rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
                         rowClassName && rowClassName(row, rowIndex)