@patternfly/context-for-ai 1.2.0

package/dist/index.esm.js

@@ -0,0 +1,1362 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState } from 'react';
+import { Button as Button$1, Form as Form$1, Checkbox as Checkbox$1, TextInput as TextInput$1, TextArea as TextArea$1, Select as Select$1, Radio as Radio$1, Switch as Switch$1, Card as Card$1, Flex as Flex$1, FlexItem as FlexItem$1, Modal as Modal$1, Drawer as Drawer$1, MenuToggle as MenuToggle$1, DropdownItem as DropdownItem$1 } from '@patternfly/react-core';
+import { Tbody as Tbody$1, Td as Td$1, Th as Th$1, Thead as Thead$1, Tr as Tr$1 } from '@patternfly/react-table';
+
+/**
+ * Inference utilities for automatically determining semantic properties
+ * from PatternFly component props
+ */
+/**
+ * Determine if a component is a visual parent (requires user action to see contents)
+ * vs a wrapper/structure (always visible)
+ */
+const isVisualParent = (componentName) => {
+    const visualParents = [
+        'modal', 'drawer', 'popover', 'tooltip', // Overlays
+        'wizardstep', 'wizard', 'tab', 'accordion', // Navigation containers
+        'expandable', 'dropdown', 'menu', 'menutoggle' // Expandable containers
+    ];
+    return visualParents.includes(componentName.toLowerCase());
+};
+/**
+ * Infer button action from PatternFly variant and props
+ * Returns both behavior (what it does) and styling (how it looks)
+ */
+const inferButtonAction = (variant, href, onClick, target) => {
+    // Determine behavior - what the button DOES
+    let behaviorType = 'default';
+    if (href) {
+        // Has href - it's a link
+        if (href.startsWith('http'))
+            behaviorType = 'external';
+        else if (target === '_blank')
+            behaviorType = 'external';
+        else if (href.startsWith('/'))
+            behaviorType = 'navigation';
+        else
+            behaviorType = 'navigation';
+    }
+    else if (onClick) {
+        // Has onClick but no href - it's an action
+        behaviorType = 'action';
+    }
+    // Determine styling - visual importance/appearance
+    let styleVariant = 'secondary';
+    switch (variant) {
+        case 'primary':
+            styleVariant = 'primary';
+            break;
+        case 'danger':
+            styleVariant = 'destructive';
+            break;
+        case 'control':
+            styleVariant = 'toggle';
+            break;
+        case 'secondary':
+        case 'tertiary':
+        case 'plain':
+        case 'link':
+            styleVariant = variant;
+            break;
+    }
+    return {
+        type: behaviorType,
+        variant: styleVariant
+    };
+};
+/**
+ * Infer input purpose from type
+ */
+const inferInputPurpose = (type) => {
+    switch (type) {
+        case 'email':
+            return 'email-input';
+        case 'password':
+            return 'password-input';
+        case 'search':
+            return 'search-input';
+        case 'tel':
+            return 'phone-input';
+        case 'url':
+            return 'url-input';
+        case 'number':
+            return 'numeric-input';
+        case 'date':
+        case 'datetime-local':
+        case 'time':
+            return 'date-time-input';
+        case 'text':
+        default:
+            return 'text-input';
+    }
+};
+/**
+ * Infer alert severity
+ */
+const inferAlertSeverity = (variant) => {
+    switch (variant) {
+        case 'success':
+            return 'success';
+        case 'danger':
+            return 'error';
+        case 'warning':
+            return 'warning';
+        case 'info':
+        case 'default':
+        default:
+            return 'info';
+    }
+};
+/**
+ * Infer context from parent or usage
+ */
+const inferContext = (props) => {
+    if (props.onClick || props.onSubmit)
+        return 'active';
+    if (props.isDisabled)
+        return 'disabled';
+    if (props.isReadOnly)
+        return 'readonly';
+    return 'default';
+};
+/**
+ * Infer card purpose from PatternFly props
+ */
+const inferCardPurpose = (props) => {
+    // Interactive cards
+    if (props.isSelectable)
+        return 'selection-panel';
+    if (props.isClickable)
+        return 'action-panel';
+    if (props.isExpanded !== undefined)
+        return 'expandable-content';
+    // Layout-based cards
+    if (props.isCompact)
+        return 'data-summary';
+    if (props.isPlain)
+        return 'content-display';
+    // Content-based cards (based on children analysis)
+    if (props.children) {
+        const childrenStr = props.children.toString().toLowerCase();
+        if (childrenStr.includes('logo') || childrenStr.includes('brand'))
+            return 'brand-display';
+        if (childrenStr.includes('chart') || childrenStr.includes('graph'))
+            return 'data-visualization';
+        if (childrenStr.includes('form') || childrenStr.includes('input'))
+            return 'form-container';
+        if (childrenStr.includes('table') || childrenStr.includes('list'))
+            return 'data-display';
+    }
+    return 'content-display';
+};
+/**
+ * Infer modal purpose from props
+ */
+const inferModalPurpose = (props) => {
+    if (props.variant === 'small')
+        return 'confirmation';
+    if (props.variant === 'large')
+        return 'form';
+    return 'information';
+};
+/**
+ * Infer accessibility features from props
+ */
+const inferAccessibilityFeatures = (props) => {
+    const features = ['keyboard-navigable'];
+    if (props['aria-label'] || props['aria-labelledby']) {
+        features.push('screen-reader-friendly');
+    }
+    if (props.autoFocus) {
+        features.push('auto-focus');
+    }
+    if (props.role) {
+        features.push('semantic-role');
+    }
+    return features;
+};
+/**
+ * Infer usage patterns from component type and props
+ */
+const inferUsagePatterns = (componentType, props) => {
+    const patterns = ['user-interface'];
+    // Component-specific patterns
+    switch (componentType.toLowerCase()) {
+        case 'button':
+            if (props.type === 'submit')
+                patterns.push('form-submission');
+            if (props.onClick)
+                patterns.push('user-interaction');
+            break;
+        case 'textinput':
+        case 'textarea':
+            patterns.push('data-entry', 'form-input');
+            if (props.validated === 'error')
+                patterns.push('validation');
+            break;
+        case 'select':
+            patterns.push('data-entry', 'selection');
+            break;
+        case 'checkbox':
+        case 'radio':
+            patterns.push('user-selection', 'form-input');
+            break;
+        case 'modal':
+            patterns.push('user-interaction', 'workflow-step');
+            break;
+        case 'card':
+            patterns.push('content-organization', 'data-presentation');
+            break;
+    }
+    return patterns;
+};
+/**
+ * Generate comprehensive metadata from props
+ */
+const generateMetadataFromProps = (componentName, props) => {
+    return {
+        description: `${componentName} component`,
+        category: inferCategory(componentName),
+        accessibility: inferAccessibilityFeatures(props),
+        usage: inferUsagePatterns(componentName, props)
+    };
+};
+/**
+ * Infer card content type from PatternFly props and children
+ */
+const inferCardContentType = (props) => {
+    // Interactive states - keep them separate
+    if (props.isSelectable)
+        return 'selectable';
+    if (props.isClickable)
+        return 'clickable';
+    if (props.isExpanded !== undefined)
+        return 'expandable';
+    // Content analysis based on children
+    if (props.children) {
+        const childrenStr = props.children.toString().toLowerCase();
+        // Logo content (media cards should only contain logos)
+        if (childrenStr.includes('logo') || childrenStr.includes('brand')) {
+            return 'logo';
+        }
+        // Data content
+        if (childrenStr.includes('table') || childrenStr.includes('chart') || childrenStr.includes('graph') ||
+            childrenStr.includes('metric') || childrenStr.includes('stat')) {
+            return 'data';
+        }
+        // Form content
+        if (childrenStr.includes('form') || childrenStr.includes('input') || childrenStr.includes('button')) {
+            return 'interactive';
+        }
+        // Text content
+        if (childrenStr.includes('text') || childrenStr.includes('description') || childrenStr.includes('paragraph')) {
+            return 'text';
+        }
+    }
+    return 'mixed'; // Default fallback
+};
+/**
+ * Infer card interactive state from PatternFly props
+ */
+const inferCardInteractiveState = (props) => {
+    // Interactive states
+    if (props.isSelectable) {
+        if (props.isSelected)
+            return 'selected';
+        return 'selectable';
+    }
+    if (props.isClickable) {
+        if (props.isDisabled)
+            return 'disabled-clickable';
+        return 'clickable';
+    }
+    if (props.isExpanded !== undefined) {
+        if (props.isExpanded)
+            return 'expanded';
+        return 'collapsed';
+    }
+    // Default state
+    return 'static';
+};
+/**
+ * Infer modal interaction type
+ */
+const inferModalInteractionType = (isOpen) => {
+    return isOpen ? 'blocking' : 'non-blocking';
+};
+/**
+ * Infer select purpose
+ */
+const inferSelectPurpose = () => {
+    return 'data-entry';
+};
+/**
+ * Infer select selection type
+ */
+const inferSelectSelectionType = (variant) => {
+    return variant === 'typeahead' ? 'typeahead' : 'single';
+};
+/**
+ * Infer radio purpose
+ */
+const inferRadioPurpose = () => {
+    return 'option-selection';
+};
+/**
+ * Infer radio group context
+ */
+const inferRadioGroupContext = (name) => {
+    return name || 'unknown-group';
+};
+/**
+ * Infer switch purpose
+ */
+const inferSwitchPurpose = () => {
+    return 'setting';
+};
+/**
+ * Infer switch toggle target
+ */
+const inferSwitchToggleTarget = () => {
+    return 'feature';
+};
+/**
+ * Infer textarea purpose
+ */
+const inferTextAreaPurpose = () => {
+    return 'content';
+};
+/**
+ * Infer textarea content type
+ */
+const inferTextAreaContentType = () => {
+    return 'plain-text';
+};
+/**
+ * Infer checkbox purpose
+ */
+const inferCheckboxPurpose = (isChecked) => {
+    return isChecked !== undefined ? 'selection' : 'form-input';
+};
+/**
+ * Infer link purpose
+ */
+const inferLinkPurpose = (href, children) => {
+    if (href?.startsWith('http'))
+        return 'external';
+    if (href === '#')
+        return 'action';
+    if (href?.includes('download'))
+        return 'download';
+    if (children?.toString().toLowerCase().includes('launch'))
+        return 'launch';
+    return 'navigation';
+};
+/**
+ * Infer star icon purpose
+ */
+const inferStarIconPurpose = (isFavorited) => {
+    return isFavorited !== undefined ? 'favorite-toggle' : 'rating';
+};
+/**
+ * Infer validation context
+ */
+const inferValidationContext = (isRequired) => {
+    return isRequired ? 'required' : 'optional';
+};
+/**
+ * Infer form context (default for most form components)
+ */
+const inferFormContext = () => {
+    return 'form';
+};
+/**
+ * Infer settings context (default for switches)
+ */
+const inferSettingsContext = () => {
+    return 'settings';
+};
+/**
+ * Infer status badge type from content
+ */
+const inferStatusBadgeType = (content) => {
+    const lower = content?.toLowerCase() || '';
+    if (lower.includes('ready'))
+        return 'ready';
+    if (lower.includes('success'))
+        return 'success';
+    if (lower.includes('warning'))
+        return 'warning';
+    if (lower.includes('error') || lower.includes('fail'))
+        return 'error';
+    if (lower.includes('pending'))
+        return 'pending';
+    return 'info';
+};
+/**
+ * Infer status badge purpose
+ */
+const inferStatusBadgePurpose = () => {
+    return 'status-indicator';
+};
+/**
+ * Infer category from component name
+ * Category describes WHAT the component IS, not what it DOES (that's the action)
+ */
+const inferCategory = (componentName) => {
+    const name = componentName.toLowerCase();
+    // Component type categorization
+    if (name === 'button') {
+        return 'button';
+    }
+    if (['textinput', 'textarea', 'select', 'radio', 'checkbox', 'switch'].includes(name)) {
+        return 'forms';
+    }
+    if (['nav', 'breadcrumb', 'tabs', 'pagination', 'masthead'].includes(name)) {
+        return 'navigation';
+    }
+    if (['card', 'table', 'datalist', 'label', 'badge'].includes(name)) {
+        return 'data-display';
+    }
+    if (['alert', 'banner', 'toast', 'progress', 'spinner'].includes(name)) {
+        return 'feedback';
+    }
+    if (['modal', 'drawer', 'popover', 'tooltip'].includes(name)) {
+        return 'overlay';
+    }
+    if (['flex', 'grid', 'stack', 'panel'].includes(name)) {
+        return 'layout';
+    }
+    return 'data-display';
+};
+
+const SemanticContext = createContext(undefined);
+const useSemanticContext = () => {
+    const context = useContext(SemanticContext);
+    if (!context) {
+        throw new Error('useSemanticContext must be used within a SemanticProvider');
+    }
+    return context;
+};
+const SemanticProvider = ({ children }) => {
+    const [contextStack, setContextStack] = useState([]);
+    const addContext = (context, semanticName, isQualified) => {
+        // Auto-detect if not specified
+        const qualified = isQualified !== undefined ? isQualified : isVisualParent(context);
+        setContextStack(prev => [...prev, {
+                name: context,
+                semanticName: semanticName || context, // Use semantic name if provided, otherwise fallback to context
+                isQualified: qualified
+            }]);
+    };
+    const removeContext = () => {
+        setContextStack(prev => prev.slice(0, -1));
+    };
+    const clearContext = () => {
+        setContextStack([]);
+    };
+    const getHierarchy = () => {
+        const allSemanticNames = contextStack.map(c => c.semanticName);
+        const qualifiedOnly = contextStack.filter(c => c.isQualified).map(c => c.semanticName);
+        const wrappersOnly = contextStack.filter(c => !c.isQualified).map(c => c.semanticName);
+        return {
+            fullPath: allSemanticNames.length > 0 ? allSemanticNames.join(' > ') : '',
+            qualifiedParents: qualifiedOnly,
+            wrappers: wrappersOnly,
+            immediateParent: qualifiedOnly.length > 0 ? qualifiedOnly[qualifiedOnly.length - 1] : '',
+            immediateWrapper: wrappersOnly.length > 0 ? wrappersOnly[wrappersOnly.length - 1] : '',
+            depth: qualifiedOnly.length
+        };
+    };
+    return (jsx(SemanticContext.Provider, { value: {
+            contextStack,
+            addContext,
+            removeContext,
+            getHierarchy,
+            clearContext,
+        }, children: children }));
+};
+
+/** Button - PatternFly Button wrapper with semantic metadata for AI tooling */
+const Button = ({ semanticRole, aiMetadata: _aiMetadata, action, context, target, semanticName, children, variant, onClick, isDisabled, ...props }) => {
+    // Get hierarchy from context (optional - gracefully handles no provider)
+    let hierarchy;
+    let addContext, removeContext;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+        addContext = semanticContext.addContext;
+        removeContext = semanticContext.removeContext;
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+        addContext = () => { };
+        removeContext = () => { };
+    }
+    // Auto-infer semantic properties from PatternFly props
+    const inferredAction = inferButtonAction(variant, props.href, onClick, target);
+    const actionType = action || inferredAction.type;
+    const actionVariant = inferredAction.variant;
+    const inferredContext = context || inferContext({ onClick, isDisabled, ...props });
+    // Generate semantic role (combines category, action, context into one)
+    const role = semanticRole || `button-${actionType}-${inferredContext}`;
+    // Generate semantic name: wrapper > parent > action type
+    // Button acts on wrapper (if exists), otherwise parent, otherwise standalone
+    const componentName = semanticName || (() => {
+        // Format action type: "action" → "Action", "navigation" → "Navigation", "external" → "External Link"
+        // Treat "default" as "Action"
+        let actionLabel;
+        if (actionType === 'default') {
+            actionLabel = 'Action';
+        }
+        else if (actionType === 'external') {
+            actionLabel = 'External Link';
+        }
+        else {
+            actionLabel = actionType.charAt(0).toUpperCase() + actionType.slice(1);
+        }
+        // Priority: wrapper (immediate context) > parent > standalone
+        if (hierarchy.immediateWrapper) {
+            return `${hierarchy.immediateWrapper} ${actionLabel}`;
+        }
+        else if (hierarchy.immediateParent) {
+            return `${hierarchy.immediateParent} ${actionLabel}`;
+        }
+        // Otherwise just the action label
+        return actionLabel;
+    })();
+    // Register button with its semantic name in context (for modal triggering)
+    React.useEffect(() => {
+        addContext('Button', componentName, false); // false = not a visual parent
+        return () => removeContext();
+    }, [addContext, removeContext, componentName]);
+    const consequence = actionVariant === 'destructive' ? 'destructive-permanent' : 'safe';
+    const affectsParent = target === 'parent-modal' || target === 'parent-form';
+    return (jsx(Button$1, { ...props, variant: variant, onClick: onClick, isDisabled: isDisabled, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": role, "data-action-variant": actionVariant, "data-target": target || 'default', "data-consequence": consequence, "data-affects-parent": affectsParent, children: children }));
+};
+
+/** Link - HTML anchor wrapper with semantic metadata for AI tooling */
+const Link = ({ semanticName, semanticRole, aiMetadata, purpose, context, target, htmlTarget, children, href, onClick, ...props }) => {
+    // Get hierarchy from context (optional - gracefully handles no provider)
+    let hierarchy;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+    }
+    // Auto-infer semantic properties from props
+    const inferredPurpose = purpose || inferLinkPurpose(href, children);
+    const inferredContext = context || (onClick ? inferContext({ onClick }) : 'content');
+    const componentName = semanticName || 'Link';
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `link-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} link for ${inferredContext} context`,
+        category: inferCategory('Link'),
+        usage: [`${inferredContext}-${inferredPurpose}`, 'user-interaction'],
+        hierarchy,
+        action: {
+            type: inferredPurpose,
+            target: target || 'default'
+        }
+    };
+    return (jsx("a", { ...props, href: href, onClick: onClick, target: htmlTarget, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-target": target || 'default', "data-context": inferredContext, children: children }));
+};
+
+/** StarIcon - HTML span wrapper with semantic metadata for AI tooling */
+const StarIcon = ({ semanticName, semanticRole, aiMetadata, purpose, context, children, isFavorited, onClick, ...props }) => {
+    // Auto-infer semantic properties from props
+    const inferredPurpose = purpose || inferStarIconPurpose(isFavorited);
+    const inferredContext = context || (onClick ? inferContext({ onClick }) : 'display');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `star-icon-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} star icon for ${inferredContext} context`,
+        category: 'forms',
+        complexity: 'simple',
+        usage: [`${inferredContext}-${inferredPurpose}`, 'user-interaction']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Row Item';
+    return (jsx("span", { ...props, onClick: onClick, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-is-favorited": isFavorited, children: children }));
+};
+
+/** Form - PatternFly Form wrapper with semantic metadata for AI tooling */
+const Form = ({ semanticName, semanticRole, purpose, children, ...props }) => {
+    // Register as wrapper (not a visual parent) in semantic context
+    const { addContext, removeContext } = useSemanticContext();
+    React.useEffect(() => {
+        addContext('Form', undefined, false); // false = wrapper (always visible)
+        return () => removeContext();
+    }, [addContext, removeContext]);
+    // Get hierarchy from context
+    let hierarchy;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+    }
+    // Auto-infer purpose from context if not provided
+    const inferredPurpose = purpose || 'edit';
+    // Generate semantic role
+    const role = semanticRole || `form-${inferredPurpose}`;
+    // Default semantic name if not provided
+    const componentName = semanticName || 'Form';
+    return (jsx(Form$1, { ...props, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": role, "data-purpose": inferredPurpose, children: children }));
+};
+
+/** Checkbox - PatternFly Checkbox wrapper with semantic metadata for AI tooling */
+const Checkbox = ({ semanticName, semanticRole, aiMetadata, purpose, context, children, isChecked, onChange, id, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props
+    const inferredPurpose = purpose || inferCheckboxPurpose(isChecked);
+    const inferredContext = context || (onChange ? inferContext({ onChange }) : inferFormContext());
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `checkbox-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} checkbox for ${inferredContext} context`,
+        category: inferCategory('Checkbox'),
+        usage: [`${inferredContext}-${inferredPurpose}`, 'user-interaction']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Row Item';
+    return (jsx(Checkbox$1, { ...props, id: id, isChecked: isChecked, onChange: onChange, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, children: children }));
+};
+
+/**
+ * TextInput - PatternFly TextInput wrapper with semantic metadata for AI tooling
+ *
+ * @example
+ * ```tsx
+ * <TextInput
+ *   type="email"
+ *   purpose="email-input"
+ *   context="form"
+ *   placeholder="Enter your email"
+ *   value={email}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+const TextInput = React.forwardRef(({ semanticName, semanticRole, aiMetadata, purpose, context, validationContext, type = 'text', validated, isRequired, ...props }, ref) => {
+    // 1. Auto-infer semantic properties from PatternFly props
+    const inferredPurpose = purpose || inferInputPurpose(type);
+    const inferredContext = context || inferFormContext();
+    const inferredValidation = validationContext || inferValidationContext(isRequired);
+    // 2. Generate semantic role and AI metadata
+    const role = semanticRole || `textinput-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        ...generateMetadataFromProps('TextInput', { type, validated, isRequired, ...props }),
+        description: `${inferredPurpose} for ${inferredContext} context`,
+        usage: ['data-entry', 'form-input', 'user-interaction']
+    };
+    // 3. Default semantic name
+    const defaultSemanticName = semanticName || 'TextInput';
+    // 4. Render PatternFly component with semantic data attributes
+    return (jsx(TextInput$1, { ...props, ref: ref, type: type, validated: validated, isRequired: isRequired, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-validation-context": inferredValidation }));
+});
+TextInput.displayName = 'TextInput';
+
+/**
+ * TextArea - PatternFly TextArea wrapper with semantic metadata for AI tooling
+ *
+ * @example
+ * ```tsx
+ * <TextArea
+ *   purpose="comment"
+ *   context="comment-section"
+ *   placeholder="Add your comment..."
+ *   value={comment}
+ *   onChange={handleChange}
+ *   resizeOrientation="vertical"
+ * />
+ * ```
+ */
+const TextArea = React.forwardRef(({ semanticName, semanticRole, aiMetadata, purpose, context, contentType, validated, isRequired, ...props }, ref) => {
+    // 1. Auto-infer semantic properties
+    const inferredPurpose = purpose || inferTextAreaPurpose();
+    const inferredContext = context || inferFormContext();
+    const inferredContentType = contentType || inferTextAreaContentType();
+    // 2. Generate semantic role and AI metadata
+    const role = semanticRole || `textarea-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        ...generateMetadataFromProps('TextArea', { validated, isRequired, ...props }),
+        description: `${inferredPurpose} textarea for ${inferredContext} containing ${inferredContentType}`,
+        usage: ['data-entry', 'long-form-input', 'user-interaction']
+    };
+    // 3. Default semantic name
+    const defaultSemanticName = semanticName || 'TextArea';
+    // 4. Render PatternFly component with semantic data attributes
+    return (jsx(TextArea$1, { ...props, ref: ref, validated: validated, isRequired: isRequired, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-content-type": inferredContentType }));
+});
+TextArea.displayName = 'TextArea';
+
+/**
+ * Select - PatternFly Select wrapper with semantic metadata for AI tooling
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   purpose="category-selection"
+ *   context="form"
+ *   isOpen={isOpen}
+ *   onToggle={handleToggle}
+ *   selections={selected}
+ *   onSelect={handleSelect}
+ * >
+ *   <SelectOption value="option1" />
+ *   <SelectOption value="option2" />
+ * </Select>
+ * ```
+ */
+const Select = ({ semanticName, semanticRole, aiMetadata, purpose, context, selectionType, variant, children, ...props }) => {
+    // 1. Auto-infer semantic properties
+    const inferredPurpose = purpose || inferSelectPurpose();
+    const inferredContext = context || inferFormContext();
+    const inferredSelectionType = selectionType || inferSelectSelectionType(variant);
+    // 2. Generate semantic role and AI metadata
+    const role = semanticRole || `select-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        ...generateMetadataFromProps('Select', { variant, ...props }),
+        description: `${inferredPurpose} select with ${inferredSelectionType} selection for ${inferredContext}`,
+        usage: ['data-entry', 'user-selection', 'user-interaction']
+    };
+    // 3. Default semantic name
+    const defaultSemanticName = semanticName || 'Select';
+    // 4. Render PatternFly component with semantic data attributes
+    return (jsx(Select$1, { ...props, variant: variant, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-selection-type": inferredSelectionType, children: children }));
+};
+
+/**
+ * Radio - PatternFly Radio wrapper with semantic metadata for AI tooling
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   purpose="preference"
+ *   context="settings"
+ *   groupContext="theme-selection"
+ *   name="theme"
+ *   id="theme-light"
+ *   label="Light Theme"
+ *   isChecked={theme === 'light'}
+ *   onChange={handleChange}
+ * />
+ * ```
+ */
+const Radio = ({ semanticName, semanticRole, aiMetadata, purpose, context, groupContext, name, isChecked, isDisabled, children, ...props }) => {
+    // 1. Auto-infer semantic properties
+    const inferredPurpose = purpose || inferRadioPurpose();
+    const inferredContext = context || inferFormContext();
+    const inferredGroupContext = groupContext || inferRadioGroupContext(name);
+    // 2. Generate semantic role and AI metadata
+    const role = semanticRole || `radio-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        ...generateMetadataFromProps('Radio', { name, isChecked, isDisabled, ...props }),
+        description: `${inferredPurpose} radio button in ${inferredGroupContext} group for ${inferredContext}`,
+        usage: ['user-selection', 'form-input', 'user-interaction']
+    };
+    // 3. Default semantic name
+    const defaultSemanticName = semanticName || 'Radio';
+    // 4. Render PatternFly component with semantic data attributes
+    return (jsx(Radio$1, { ...props, name: name, isChecked: isChecked, isDisabled: isDisabled, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-group-context": inferredGroupContext, children: children }));
+};
+
+/**
+ * Switch - PatternFly Switch wrapper with semantic metadata for AI tooling
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   purpose="feature-toggle"
+ *   context="settings"
+ *   toggleTarget="feature"
+ *   id="notifications"
+ *   label="Enable notifications"
+ *   isChecked={notificationsEnabled}
+ *   onChange={handleToggle}
+ * />
+ * ```
+ */
+const Switch = ({ semanticName, semanticRole, aiMetadata, purpose, context, toggleTarget, isChecked, isDisabled, children, ...props }) => {
+    // 1. Auto-infer semantic properties
+    const inferredPurpose = purpose || inferSwitchPurpose();
+    const inferredContext = context || inferSettingsContext();
+    const inferredToggleTarget = toggleTarget || inferSwitchToggleTarget();
+    // 2. Generate semantic role and AI metadata
+    const role = semanticRole || `switch-${inferredPurpose}-${inferredContext}`;
+    const metadata = aiMetadata || {
+        ...generateMetadataFromProps('Switch', { isChecked, isDisabled, ...props }),
+        description: `${inferredPurpose} switch for toggling ${inferredToggleTarget} in ${inferredContext}`,
+        usage: ['user-interaction', 'toggle-control', 'settings-control']
+    };
+    // 3. Default semantic name
+    const defaultSemanticName = semanticName || 'Switch';
+    // 4. Render PatternFly component with semantic data attributes
+    return (jsx(Switch$1, { ...props, isChecked: isChecked, isDisabled: isDisabled, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-context": inferredContext, "data-toggle-target": inferredToggleTarget, children: children }));
+};
+
+/** Card - PatternFly Card wrapper with semantic metadata for AI tooling */
+const Card = ({ semanticName, semanticRole, aiMetadata: _aiMetadata, purpose, contentType, children, isSelectable, isClickable, isExpanded, isCompact, isSelected, isDisabled, ...props }) => {
+    // Get hierarchy from context (optional - gracefully handles no provider)
+    let hierarchy;
+    let addContext, removeContext;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+        addContext = semanticContext.addContext;
+        removeContext = semanticContext.removeContext;
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+        addContext = () => { };
+        removeContext = () => { };
+    }
+    // Auto-infer semantic properties from PatternFly props and children
+    const inferredPurpose = purpose || inferCardPurpose({ isSelectable, isClickable, isExpanded, isCompact, children });
+    const inferredContentType = contentType || inferCardContentType({ isSelectable, isClickable, isExpanded, children });
+    const inferredInteractiveState = inferCardInteractiveState({ isSelectable, isClickable, isExpanded, isSelected, isDisabled });
+    // Generate semantic role
+    const role = semanticRole || `card-${inferredPurpose}-${inferredContentType}`;
+    // Generate semantic name: wrapper > parent > standalone
+    // Card acts on wrapper (if exists), otherwise parent, otherwise standalone
+    const componentName = semanticName || (() => {
+        // Priority: wrapper (immediate context) > parent > standalone
+        if (hierarchy.immediateWrapper) {
+            return `${hierarchy.immediateWrapper} Card`;
+        }
+        else if (hierarchy.immediateParent) {
+            return `${hierarchy.immediateParent} Card`;
+        }
+        // Otherwise just "Card"
+        return 'Card';
+    })();
+    // Register card with its semantic name in context
+    React.useEffect(() => {
+        addContext('Card', componentName, false); // false = wrapper (always visible)
+        return () => removeContext();
+    }, [addContext, removeContext, componentName]);
+    return (jsx(Card$1, { ...props, isSelectable: isSelectable, isClickable: isClickable, isExpanded: isExpanded, isCompact: isCompact, isSelected: isSelected, isDisabled: isDisabled, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": role, "data-purpose": inferredPurpose, "data-content-type": inferredContentType, "data-interactive-state": inferredInteractiveState, children: children }));
+};
+
+/** StatusBadge - HTML span wrapper with semantic metadata for AI tooling */
+const StatusBadge = ({ semanticName, semanticRole, aiMetadata, purpose, statusType, children, ...props }) => {
+    // Auto-infer semantic properties from content
+    const content = children?.toString();
+    const inferredStatusType = statusType || inferStatusBadgeType(content);
+    const inferredPurpose = purpose || inferStatusBadgePurpose();
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `status-badge-${inferredPurpose}-${inferredStatusType}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} showing ${inferredStatusType} status`,
+        category: 'data-display',
+        complexity: 'simple',
+        usage: [`${inferredPurpose}`, 'status-display', 'state-indication']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Row Item';
+    return (jsx("span", { ...props, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-status-type": inferredStatusType, children: children }));
+};
+
+/** Tbody - PatternFly Table Body wrapper with semantic metadata for AI tooling */
+const Tbody = ({ semanticName, semanticRole, aiMetadata, purpose, children, ...props }) => {
+    // Auto-infer semantic properties from children content
+    const inferredPurpose = purpose || (React.Children.toArray(children).some(child => React.isValidElement(child) && React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && cell.props?.children?.toString().toLowerCase().includes('select'))) ? 'selectable-rows' :
+        React.Children.toArray(children).some(child => React.isValidElement(child) && React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && cell.props?.children?.toString().toLowerCase().includes('action'))) ? 'action-rows' :
+            React.Children.toArray(children).some(child => React.isValidElement(child) && React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && typeof cell.props?.children === 'object')) ? 'mixed-content' : 'data-rows');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `table-body-section-${inferredPurpose}`;
+    const metadata = aiMetadata || {
+        description: `Table body section with ${inferredPurpose}`,
+        category: 'data-display',
+        complexity: 'moderate',
+        usage: [`table-${inferredPurpose}`, 'data-presentation', 'row-content']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Body Section';
+    return (jsx(Tbody$1, { ...props, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, children: children }));
+};
+
+/** Td - PatternFly Table Data wrapper with semantic metadata for AI tooling */
+const Td = ({ semanticName, semanticRole, aiMetadata, purpose, dataType, children, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props and content
+    const inferredPurpose = purpose || (React.Children.toArray(children).some(child => React.isValidElement(child) && child.type?.toString().includes('Button')) ? 'action-cell' :
+        React.Children.toArray(children).some(child => React.isValidElement(child) && child.type?.toString().includes('Checkbox')) ? 'selectable-cell' :
+            children?.toString().toLowerCase().includes('status') ? 'status-cell' : 'data-cell');
+    // Simple data type inference based on content
+    const inferredDataType = dataType || (typeof children === 'number' ? 'number' :
+        children?.toString().match(/^\d{4}-\d{2}-\d{2}/) ? 'date' :
+            children?.toString().toLowerCase() === 'true' ||
+                children?.toString().toLowerCase() === 'false' ? 'boolean' :
+                React.Children.toArray(children).some(child => React.isValidElement(child) && child.type?.toString().includes('Button')) ? 'action' : 'text');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `table-cell-${inferredPurpose}-${inferredDataType}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} containing ${inferredDataType} data`,
+        category: 'data-display',
+        complexity: 'simple',
+        usage: [`table-${inferredPurpose}`, 'data-presentation', 'row-content']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Row Item';
+    return (jsx(Td$1, { ...props, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-data-type": inferredDataType, children: children }));
+};
+
+/** Th - PatternFly Table Header wrapper with semantic metadata for AI tooling */
+const Th = ({ semanticName, semanticRole, aiMetadata, purpose, dataType, children, sort, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props
+    const inferredPurpose = purpose || (sort ? 'sortable-header' :
+        children?.toString().toLowerCase().includes('select') ? 'selectable-header' :
+            children?.toString().toLowerCase().includes('action') ? 'action-header' : 'column-header');
+    // Simple data type inference based on content
+    const inferredDataType = dataType || (children?.toString().toLowerCase().includes('date') ? 'date' :
+        children?.toString().toLowerCase().includes('id') ||
+            children?.toString().toLowerCase().includes('count') ? 'number' :
+            children?.toString().toLowerCase().includes('action') ? 'action' : 'text');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `table-header-${inferredPurpose}-${inferredDataType}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} for ${inferredDataType} data`,
+        category: 'data-display',
+        complexity: 'simple',
+        usage: [`table-${inferredPurpose}`, 'data-organization', 'column-definition']
+    };
+    // Always use 'Th' for component type identification (for validation)
+    // Store custom semantic name separately as instance name
+    const componentType = 'Th';
+    const instanceName = semanticName;
+    return (jsx(Th$1, { ...props, sort: sort, "data-semantic-name": componentType, "data-instance-name": instanceName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-data-type": inferredDataType, children: children }));
+};
+
+/** Thead - PatternFly Table Header wrapper with semantic metadata for AI tooling */
+const Thead = ({ semanticName, semanticRole, aiMetadata, purpose, children, ...props }) => {
+    // Auto-infer semantic properties from children content
+    const inferredPurpose = purpose || (React.Children.toArray(children).some(child => React.isValidElement(child) && child.props?.sort) ? 'sortable-headers' :
+        React.Children.toArray(children).some(child => React.isValidElement(child) && child.props?.children?.toString().toLowerCase().includes('select')) ? 'selectable-headers' :
+            React.Children.toArray(children).some(child => React.isValidElement(child) && child.props?.children?.toString().toLowerCase().includes('action')) ? 'action-headers' : 'column-definition');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `table-header-section-${inferredPurpose}`;
+    const metadata = aiMetadata || {
+        description: `Table header section with ${inferredPurpose}`,
+        category: 'data-display',
+        complexity: 'moderate',
+        usage: [`table-${inferredPurpose}`, 'data-organization', 'column-structure']
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Header Section';
+    return (jsx(Thead$1, { ...props, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, children: children }));
+};
+
+/** Tr - PatternFly Table Row wrapper with semantic metadata for AI tooling */
+const Tr = ({ semanticName, semanticRole, aiMetadata, purpose, interactionType, rowState, children, isClickable, isSelectable, isExpanded, isStriped, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props and content
+    const inferredPurpose = purpose || (React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && cell.type?.toString().includes('Th'))) ? 'header-row' :
+        React.Children.toArray(children).some(child => React.isValidElement(child) &&
+            React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && cell.type?.toString().includes('Checkbox'))) ? 'selectable-row' :
+            isExpanded ? 'expandable-row' :
+                React.Children.toArray(children).some(child => React.isValidElement(child) &&
+                    React.Children.toArray(child.props?.children).some(cell => React.isValidElement(cell) && cell.type?.toString().includes('Button'))) ? 'action-row' : 'data-row');
+    const inferredInteractionType = interactionType || (isClickable ? 'clickable' :
+        isSelectable ? 'selectable' :
+            isExpanded !== undefined ? 'expandable' :
+                'static');
+    const inferredRowState = rowState || (isExpanded ? 'expanded' :
+        isSelectable ? 'selected' :
+            isStriped ? 'highlighted' :
+                'normal');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `table-row-${inferredPurpose}-${inferredInteractionType}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} with ${inferredInteractionType} interaction`,
+        category: 'data-display',
+        complexity: inferredInteractionType === 'static' ? 'simple' : 'medium',
+        usage: [`table-${inferredPurpose}`, 'row-interaction', 'data-presentation'],
+        interactionType: inferredInteractionType,
+        rowState: inferredRowState,
+        isStriped: isStriped || false
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Table Row';
+    return (jsx(Tr$1, { ...props, isClickable: isClickable, isSelectable: isSelectable, isExpanded: isExpanded, isStriped: isStriped, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-interaction-type": inferredInteractionType, "data-row-state": inferredRowState, children: children }));
+};
+
+/** Flex - PatternFly Flex wrapper with semantic metadata for AI tooling */
+const Flex = ({ semanticName, semanticRole, aiMetadata, purpose, layoutType, alignmentContext, children, direction, justifyContent, alignItems, alignSelf, flex, spaceItems, gap, columnGap, rowGap, order, component, display, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props
+    const inferredPurpose = purpose || (justifyContent?.default === 'justifyContentSpaceBetween' ? 'toolbar' :
+        justifyContent?.default === 'justifyContentCenter' ? 'content' :
+            spaceItems ? 'action-group' :
+                'layout');
+    const inferredLayoutType = layoutType || (direction?.default === 'column' ? 'column' :
+        direction?.lg ? 'responsive' :
+            'row');
+    const inferredAlignmentContext = alignmentContext || (alignItems?.default === 'alignItemsCenter' ? 'center' :
+        alignItems?.default === 'alignItemsFlexEnd' ? 'end' :
+            alignItems?.default === 'alignItemsFlexStart' ? 'start' :
+                alignItems?.default === 'alignItemsStretch' ? 'stretch' :
+                    alignItems?.default === 'alignItemsBaseline' ? 'baseline' :
+                        'start');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `flex-${inferredPurpose}-${inferredLayoutType}`;
+    const metadata = aiMetadata || {
+        description: `${inferredPurpose} flex container with ${inferredLayoutType} layout`,
+        category: 'layout',
+        complexity: inferredLayoutType === 'responsive' ? 'medium' : 'simple',
+        usage: [`${inferredPurpose}-layout`, `${inferredLayoutType}-container`, 'responsive-design'],
+        alignment: inferredAlignmentContext,
+        layoutDirection: direction?.default || 'row'
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Flex Container';
+    return (jsx(Flex$1, { ...props, direction: direction, justifyContent: justifyContent, alignItems: alignItems, alignSelf: alignSelf, flex: flex, spaceItems: spaceItems, gap: gap, columnGap: columnGap, rowGap: rowGap, order: order, component: component, display: display, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-purpose": inferredPurpose, "data-layout-type": inferredLayoutType, "data-alignment-context": inferredAlignmentContext, children: children }));
+};
+
+/** FlexItem - PatternFly FlexItem wrapper with semantic metadata for AI tooling */
+const FlexItem = ({ semanticName, semanticRole, aiMetadata, contentType, positioningContext, sizingBehavior, children, flex, align, alignSelf, spacer, order, component, ...props }) => {
+    // Auto-infer semantic properties from PatternFly props
+    const inferredContentType = contentType || (React.Children.toArray(children).some(child => React.isValidElement(child) &&
+        (child.type?.toString().includes('Button') ||
+            child.props?.variant === 'primary' ||
+            child.props?.variant === 'secondary')) ? 'button' :
+        React.Children.toArray(children).some(child => React.isValidElement(child) &&
+            child.type?.toString().includes('Icon')) ? 'icon' :
+            React.Children.toArray(children).some(child => React.isValidElement(child) &&
+                (child.type?.toString().includes('Input') ||
+                    child.type?.toString().includes('Select') ||
+                    child.type?.toString().includes('Checkbox'))) ? 'form-control' :
+                React.Children.toArray(children).some(child => React.isValidElement(child) &&
+                    (child.type?.toString().includes('img') ||
+                        child.type?.toString().includes('Image'))) ? 'media' :
+                    React.Children.toArray(children).some(child => React.isValidElement(child) &&
+                        child.type?.toString().includes('Link')) ? 'navigation' :
+                        'text');
+    const inferredPositioningContext = positioningContext || (align?.default === 'alignRight' ? 'end' :
+        align?.default === 'alignLeft' ? 'start' :
+            align?.default === 'alignCenter' ? 'center' :
+                alignSelf?.default === 'alignSelfFlexEnd' ? 'end' :
+                    alignSelf?.default === 'alignSelfFlexStart' ? 'start' :
+                        alignSelf?.default === 'alignSelfCenter' ? 'center' :
+                            alignSelf?.default === 'alignSelfStretch' ? 'stretch' :
+                                alignSelf?.default === 'alignSelfBaseline' ? 'baseline' :
+                                    'auto');
+    const inferredSizingBehavior = sizingBehavior || (flex?.default === 'flex_1' ? 'flexible' :
+        flex?.default === 'flex_2' ? 'grow' :
+            flex?.default === 'flex_3' ? 'grow' :
+                flex?.default === 'flexNone' ? 'fixed' :
+                    flex?.default === 'flexDefault' ? 'auto' :
+                        flex?.default === 'flex_4' ? 'auto' :
+                            'auto');
+    // Generate semantic role and AI metadata
+    const role = semanticRole || `flex-item-${inferredContentType}-${inferredSizingBehavior}`;
+    const metadata = aiMetadata || {
+        description: `${inferredContentType} flex item with ${inferredSizingBehavior} sizing`,
+        category: 'layout',
+        complexity: 'simple',
+        usage: [`${inferredContentType}-item`, `${inferredSizingBehavior}-sizing`, 'flex-layout'],
+        positioning: inferredPositioningContext,
+        sizing: inferredSizingBehavior,
+        spacing: spacer?.default || 'none'
+    };
+    // Default semantic name if not provided
+    const defaultSemanticName = semanticName || 'Flex Item';
+    return (jsx(FlexItem$1, { ...props, flex: flex, align: align, alignSelf: alignSelf, spacer: spacer, order: order, component: component, "data-semantic-name": defaultSemanticName, "data-semantic-role": role, "data-ai-metadata": JSON.stringify(metadata), "data-content-type": inferredContentType, "data-positioning-context": inferredPositioningContext, "data-sizing-behavior": inferredSizingBehavior, children: children }));
+};
+
+/** Modal - PatternFly Modal wrapper with semantic metadata for AI tooling */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Modal = React.forwardRef(({ semanticName, semanticRole, aiMetadata: _aiMetadata, purpose, interactionType, triggeredBy, children, variant, isOpen, ...props }, ref) => {
+    // Register as visual parent in semantic context
+    const { addContext, removeContext } = useSemanticContext();
+    React.useEffect(() => {
+        addContext('Modal', undefined, true); // true = qualified visual parent
+        return () => removeContext();
+    }, [addContext, removeContext]);
+    // Get hierarchy from context
+    let hierarchy;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+    }
+    // Auto-infer semantic properties from PatternFly props
+    const inferredPurpose = purpose || inferModalPurpose({ variant });
+    const inferredInteractionType = interactionType || inferModalInteractionType(isOpen);
+    // Auto-infer triggeredBy from current hierarchy context
+    // Extract the semantic name of the last component (usually the triggering button)
+    const inferredTriggeredBy = triggeredBy || (hierarchy.fullPath ?
+        hierarchy.fullPath.split(' > ').pop() || 'unknown' : 'unknown');
+    // Generate semantic role
+    const role = semanticRole || `modal-${inferredPurpose}-${inferredInteractionType}`;
+    // Default semantic name if not provided
+    const componentName = semanticName || 'Modal';
+    return (jsx(Modal$1, { ...props, ref: ref, variant: variant, isOpen: isOpen, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-triggered-by": inferredTriggeredBy, "data-semantic-role": role, "data-purpose": inferredPurpose, "data-interaction-type": inferredInteractionType, children: children }));
+});
+Modal.displayName = 'Modal';
+
+/** Drawer - PatternFly Drawer wrapper with semantic metadata for AI tooling */
+const Drawer = ({ semanticName, semanticRole, purpose, children, isExpanded, ...props }) => {
+    // Register as visual parent in semantic context
+    const { addContext, removeContext } = useSemanticContext();
+    React.useEffect(() => {
+        addContext('Drawer', undefined, true); // true = qualified visual parent
+        return () => removeContext();
+    }, [addContext, removeContext]);
+    // Get hierarchy from context
+    let hierarchy;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+    }
+    // Auto-infer purpose if not provided
+    const inferredPurpose = purpose || 'details';
+    // Generate semantic role
+    const role = semanticRole || `drawer-${inferredPurpose}`;
+    // Default semantic name if not provided
+    const componentName = semanticName || 'Drawer';
+    return (jsx(Drawer$1, { ...props, isExpanded: isExpanded, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": role, "data-purpose": inferredPurpose, "data-is-expanded": isExpanded, children: children }));
+};
+
+const MenuToggle = ({ semanticName, semanticRole, aiMetadata, target, children, ...props }) => {
+    // Get hierarchy from context (optional)
+    let hierarchy;
+    let semanticContext;
+    try {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        semanticContext = useSemanticContext();
+    }
+    catch {
+        semanticContext = null;
+    }
+    const { addContext, removeContext, getHierarchy } = semanticContext || {
+        addContext: () => { },
+        removeContext: () => { },
+        getHierarchy: () => ({ fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 })
+    };
+    // Add "menu" context when this component mounts/renders
+    React.useEffect(() => {
+        addContext('Menu'); // Auto-detected as non-qualified (wrapper)
+        return () => removeContext();
+    }, [addContext, removeContext]);
+    hierarchy = getHierarchy();
+    const componentName = semanticName || 'Toggle';
+    const metadata = aiMetadata || {
+        hierarchy,
+        action: {
+            type: 'toggle',
+            target: target || 'menu'
+        }
+    };
+    return (jsx(MenuToggle$1, { ...props, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": semanticRole || 'menu-trigger', "data-ai-metadata": JSON.stringify(metadata), "data-target": target || 'menu', children: children }));
+};
+
+const DropdownItem = ({ semanticName, semanticRole, aiMetadata, target, children, ...props }) => {
+    // Get hierarchy from context (optional)
+    let hierarchy;
+    try {
+        const semanticContext = useSemanticContext();
+        hierarchy = semanticContext.getHierarchy();
+    }
+    catch {
+        hierarchy = { fullPath: '', qualifiedParents: [], wrappers: [], immediateParent: '', immediateWrapper: '', depth: 0 };
+    }
+    const componentName = semanticName || 'Action';
+    const metadata = aiMetadata || {
+        hierarchy,
+        action: {
+            type: 'menu-action',
+            target: target || 'default'
+        }
+    };
+    return (jsx(DropdownItem$1, { ...props, "data-semantic-name": componentName, "data-semantic-path": hierarchy.fullPath ? `${hierarchy.fullPath} > ${componentName}` : componentName, "data-parent": hierarchy.immediateParent || 'none', "data-wrapper": hierarchy.immediateWrapper || 'none', "data-num-parents": hierarchy.depth, "data-semantic-role": semanticRole || 'menu-item', "data-ai-metadata": JSON.stringify(metadata), "data-target": target || 'default', children: children }));
+};
+
+/**
+ * Utility functions for managing component metadata
+ */
+/**
+ * Generates default metadata for a component based on its type and props
+ */
+const generateComponentMetadata = (componentName, props = {}) => {
+    const baseMetadata = {
+        name: componentName,
+        description: `Semantic wrapper for ${componentName}`,
+        category: 'data-display',
+        accessibility: ['keyboard-navigable'],
+        usage: ['user-interface'],
+        props: props
+    };
+    // Customize based on component type
+    switch (componentName.toLowerCase()) {
+        case 'button':
+            return {
+                ...baseMetadata,
+                category: 'forms',
+                description: 'Interactive button with semantic meaning',
+                usage: ['user-interaction', 'form-submission', 'navigation']
+            };
+        case 'card':
+            return {
+                ...baseMetadata,
+                category: 'data-display',
+                description: 'Content container with semantic purpose',
+                usage: ['content-organization', 'data-presentation']
+            };
+        case 'modal':
+            return {
+                ...baseMetadata,
+                category: 'overlay',
+                description: 'Overlay dialog with semantic purpose',
+                accessibility: ['keyboard-navigable', 'focus-management', 'screen-reader-friendly'],
+                usage: ['user-interaction', 'workflow-step', 'confirmation']
+            };
+        default:
+            return baseMetadata;
+    }
+};
+/**
+ * Validates component metadata
+ */
+const validateMetadata = (metadata) => {
+    return !!(metadata.name &&
+        metadata.description &&
+        metadata.category &&
+        Array.isArray(metadata.accessibility) &&
+        Array.isArray(metadata.usage));
+};
+/**
+ * Merges user-provided metadata with defaults
+ */
+const mergeMetadata = (userMetadata, defaultMetadata) => {
+    return {
+        ...defaultMetadata,
+        ...userMetadata,
+        accessibility: [...defaultMetadata.accessibility, ...(userMetadata.accessibility || [])],
+        usage: [...defaultMetadata.usage, ...(userMetadata.usage || [])]
+    };
+};
+
+/**
+ * Accessibility utility functions
+ */
+/**
+ * Generates ARIA attributes based on component context
+ */
+const generateAriaAttributes = (componentType) => {
+    const baseAttributes = {};
+    switch (componentType.toLowerCase()) {
+        case 'button':
+            return {
+                ...baseAttributes,
+                role: 'button',
+                tabIndex: '0'
+            };
+        case 'card':
+            return {
+                ...baseAttributes,
+                role: 'region',
+                tabIndex: '0'
+            };
+        case 'modal':
+            return {
+                ...baseAttributes,
+                role: 'dialog',
+                'aria-modal': 'true',
+                tabIndex: '-1'
+            };
+        default:
+            return baseAttributes;
+    }
+};
+/**
+ * Validates accessibility requirements
+ */
+const validateAccessibility = (componentType, props) => {
+    const issues = [];
+    // Check for required ARIA attributes
+    if (componentType === 'button' && !props['aria-label'] && !props.children) {
+        issues.push('Button should have aria-label or visible text content');
+    }
+    if (componentType === 'modal' && !props['aria-labelledby'] && !props.title) {
+        issues.push('Modal should have aria-labelledby or title');
+    }
+    return issues;
+};
+/**
+ * Generates keyboard shortcuts metadata
+ */
+const generateKeyboardShortcuts = (componentType, context = {}) => {
+    const shortcuts = [];
+    switch (componentType.toLowerCase()) {
+        case 'button':
+            shortcuts.push('Enter', 'Space');
+            if (context.action === 'close') {
+                shortcuts.push('Escape');
+            }
+            break;
+        case 'modal':
+            shortcuts.push('Escape', 'Tab', 'Shift+Tab');
+            break;
+        case 'card':
+            if (context.interactive) {
+                shortcuts.push('Enter', 'Space');
+            }
+            break;
+    }
+    return shortcuts;
+};
+
+/**
+ * Hook for managing semantic metadata for components
+ */
+const useSemanticMetadata = (componentName, userMetadata, props = {}) => {
+    const [metadata, setMetadata] = React.useState(() => {
+        const defaultMetadata = generateComponentMetadata(componentName, props);
+        return userMetadata ? mergeMetadata(userMetadata, defaultMetadata) : defaultMetadata;
+    });
+    React.useEffect(() => {
+        const defaultMetadata = generateComponentMetadata(componentName, props);
+        const mergedMetadata = userMetadata ? mergeMetadata(userMetadata, defaultMetadata) : defaultMetadata;
+        setMetadata(mergedMetadata);
+    }, [componentName, userMetadata, props]);
+    const updateMetadata = (updates) => {
+        setMetadata(prev => ({ ...prev, ...updates }));
+    };
+    return {
+        metadata,
+        updateMetadata
+    };
+};
+
+/**
+ * Hook for managing accessibility features
+ */
+const useAccessibility = (componentType, props = {}, context = {}) => {
+    const ariaAttributes = React.useMemo(() => generateAriaAttributes(componentType), [componentType]);
+    const keyboardShortcuts = React.useMemo(() => generateKeyboardShortcuts(componentType, context), [componentType, context]);
+    const accessibilityIssues = React.useMemo(() => validateAccessibility(componentType, props), [componentType, props]);
+    const enhancedProps = React.useMemo(() => ({
+        ...props,
+        ...ariaAttributes,
+        'data-keyboard-shortcuts': keyboardShortcuts.join(','),
+        'data-accessibility-issues': accessibilityIssues.join(',')
+    }), [props, ariaAttributes, keyboardShortcuts, accessibilityIssues]);
+    return {
+        ariaAttributes,
+        keyboardShortcuts,
+        accessibilityIssues,
+        enhancedProps
+    };
+};
+
+export { Button, Card, Checkbox, Drawer, DropdownItem, Flex, FlexItem, Form, Link, MenuToggle, Modal, Radio, Select, SemanticProvider, StarIcon, StatusBadge, Switch, Tbody, Td, TextArea, TextInput, Th, Thead, Tr, generateAriaAttributes, generateComponentMetadata, generateKeyboardShortcuts, generateMetadataFromProps, inferAccessibilityFeatures, inferAlertSeverity, inferButtonAction, inferCardContentType, inferCardInteractiveState, inferCardPurpose, inferCategory, inferCheckboxPurpose, inferContext, inferFormContext, inferInputPurpose, inferLinkPurpose, inferModalInteractionType, inferModalPurpose, inferRadioGroupContext, inferRadioPurpose, inferSelectPurpose, inferSelectSelectionType, inferSettingsContext, inferStarIconPurpose, inferStatusBadgePurpose, inferStatusBadgeType, inferSwitchPurpose, inferSwitchToggleTarget, inferTextAreaContentType, inferTextAreaPurpose, inferUsagePatterns, inferValidationContext, isVisualParent, mergeMetadata, useAccessibility, useSemanticContext, useSemanticMetadata, validateAccessibility, validateMetadata };
+//# sourceMappingURL=index.esm.js.map