@qwickapps/react-framework 1.3.2 → 1.3.4

package/dist/index.js

@@ -15336,6 +15336,689 @@ const GridCell = props => {
 };
 GridCell.displayName = 'GridCell';
 
+/**
+ * CollapsibleLayout Schema - Data model for collapsible layout component
+ *
+ * Advanced expandable/collapsible container with header controls, animations,
+ * content management, and state persistence capabilities.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let CollapsibleLayoutModel = class CollapsibleLayoutModel extends schema.Model {};
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Collapsed',
+  description: 'Whether the layout is currently collapsed'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "collapsed", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Default Collapsed',
+  description: 'Initial collapsed state for uncontrolled usage'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "defaultCollapsed", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Title',
+  description: 'Main title displayed in the header',
+  placeholder: 'Enter title...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "title", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Subtitle',
+  description: 'Secondary text displayed below the title',
+  placeholder: 'Enter subtitle...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "subtitle", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Lead Icon',
+  description: 'Icon displayed before the title (icon identifier or HTML)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "leadIcon", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Header Actions',
+  description: 'Additional controls displayed in header (HTML/React content)',
+  placeholder: 'Enter header actions HTML...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "headerActions", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Collapsed View',
+  description: 'Summary content shown when collapsed (HTML supported)',
+  placeholder: 'Enter collapsed view content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "collapsedView", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Content',
+  description: 'Main content shown when expanded (HTML supported)',
+  placeholder: 'Enter main content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "children", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXTAREA,
+  label: 'Footer View',
+  description: 'Always visible footer content (HTML supported)',
+  placeholder: 'Enter footer content...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "footerView", void 0);
+__decorate([schema.Field({
+  defaultValue: 'header'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Trigger Area',
+  description: 'Area that responds to clicks for toggle functionality',
+  validation: {
+    options: [{
+      label: 'Button Only',
+      value: 'button'
+    }, {
+      label: 'Header Area',
+      value: 'header'
+    }, {
+      label: 'Button and Header',
+      value: 'both'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['button', 'header', 'both']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "triggerArea", void 0);
+__decorate([schema.Field({
+  defaultValue: 'slide'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Animation Style',
+  description: 'Animation variant for expand/collapse transitions',
+  validation: {
+    options: [{
+      label: 'Fade',
+      value: 'fade'
+    }, {
+      label: 'Slide',
+      value: 'slide'
+    }, {
+      label: 'Scale',
+      value: 'scale'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['fade', 'slide', 'scale']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "animationStyle", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Persist State',
+  description: 'Save collapse state in local storage'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "persistState", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Collapsed Icon',
+  description: 'Icon shown when content is collapsed (default: VisibilityIcon)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "collapsedIcon", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Expanded Icon',
+  description: 'Icon shown when content is expanded (default: VisibilityOffIcon)',
+  placeholder: 'Icon identifier...'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "expandedIcon", void 0);
+__decorate([schema.Field({
+  defaultValue: true
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Show Divider',
+  description: 'Show divider lines between header, content, and footer sections'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], CollapsibleLayoutModel.prototype, "showDivider", void 0);
+__decorate([schema.Field({
+  defaultValue: 'default'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Variant',
+  description: 'Visual style variant for the layout container',
+  validation: {
+    options: [{
+      label: 'Default',
+      value: 'default'
+    }, {
+      label: 'Outlined',
+      value: 'outlined'
+    }, {
+      label: 'Elevated',
+      value: 'elevated'
+    }, {
+      label: 'Filled',
+      value: 'filled'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['default', 'outlined', 'elevated', 'filled']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "variant", void 0);
+__decorate([schema.Field({
+  defaultValue: 'comfortable'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Header Spacing',
+  description: 'Padding/spacing within the header area',
+  validation: {
+    options: [{
+      label: 'Compact',
+      value: 'compact'
+    }, {
+      label: 'Comfortable',
+      value: 'comfortable'
+    }, {
+      label: 'Spacious',
+      value: 'spacious'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['compact', 'comfortable', 'spacious']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "headerSpacing", void 0);
+__decorate([schema.Field({
+  defaultValue: 'comfortable'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Content Spacing',
+  description: 'Padding/spacing within the content area',
+  validation: {
+    options: [{
+      label: 'Compact',
+      value: 'compact'
+    }, {
+      label: 'Comfortable',
+      value: 'comfortable'
+    }, {
+      label: 'Spacious',
+      value: 'spacious'
+    }]
+  }
+}), classValidator.IsOptional(), classValidator.IsIn(['compact', 'comfortable', 'spacious']), __metadata("design:type", String)], CollapsibleLayoutModel.prototype, "contentSpacing", void 0);
+CollapsibleLayoutModel = __decorate([schema.Schema('CollapsibleLayout', '1.0.0')], CollapsibleLayoutModel);
+var CollapsibleLayoutModel$1 = CollapsibleLayoutModel;
+
+/**
+ * TypeScript type definitions for CollapsibleLayout component
+ *
+ * Provides TypeScript interfaces that extend the schema model with React-specific types
+ * and component-level functionality for the CollapsibleLayout component.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+/**
+ * Type guard to check if a component has CollapsibleLayout props
+ */
+function isCollapsibleLayoutProps(props) {
+  return props && typeof props === 'object' && ('collapsed' in props || 'defaultCollapsed' in props);
+}
+/**
+ * Default props for CollapsibleLayout component
+ */
+const defaultCollapsibleLayoutProps = {
+  // Note: collapsed is intentionally omitted so components can be uncontrolled
+  defaultCollapsed: false,
+  triggerArea: 'both',
+  animationStyle: 'slide',
+  persistState: false,
+  showDivider: true,
+  variant: 'default',
+  headerSpacing: 'comfortable',
+  contentSpacing: 'comfortable',
+  animationDuration: 300,
+  disableAnimations: false,
+  toggleAriaLabel: 'Toggle content visibility'
+};
+const animationConfigs = {
+  fade: {
+    duration: 300,
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    opacity: [0, 1]
+  },
+  slide: {
+    duration: 300,
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    transform: 'translateY(-10px)'
+  },
+  scale: {
+    duration: 200,
+    easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    transform: 'scale(0.95)',
+    opacity: [0, 1]
+  }
+};
+const spacingConfigs = {
+  compact: {
+    padding: '8px 12px',
+    gap: '4px'
+  },
+  comfortable: {
+    padding: '16px 20px',
+    gap: '8px'
+  },
+  spacious: {
+    padding: '24px 32px',
+    gap: '16px'
+  }
+};
+
+/**
+ * Custom hook for managing collapsible state - simplified approach
+ */
+function useCollapsibleState(controlled, collapsedProp, defaultCollapsedProp, onToggleProp, persistState, storageKey) {
+  const id = React.useId();
+  const finalStorageKey = storageKey || `collapsible-${id}`;
+  // For controlled components, use the prop; for uncontrolled, use internal state
+  const [internalCollapsed, setInternalCollapsed] = React.useState(() => {
+    if (controlled) {
+      return collapsedProp ?? false;
+    }
+    // Try localStorage first if persistence is enabled
+    if (persistState && typeof window !== 'undefined') {
+      const stored = localStorage.getItem(finalStorageKey);
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultCollapsedProp ?? false;
+  });
+  // Sync with controlled prop changes
+  React.useEffect(() => {
+    if (controlled && collapsedProp !== undefined) {
+      setInternalCollapsed(collapsedProp);
+    }
+  }, [controlled, collapsedProp]);
+  // Persist to localStorage for uncontrolled components
+  React.useEffect(() => {
+    if (!controlled && persistState && typeof window !== 'undefined') {
+      localStorage.setItem(finalStorageKey, JSON.stringify(internalCollapsed));
+    }
+  }, [controlled, internalCollapsed, persistState, finalStorageKey]);
+  const toggle = React.useCallback(() => {
+    const currentState = controlled ? collapsedProp ?? false : internalCollapsed;
+    const newCollapsed = !currentState;
+    // Always update internal state for visual updates
+    setInternalCollapsed(newCollapsed);
+    // Call callback to notify parent
+    onToggleProp?.(newCollapsed);
+  }, [controlled, collapsedProp, internalCollapsed, onToggleProp]);
+  const setCollapsed = React.useCallback(collapsed => {
+    setInternalCollapsed(collapsed);
+    onToggleProp?.(collapsed);
+  }, [onToggleProp]);
+  // Return the appropriate state
+  const finalCollapsed = controlled ? collapsedProp ?? false : internalCollapsed;
+  return {
+    collapsed: finalCollapsed,
+    toggle,
+    setCollapsed,
+    isControlled: controlled
+  };
+}
+/**
+ * Core CollapsibleLayout View component
+ */
+function CollapsibleLayoutView({
+  // State props
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onToggle,
+  // Content props  
+  title,
+  subtitle,
+  leadIcon,
+  headerActions,
+  collapsedView,
+  children,
+  footerView,
+  // Behavior props
+  triggerArea = 'both',
+  animationStyle = 'slide',
+  persistState = false,
+  storageKey,
+  animationDuration = 300,
+  disableAnimations = false,
+  // Icons
+  collapsedIcon,
+  expandedIcon,
+  // Layout props
+  showDivider = true,
+  variant = 'default',
+  headerSpacing = 'comfortable',
+  contentSpacing = 'comfortable',
+  // Accessibility
+  toggleAriaLabel = 'Toggle content visibility',
+  'aria-describedby': ariaDescribedBy,
+  contentAriaProps = {},
+  // CSS classes
+  containerClassName,
+  headerClassName,
+  contentClassName,
+  footerClassName,
+  ...restProps
+}) {
+  const theme = material.useTheme();
+  const {
+    styleProps,
+    htmlProps,
+    restProps: otherProps
+  } = useBaseProps(restProps);
+  // Mark as QwickApp component
+  CollapsibleLayoutView[QWICKAPP_COMPONENT] = true;
+  // Determine controlled vs uncontrolled usage
+  const controlled = collapsedProp !== undefined;
+  // State management
+  const {
+    collapsed,
+    toggle,
+    setCollapsed
+  } = useCollapsibleState(controlled, collapsedProp, defaultCollapsed, onToggle, persistState, storageKey);
+  // Get spacing configurations
+  const headerSpacingConfig = spacingConfigs[headerSpacing];
+  const contentSpacingConfig = spacingConfigs[contentSpacing];
+  // Get animation configuration
+  const animationConfig = animationConfigs[animationStyle];
+  // Generate unique IDs for accessibility
+  const headerId = React.useId();
+  const contentId = React.useId();
+  // Handle click events
+  const handleHeaderClick = React.useCallback(event => {
+    if (triggerArea === 'header' || triggerArea === 'both') {
+      event.preventDefault();
+      toggle();
+    }
+  }, [triggerArea, toggle]);
+  const handleButtonClick = React.useCallback(event => {
+    event.stopPropagation();
+    toggle();
+  }, [toggle]);
+  // Render icons
+  const renderIcon = React.useCallback((icon, defaultIcon) => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      return icon;
+    }
+    if (typeof icon === 'string') {
+      return jsxRuntime.jsx(Html, {
+        children: icon
+      });
+    }
+    return defaultIcon;
+  }, []);
+  const toggleIcon = renderIcon(collapsed ? collapsedIcon : expandedIcon, collapsed ? jsxRuntime.jsx(iconsMaterial.ExpandMore, {}) : jsxRuntime.jsx(iconsMaterial.ExpandLess, {}));
+  // Container styles based on variant
+  const containerSx = React.useMemo(() => {
+    const baseSx = {
+      width: '100%',
+      position: 'relative',
+      ...styleProps.sx
+    };
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...baseSx,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          backgroundColor: 'var(--theme-surface)'
+        };
+      case 'elevated':
+        return {
+          ...baseSx,
+          boxShadow: theme.shadows[2],
+          borderRadius: 1,
+          backgroundColor: theme.palette.background.paper
+        };
+      case 'filled':
+        return {
+          ...baseSx,
+          backgroundColor: 'var(--theme-surface-variant)',
+          borderRadius: 1
+        };
+      default:
+        return baseSx;
+    }
+  }, [variant, theme, styleProps.sx]);
+  // Header styles
+  const headerSx = React.useMemo(() => ({
+    ...headerSpacingConfig,
+    cursor: triggerArea === 'header' || triggerArea === 'both' ? 'pointer' : 'default',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    '&:hover': triggerArea === 'header' || triggerArea === 'both' ? {
+      backgroundColor: 'rgba(0, 0, 0, 0.04)'
+    } : {}
+  }), [headerSpacingConfig, triggerArea]);
+  // Content styles
+  const contentSx = React.useMemo(() => ({
+    ...contentSpacingConfig
+  }), [contentSpacingConfig]);
+  // Animation props for Collapse component
+  const collapseProps = React.useMemo(() => {
+    if (disableAnimations) {
+      return {
+        timeout: 0
+      };
+    }
+    const baseProps = {
+      timeout: animationDuration
+    };
+    switch (animationStyle) {
+      case 'fade':
+        return {
+          ...baseProps,
+          sx: {
+            '& .MuiCollapse-wrapper': {
+              opacity: collapsed ? 0 : 1,
+              transition: `opacity ${animationDuration}ms ${animationConfig.easing}`
+            }
+          }
+        };
+      case 'scale':
+        return {
+          ...baseProps,
+          sx: {
+            '& .MuiCollapse-wrapper': {
+              transform: collapsed ? 'scale(0.95)' : 'scale(1)',
+              opacity: collapsed ? 0 : 1,
+              transition: `all ${animationDuration}ms ${animationConfig.easing}`
+            }
+          }
+        };
+      default:
+        // slide
+        return baseProps;
+    }
+  }, [disableAnimations, animationDuration, animationStyle, animationConfig, collapsed]);
+  // Render content based on type
+  const renderContent = React.useCallback(content => {
+    if (!content) return null;
+    if (typeof content === 'string') {
+      return jsxRuntime.jsx(Html, {
+        children: content
+      });
+    }
+    return content;
+  }, []);
+  // Container content that will be wrapped
+  const containerContent = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [(title || subtitle || leadIcon || headerActions || triggerArea === 'button' || triggerArea === 'both') && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsxs(material.Box, {
+        id: headerId,
+        className: headerClassName,
+        sx: headerSx,
+        onClick: handleHeaderClick,
+        role: triggerArea === 'header' || triggerArea === 'both' ? 'button' : undefined,
+        tabIndex: triggerArea === 'header' || triggerArea === 'both' ? 0 : undefined,
+        "aria-expanded": !collapsed,
+        "aria-controls": contentId,
+        "aria-describedby": ariaDescribedBy,
+        onKeyDown: e => {
+          if ((triggerArea === 'header' || triggerArea === 'both') && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            toggle();
+          }
+        },
+        children: [jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          spacing: 2,
+          alignItems: "center",
+          sx: {
+            minWidth: 0,
+            flex: 1
+          },
+          children: [leadIcon && jsxRuntime.jsx(material.Box, {
+            sx: {
+              flexShrink: 0
+            },
+            children: renderContent(leadIcon)
+          }), (title || subtitle) && jsxRuntime.jsxs(material.Box, {
+            sx: {
+              minWidth: 0,
+              flex: 1
+            },
+            children: [title && jsxRuntime.jsx(material.Typography, {
+              variant: "h6",
+              component: "h3",
+              sx: {
+                fontWeight: 600,
+                lineHeight: 1.2,
+                ...(subtitle && {
+                  mb: 0.5
+                })
+              },
+              children: title
+            }), subtitle && jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              color: "text.secondary",
+              sx: {
+                lineHeight: 1.3
+              },
+              children: subtitle
+            })]
+          })]
+        }), jsxRuntime.jsxs(material.Stack, {
+          direction: "row",
+          spacing: 1,
+          alignItems: "center",
+          sx: {
+            flexShrink: 0
+          },
+          children: [headerActions && jsxRuntime.jsx(material.Box, {
+            children: renderContent(headerActions)
+          }), jsxRuntime.jsx(material.IconButton, {
+            onClick: handleButtonClick,
+            size: "small",
+            "aria-label": toggleAriaLabel,
+            "aria-expanded": !collapsed,
+            "aria-controls": contentId,
+            children: toggleIcon
+          })]
+        })]
+      }), showDivider && jsxRuntime.jsx(material.Divider, {})]
+    }), collapsed && collapsedView && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.Box, {
+        className: contentClassName,
+        sx: contentSx,
+        children: renderContent(collapsedView)
+      }), showDivider && footerView && jsxRuntime.jsx(material.Divider, {})]
+    }), jsxRuntime.jsxs(material.Collapse, {
+      in: !collapsed,
+      ...collapseProps,
+      children: [jsxRuntime.jsx(material.Box, {
+        id: contentId,
+        className: contentClassName,
+        sx: contentSx,
+        role: "region",
+        "aria-labelledby": title ? headerId : undefined,
+        ...contentAriaProps,
+        children: renderContent(children)
+      }), showDivider && footerView && jsxRuntime.jsx(material.Divider, {})]
+    }), footerView && jsxRuntime.jsx(material.Box, {
+      className: footerClassName,
+      sx: contentSx,
+      children: renderContent(footerView)
+    })]
+  });
+  // Return appropriate container based on variant
+  if (variant === 'outlined') {
+    return jsxRuntime.jsx(material.Paper, {
+      variant: "outlined",
+      elevation: 0,
+      ...htmlProps,
+      ...otherProps,
+      className: containerClassName,
+      sx: containerSx,
+      children: containerContent
+    });
+  }
+  if (variant === 'elevated') {
+    return jsxRuntime.jsx(material.Paper, {
+      elevation: 2,
+      ...htmlProps,
+      ...otherProps,
+      className: containerClassName,
+      sx: containerSx,
+      children: containerContent
+    });
+  }
+  // Default variant (default, filled)
+  return jsxRuntime.jsx(material.Box, {
+    ...htmlProps,
+    ...otherProps,
+    className: containerClassName,
+    sx: containerSx,
+    children: containerContent
+  });
+}
+/**
+ * Main CollapsibleLayout component with data binding support
+ */
+function CollapsibleLayout(props) {
+  const {
+    dataSource,
+    bindingOptions,
+    ...restProps
+  } = props;
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return jsxRuntime.jsx(CollapsibleLayoutView, {
+      ...restProps
+    });
+  }
+  // Use data binding
+  const {
+    dataSource: _source,
+    loading,
+    error,
+    cached,
+    ...collapsibleProps
+  } = useDataBinding(dataSource, restProps, CollapsibleLayoutModel$1.getSchema(), {
+    cache: true,
+    cacheTTL: 300000,
+    strict: false,
+    ...bindingOptions
+  });
+  // Show loading state
+  if (loading) {
+    return jsxRuntime.jsx(CollapsibleLayoutView, {
+      ...restProps,
+      title: "Loading...",
+      variant: "default",
+      headerSpacing: "comfortable",
+      contentSpacing: "comfortable"
+    });
+  }
+  if (error) {
+    console.error('Error loading collapsible layout:', error);
+    {
+      return jsxRuntime.jsx(CollapsibleLayoutView, {
+        ...restProps,
+        title: "Error Loading Layout",
+        subtitle: error.message,
+        variant: "outlined",
+        headerSpacing: "comfortable",
+        contentSpacing: "comfortable"
+      });
+    }
+  }
+  return jsxRuntime.jsx(CollapsibleLayoutView, {
+    ...collapsibleProps
+  });
+}
+// Set default props
+CollapsibleLayout.defaultProps = defaultCollapsibleLayoutProps;
+
 /**
  * FeatureCard Schema - Schema definition for FeatureCard component
  *
@@ -18728,7 +19411,7 @@ function FormBlockView({
   title,
   description,
   coverImage,
-  form,
+  children: form,
   footer,
   status,
   message,
@@ -19686,8 +20369,195 @@ function SelectInputField(props) {
     strict: false,
     ...bindingOptions
   });
-  // Show loading state
-  if (loading) {
+  // Show loading state
+  if (loading) {
+    return jsxRuntime.jsxs(material.Paper, {
+      variant: "outlined",
+      sx: {
+        p: 2,
+        textAlign: 'center'
+      },
+      children: [jsxRuntime.jsx(material.Typography, {
+        variant: "body2",
+        children: "Loading SelectInputField..."
+      }), jsxRuntime.jsx(material.Typography, {
+        variant: "caption",
+        color: "text.secondary",
+        children: "Loading select field configuration from data source..."
+      })]
+    });
+  }
+  if (error) {
+    console.error('Error loading select input field:', error);
+    {
+      return jsxRuntime.jsx(material.Paper, {
+        variant: "outlined",
+        sx: {
+          p: 2,
+          textAlign: 'center',
+          borderColor: 'error.main'
+        },
+        children: jsxRuntime.jsxs(material.Typography, {
+          variant: "body2",
+          color: "error",
+          children: ["Error loading select field: ", error.message]
+        })
+      });
+    }
+  }
+  return jsxRuntime.jsx(SelectInputFieldView, {
+    ...selectInputFieldProps
+  });
+}
+// Mark as QwickApp component
+SelectInputField[QWICKAPP_COMPONENT] = true;
+
+/**
+ * SwitchInputField Schema - Data model for switch input field component
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+let SwitchInputFieldModel = class SwitchInputFieldModel extends schema.Model {};
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Label',
+  description: 'The label text for the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "label", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Checked',
+  description: 'Whether the switch is checked'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "checked", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Required',
+  description: 'Whether the field is required'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "required", void 0);
+__decorate([schema.Field({
+  defaultValue: false
+}), schema.Editor({
+  field_type: schema.FieldType.BOOLEAN,
+  label: 'Disabled',
+  description: 'Whether the field is disabled'
+}), classValidator.IsOptional(), classValidator.IsBoolean(), __metadata("design:type", Boolean)], SwitchInputFieldModel.prototype, "disabled", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Error',
+  description: 'Error message to display'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "error", void 0);
+__decorate([schema.Field(), schema.Editor({
+  field_type: schema.FieldType.TEXT,
+  label: 'Helper Text',
+  description: 'Helper text to display below the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "helperText", void 0);
+__decorate([schema.Field({
+  defaultValue: 'medium'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Size',
+  description: 'Size of the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "size", void 0);
+__decorate([schema.Field({
+  defaultValue: 'primary'
+}), schema.Editor({
+  field_type: schema.FieldType.SELECT,
+  label: 'Color',
+  description: 'Color theme of the switch'
+}), classValidator.IsOptional(), classValidator.IsString(), __metadata("design:type", String)], SwitchInputFieldModel.prototype, "color", void 0);
+SwitchInputFieldModel = __decorate([schema.Schema('SwitchInputField', '1.0.0')], SwitchInputFieldModel);
+var SwitchInputFieldModel$1 = SwitchInputFieldModel;
+
+// View component - handles the actual rendering
+function SwitchInputFieldView({
+  label,
+  checked = false,
+  onChange,
+  onFocus,
+  required = false,
+  disabled = false,
+  error,
+  helperText,
+  size = 'medium',
+  color = 'primary',
+  ...restProps
+}) {
+  const {
+    styleProps,
+    htmlProps
+  } = useBaseProps(restProps);
+  const handleChange = event => {
+    if (onChange) {
+      onChange(event.target.checked);
+    }
+  };
+  return jsxRuntime.jsxs(material.FormControl, {
+    ...htmlProps,
+    ...styleProps,
+    error: !!error,
+    required: required,
+    disabled: disabled,
+    sx: {
+      display: 'block',
+      ...styleProps.sx
+    },
+    children: [jsxRuntime.jsx(material.FormControlLabel, {
+      control: jsxRuntime.jsx(material.Switch, {
+        checked: checked,
+        onChange: handleChange,
+        onFocus: onFocus,
+        size: size,
+        color: color,
+        disabled: disabled
+      }),
+      label: label,
+      disabled: disabled
+    }), (error || helperText) && jsxRuntime.jsx(material.FormHelperText, {
+      children: error || helperText
+    })]
+  });
+}
+/**
+ * SwitchInputField component with data binding support
+ * Supports both traditional props and dataSource-driven rendering
+ */
+function SwitchInputField(props) {
+  const {
+    dataSource,
+    bindingOptions,
+    ...restProps
+  } = props;
+  // If no dataSource, use traditional props
+  if (!dataSource) {
+    return jsxRuntime.jsx(SwitchInputFieldView, {
+      ...restProps
+    });
+  }
+  // Use data binding
+  const bindingResult = useDataBinding(dataSource, restProps, SwitchInputFieldModel$1.getSchema(), {
+    cache: true,
+    cacheTTL: 300000,
+    strict: false,
+    ...bindingOptions
+  });
+  // Check if we're still loading data using the metadata properties
+  const bindingLoading = bindingResult.$loading;
+  // Extract all the actual switch properties (excluding metadata)
+  const {
+    dataSource: _source,
+    $loading,
+    $error,
+    $dataSource,
+    $cached,
+    cached,
+    ...switchInputFieldProps
+  } = bindingResult;
+  const error = bindingResult.$error;
+  // Show loading state while fetching data
+  if (bindingLoading) {
     return jsxRuntime.jsxs(material.Paper, {
       variant: "outlined",
       sx: {
@@ -19696,16 +20566,16 @@ function SelectInputField(props) {
       },
       children: [jsxRuntime.jsx(material.Typography, {
         variant: "body2",
-        children: "Loading SelectInputField..."
+        children: "Loading SwitchInputField..."
       }), jsxRuntime.jsx(material.Typography, {
         variant: "caption",
         color: "text.secondary",
-        children: "Loading select field configuration from data source..."
+        children: "Loading switch field configuration from data source..."
       })]
     });
   }
   if (error) {
-    console.error('Error loading select input field:', error);
+    console.error('Error loading switch input field:', error);
     {
       return jsxRuntime.jsx(material.Paper, {
         variant: "outlined",
@@ -19717,17 +20587,17 @@ function SelectInputField(props) {
         children: jsxRuntime.jsxs(material.Typography, {
           variant: "body2",
           color: "error",
-          children: ["Error loading select field: ", error.message]
+          children: ["Error loading switch field: ", error.message]
         })
       });
     }
   }
-  return jsxRuntime.jsx(SelectInputFieldView, {
-    ...selectInputFieldProps
+  return jsxRuntime.jsx(SwitchInputFieldView, {
+    ...switchInputFieldProps
   });
 }
 // Mark as QwickApp component
-SelectInputField[QWICKAPP_COMPONENT] = true;
+SwitchInputField[QWICKAPP_COMPONENT] = true;
 
 const TextField = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -20225,7 +21095,7 @@ const FormPage = ({
     title: title,
     description: description,
     coverImage: coverImage,
-    form: form,
+    children: form,
     footer: footer,
     status: status,
     message: message,
@@ -20581,6 +21451,605 @@ const Scaffold = ({
 
 loggers.menu;
 
+/**
+ * Generic ErrorBoundary component for catching and handling React errors
+ *
+ * Features:
+ * - Catches JavaScript errors anywhere in child component tree
+ * - Displays fallback UI with retry functionality
+ * - Shows error details in development mode
+ * - Customizable error handling and fallback UI
+ * - Automatic error logging
+ */
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleRetry = () => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+    };
+    this.handleRefresh = () => {
+      if (typeof window !== 'undefined') {
+        window.location.reload();
+      }
+    };
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return {
+      hasError: true,
+      error,
+      errorInfo: null
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    // Log error details
+    this.setState({
+      error,
+      errorInfo
+    });
+    // Log to console for debugging
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    // Custom error handler
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+    // Send error to logging service if available
+    if (typeof window !== 'undefined') {
+      // @ts-ignore - Global error logging service
+      if (window.qwickapps?.logError) {
+        window.qwickapps.logError(error, errorInfo);
+      }
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      // Custom fallback UI
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      // Default error UI
+      return jsxRuntime.jsxs("div", {
+        className: "error-boundary",
+        role: "alert",
+        style: {
+          padding: '2rem',
+          textAlign: 'center',
+          backgroundColor: '#fef2f2',
+          border: '1px solid #fecaca',
+          borderRadius: '8px',
+          margin: '1rem',
+          color: '#991b1b'
+        },
+        children: [jsxRuntime.jsxs("div", {
+          style: {
+            marginBottom: '1.5rem'
+          },
+          children: [jsxRuntime.jsx("h2", {
+            style: {
+              fontSize: '1.5rem',
+              fontWeight: 'bold',
+              marginBottom: '0.5rem',
+              color: '#991b1b'
+            },
+            children: "Something went wrong"
+          }), jsxRuntime.jsx("p", {
+            style: {
+              color: '#7f1d1d',
+              marginBottom: '1rem'
+            },
+            children: "An unexpected error occurred in the application. Please try again or refresh the page."
+          })]
+        }), jsxRuntime.jsxs("div", {
+          style: {
+            display: 'flex',
+            gap: '0.75rem',
+            justifyContent: 'center',
+            marginBottom: '1rem'
+          },
+          children: [jsxRuntime.jsx(Button, {
+            variant: "contained",
+            onClick: this.handleRetry,
+            style: {
+              backgroundColor: '#dc2626',
+              color: 'white'
+            },
+            children: "Try Again"
+          }), jsxRuntime.jsx(Button, {
+            variant: "outlined",
+            onClick: this.handleRefresh,
+            style: {
+              borderColor: '#dc2626',
+              color: '#dc2626'
+            },
+            children: "Refresh Page"
+          })]
+        }), this.state.error && jsxRuntime.jsxs("details", {
+          style: {
+            textAlign: 'left',
+            marginTop: '1rem',
+            padding: '1rem',
+            backgroundColor: '#f9fafb',
+            border: '1px solid #d1d5db',
+            borderRadius: '6px'
+          },
+          children: [jsxRuntime.jsx("summary", {
+            style: {
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              marginBottom: '0.5rem',
+              color: '#374151'
+            },
+            children: "Error Details (Development Mode)"
+          }), jsxRuntime.jsxs("pre", {
+            style: {
+              fontSize: '0.75rem',
+              color: '#374151',
+              whiteSpace: 'pre-wrap',
+              overflow: 'auto'
+            },
+            children: [this.state.error.toString(), this.state.errorInfo?.componentStack && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), "Component Stack:", this.state.errorInfo.componentStack]
+            })]
+          })]
+        })]
+      });
+    }
+    return this.props.children;
+  }
+}
+/**
+ * Higher-order component that wraps a component with ErrorBoundary
+ */
+function withErrorBoundary(WrappedComponent, errorBoundaryProps) {
+  const WithErrorBoundaryComponent = props => jsxRuntime.jsx(ErrorBoundary, {
+    ...errorBoundaryProps,
+    children: jsxRuntime.jsx(WrappedComponent, {
+      ...props
+    })
+  });
+  WithErrorBoundaryComponent.displayName = `withErrorBoundary(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return WithErrorBoundaryComponent;
+}
+
+const AccessibilityContext = /*#__PURE__*/React.createContext(null);
+// Reducer
+const accessibilityReducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_HIGH_CONTRAST':
+      return {
+        ...state,
+        highContrast: action.payload
+      };
+    case 'SET_REDUCED_MOTION':
+      return {
+        ...state,
+        reducedMotion: action.payload
+      };
+    case 'SET_LARGE_TEXT':
+      return {
+        ...state,
+        largeText: action.payload
+      };
+    case 'SET_FOCUS_VISIBLE':
+      return {
+        ...state,
+        focusVisible: action.payload
+      };
+    case 'SET_KEYBOARD_USER':
+      return {
+        ...state,
+        isKeyboardUser: action.payload
+      };
+    case 'ADD_ISSUE':
+      return {
+        ...state,
+        issues: [...state.issues, action.payload]
+      };
+    case 'CLEAR_ISSUES':
+      return {
+        ...state,
+        issues: []
+      };
+    case 'SET_ANNOUNCEMENT':
+      return {
+        ...state,
+        lastAnnouncement: action.payload
+      };
+    default:
+      return state;
+  }
+};
+// Initial state
+const initialState = {
+  highContrast: false,
+  reducedMotion: false,
+  largeText: false,
+  focusVisible: true,
+  isKeyboardUser: false,
+  issues: [],
+  lastAnnouncement: null,
+  preferences: {}
+};
+// ARIA Live Manager
+class AriaLiveManager {
+  constructor() {
+    this.politeRegion = null;
+    this.assertiveRegion = null;
+    this.createLiveRegions();
+  }
+  createLiveRegions() {
+    if (typeof document === 'undefined') return;
+    // Polite announcements
+    this.politeRegion = document.createElement('div');
+    this.politeRegion.setAttribute('aria-live', 'polite');
+    this.politeRegion.setAttribute('aria-atomic', 'true');
+    this.politeRegion.setAttribute('id', 'qwickapps-aria-live-polite');
+    this.politeRegion.style.cssText = `
+			position: absolute !important;
+			left: -10000px !important;
+			width: 1px !important;
+			height: 1px !important;
+			overflow: hidden !important;
+		`;
+    document.body.appendChild(this.politeRegion);
+    // Assertive announcements
+    this.assertiveRegion = document.createElement('div');
+    this.assertiveRegion.setAttribute('aria-live', 'assertive');
+    this.assertiveRegion.setAttribute('aria-atomic', 'true');
+    this.assertiveRegion.setAttribute('id', 'qwickapps-aria-live-assertive');
+    this.assertiveRegion.style.cssText = `
+			position: absolute !important;
+			left: -10000px !important;
+			width: 1px !important;
+			height: 1px !important;
+			overflow: hidden !important;
+		`;
+    document.body.appendChild(this.assertiveRegion);
+  }
+  announce(message, level = 'polite') {
+    if (level === 'assertive') {
+      this.announceAssertive(message);
+    } else {
+      this.announcePolite(message);
+    }
+  }
+  announcePolite(message) {
+    if (!this.politeRegion) return;
+    this.politeRegion.textContent = '';
+    // Small delay ensures screen readers detect the change
+    setTimeout(() => {
+      if (this.politeRegion) {
+        this.politeRegion.textContent = message;
+      }
+    }, 100);
+  }
+  announceAssertive(message) {
+    if (!this.assertiveRegion) return;
+    this.assertiveRegion.textContent = '';
+    // Small delay ensures screen readers detect the change
+    setTimeout(() => {
+      if (this.assertiveRegion) {
+        this.assertiveRegion.textContent = message;
+      }
+    }, 100);
+  }
+}
+const ariaLiveManager = new AriaLiveManager();
+/**
+ * Accessibility Provider Component
+ * Provides comprehensive accessibility context and utilities
+ *
+ * Features:
+ * - System preference detection (high contrast, reduced motion)
+ * - Keyboard navigation detection
+ * - ARIA live announcements
+ * - Focus management
+ * - Accessibility auditing
+ * - Settings persistence
+ */
+const AccessibilityProvider = ({
+  children,
+  enableAudit = "development" === 'development'
+}) => {
+  const [state, dispatch] = React.useReducer(accessibilityReducer, initialState);
+  React.useEffect(() => {
+    // Detect user preferences from system
+    detectUserPreferences();
+    // Set up keyboard detection
+    const keyboardCleanup = setupKeyboardDetection();
+    // Initialize focus management
+    initializeFocusManagement();
+    // Run initial accessibility audit
+    if (enableAudit) {
+      runAccessibilityAudit();
+    }
+    // Cleanup
+    return () => {
+      if (keyboardCleanup) keyboardCleanup();
+    };
+  }, [enableAudit]);
+  const detectUserPreferences = () => {
+    if (typeof window === 'undefined') return;
+    // High contrast mode
+    if (window.matchMedia && window.matchMedia('(prefers-contrast: high)').matches) {
+      dispatch({
+        type: 'SET_HIGH_CONTRAST',
+        payload: true
+      });
+    }
+    // Reduced motion
+    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      dispatch({
+        type: 'SET_REDUCED_MOTION',
+        payload: true
+      });
+    }
+    // Listen for changes
+    if (window.matchMedia) {
+      const contrastMedia = window.matchMedia('(prefers-contrast: high)');
+      const motionMedia = window.matchMedia('(prefers-reduced-motion: reduce)');
+      const contrastHandler = e => {
+        dispatch({
+          type: 'SET_HIGH_CONTRAST',
+          payload: e.matches
+        });
+      };
+      const motionHandler = e => {
+        dispatch({
+          type: 'SET_REDUCED_MOTION',
+          payload: e.matches
+        });
+      };
+      contrastMedia.addEventListener('change', contrastHandler);
+      motionMedia.addEventListener('change', motionHandler);
+      // Return cleanup function
+      return () => {
+        contrastMedia.removeEventListener('change', contrastHandler);
+        motionMedia.removeEventListener('change', motionHandler);
+      };
+    }
+  };
+  const setupKeyboardDetection = () => {
+    if (typeof document === 'undefined') return;
+    let keyboardUser = false;
+    const handleKeyDown = e => {
+      if (e.key === 'Tab') {
+        keyboardUser = true;
+        dispatch({
+          type: 'SET_KEYBOARD_USER',
+          payload: true
+        });
+        document.body.classList.add('keyboard-user');
+      }
+    };
+    const handleMouseDown = () => {
+      if (keyboardUser) {
+        keyboardUser = false;
+        dispatch({
+          type: 'SET_KEYBOARD_USER',
+          payload: false
+        });
+        document.body.classList.remove('keyboard-user');
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handleMouseDown);
+    };
+  };
+  const initializeFocusManagement = () => {
+    if (typeof document === 'undefined') return;
+    // Enhanced focus indicators for keyboard users
+    const style = document.createElement('style');
+    style.textContent = `
+			.keyboard-user *:focus {
+				outline: 3px solid #005cee !important;
+				outline-offset: 2px !important;
+			}
+			
+			.high-contrast *:focus {
+				outline: 3px solid #ffffff !important;
+				outline-offset: 2px !important;
+				box-shadow: 0 0 0 1px #000000 !important;
+			}
+			
+			.reduced-motion * {
+				animation-duration: 0.01ms !important;
+				animation-iteration-count: 1 !important;
+				transition-duration: 0.01ms !important;
+			}
+			
+			.large-text {
+				font-size: 1.2em !important;
+			}
+		`;
+    document.head.appendChild(style);
+  };
+  const runAccessibilityAudit = () => {
+    if (typeof document === 'undefined') return;
+    setTimeout(() => {
+      const issues = [];
+      // Check for images without alt text
+      const images = document.querySelectorAll('img:not([alt])');
+      images.forEach(img => {
+        issues.push({
+          type: 'missing-alt-text',
+          message: 'Image missing alt attribute',
+          level: 'error',
+          element: img
+        });
+      });
+      // Check for buttons without accessible names
+      const buttons = document.querySelectorAll('button:not([aria-label]):not([title])');
+      buttons.forEach(button => {
+        if (!button.textContent?.trim()) {
+          issues.push({
+            type: 'unnamed-button',
+            message: 'Button missing accessible name',
+            level: 'error',
+            element: button
+          });
+        }
+      });
+      // Check for form inputs without labels
+      const inputs = document.querySelectorAll('input:not([aria-label]):not([title])');
+      inputs.forEach(input => {
+        const id = input.getAttribute('id');
+        if (id) {
+          const label = document.querySelector(`label[for="${id}"]`);
+          if (!label) {
+            issues.push({
+              type: 'unlabeled-input',
+              message: 'Form input missing label',
+              level: 'error',
+              element: input
+            });
+          }
+        } else {
+          issues.push({
+            type: 'unlabeled-input',
+            message: 'Form input missing label',
+            level: 'error',
+            element: input
+          });
+        }
+      });
+      dispatch({
+        type: 'CLEAR_ISSUES'
+      });
+      issues.forEach(issue => {
+        dispatch({
+          type: 'ADD_ISSUE',
+          payload: issue
+        });
+      });
+      if (issues.length > 0) {
+        console.group('🔍 Accessibility Issues Found');
+        issues.forEach(issue => {
+          const logMethod = issue.level === 'error' ? console.error : console.warn;
+          logMethod(`${issue.type}: ${issue.message}`);
+        });
+        console.groupEnd();
+      }
+    }, 1000);
+  };
+  // Context value
+  const contextValue = {
+    ...state,
+    // Actions
+    setHighContrast: enabled => dispatch({
+      type: 'SET_HIGH_CONTRAST',
+      payload: enabled
+    }),
+    setReducedMotion: enabled => dispatch({
+      type: 'SET_REDUCED_MOTION',
+      payload: enabled
+    }),
+    setLargeText: enabled => dispatch({
+      type: 'SET_LARGE_TEXT',
+      payload: enabled
+    }),
+    setFocusVisible: enabled => dispatch({
+      type: 'SET_FOCUS_VISIBLE',
+      payload: enabled
+    }),
+    // Utilities
+    announce: (message, level = 'polite') => {
+      ariaLiveManager.announce(message, level);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level,
+          timestamp: Date.now()
+        }
+      });
+    },
+    announcePolite: message => {
+      ariaLiveManager.announcePolite(message);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level: 'polite',
+          timestamp: Date.now()
+        }
+      });
+    },
+    announceAssertive: message => {
+      ariaLiveManager.announceAssertive(message);
+      dispatch({
+        type: 'SET_ANNOUNCEMENT',
+        payload: {
+          message,
+          level: 'assertive',
+          timestamp: Date.now()
+        }
+      });
+    },
+    addIssue: issue => dispatch({
+      type: 'ADD_ISSUE',
+      payload: issue
+    }),
+    clearIssues: () => dispatch({
+      type: 'CLEAR_ISSUES'
+    }),
+    // Audit function
+    runAudit: runAccessibilityAudit
+  };
+  // Apply CSS classes based on preferences
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    const {
+      highContrast,
+      reducedMotion,
+      largeText
+    } = state;
+    document.body.classList.toggle('high-contrast', highContrast);
+    document.body.classList.toggle('reduced-motion', reducedMotion);
+    document.body.classList.toggle('large-text', largeText);
+  }, [state.highContrast, state.reducedMotion, state.largeText]);
+  return jsxRuntime.jsx(AccessibilityContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+/**
+ * Hook to access accessibility context
+ */
+const useAccessibility = () => {
+  const context = React.useContext(AccessibilityContext);
+  if (!context) {
+    throw new Error('useAccessibility must be used within an AccessibilityProvider');
+  }
+  return context;
+};
+/**
+ * Higher-Order Component for accessibility enhancements
+ */
+const withAccessibility = WrappedComponent => {
+  const AccessibilityEnhancedComponent = props => {
+    const accessibility = useAccessibility();
+    return jsxRuntime.jsx(WrappedComponent, {
+      ...props,
+      accessibility: accessibility
+    });
+  };
+  AccessibilityEnhancedComponent.displayName = `withAccessibility(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return AccessibilityEnhancedComponent;
+};
+
 const QwickApp = ({
   children,
   className,
@@ -20642,16 +22111,20 @@ const QwickApp = ({
     dataSource: dataSource,
     children: content
   }) : content;
-  const appContent = jsxRuntime.jsx("div", {
-    className: `qwick-app ${className || ''}`,
-    style: style,
-    children: jsxRuntime.jsx(ThemeProvider, {
-      appId: appId,
-      defaultTheme: defaultTheme,
-      defaultPalette: defaultPalette,
-      children: jsxRuntime.jsx(QwickAppContext.Provider, {
-        value: contextValue,
-        children: wrappedContent
+  const appContent = jsxRuntime.jsx(ErrorBoundary, {
+    children: jsxRuntime.jsx(AccessibilityProvider, {
+      children: jsxRuntime.jsx("div", {
+        className: `qwick-app ${className || ''}`,
+        style: style,
+        children: jsxRuntime.jsx(ThemeProvider, {
+          appId: appId,
+          defaultTheme: defaultTheme,
+          defaultPalette: defaultPalette,
+          children: jsxRuntime.jsx(QwickAppContext.Provider, {
+            value: contextValue,
+            children: wrappedContent
+          })
+        })
       })
     })
   });
@@ -20759,6 +22232,186 @@ const setCSSVariable = (property, value) => {
   document.documentElement.style.setProperty(property, value);
 };
 
+/**
+ * Generic Breadcrumbs component for navigation hierarchy
+ *
+ * Features:
+ * - Accessible navigation with proper ARIA labels
+ * - Customizable separators and icons
+ * - Responsive design with item truncation
+ * - Support for custom navigation handlers
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ */
+const Breadcrumbs = ({
+  items,
+  separator = '/',
+  className = '',
+  onNavigate,
+  maxItems,
+  showRoot = true
+}) => {
+  // Filter and prepare items
+  let displayItems = showRoot ? items : items.slice(1);
+  // Handle max items with ellipsis
+  if (maxItems && displayItems.length > maxItems) {
+    const firstItems = displayItems.slice(0, 1);
+    const lastItems = displayItems.slice(-Math.max(1, maxItems - 2));
+    displayItems = [...firstItems, {
+      label: '...',
+      href: undefined,
+      current: false
+    }, ...lastItems];
+  }
+  const handleItemClick = (e, item, index) => {
+    if (onNavigate) {
+      e.preventDefault();
+      onNavigate(item, index);
+    }
+  };
+  const handleKeyDown = (e, item, index) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (onNavigate) {
+        onNavigate(item, index);
+      } else if (item.href) {
+        window.location.href = item.href;
+      }
+    }
+  };
+  if (displayItems.length <= 1) {
+    return null;
+  }
+  return jsxRuntime.jsx("nav", {
+    className: `breadcrumbs ${className}`,
+    role: "navigation",
+    "aria-label": "Breadcrumb navigation",
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: '14px',
+      color: '#6b7280',
+      ...defaultStyles.nav
+    },
+    children: jsxRuntime.jsx("ol", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0,
+        gap: '8px'
+      },
+      children: displayItems.map((item, index) => {
+        const isLast = index === displayItems.length - 1;
+        const isClickable = (item.href || onNavigate) && !item.current && item.label !== '...';
+        return jsxRuntime.jsxs("li", {
+          style: {
+            display: 'flex',
+            alignItems: 'center'
+          },
+          children: [isClickable ? jsxRuntime.jsxs("a", {
+            href: item.href,
+            onClick: e => handleItemClick(e, item, index),
+            onKeyDown: e => handleKeyDown(e, item, index),
+            style: {
+              ...defaultStyles.link,
+              color: isLast ? '#374151' : '#6b7280',
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px'
+            },
+            tabIndex: 0,
+            "aria-current": item.current ? 'page' : undefined,
+            children: [item.icon && jsxRuntime.jsx("span", {
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              "aria-hidden": "true",
+              children: item.icon
+            }), jsxRuntime.jsx("span", {
+              children: item.label
+            })]
+          }) : jsxRuntime.jsxs("span", {
+            style: {
+              ...defaultStyles.current,
+              color: isLast ? '#111827' : '#6b7280',
+              fontWeight: isLast ? 600 : 400,
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px'
+            },
+            "aria-current": item.current ? 'page' : undefined,
+            children: [item.icon && jsxRuntime.jsx("span", {
+              style: {
+                display: 'flex',
+                alignItems: 'center'
+              },
+              "aria-hidden": "true",
+              children: item.icon
+            }), jsxRuntime.jsx("span", {
+              children: item.label
+            })]
+          }), !isLast && jsxRuntime.jsx("span", {
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              marginLeft: '8px',
+              color: '#d1d5db',
+              fontSize: '12px'
+            },
+            "aria-hidden": "true",
+            children: separator
+          })]
+        }, `${item.label}-${index}`);
+      })
+    })
+  });
+};
+// Default styles
+const defaultStyles = {
+  nav: {
+    padding: '8px 0'
+  },
+  link: {
+    transition: 'color 0.2s ease',
+    cursor: 'pointer',
+    borderRadius: '4px',
+    padding: '4px',
+    margin: '-4px'
+  },
+  current: {
+    padding: '4px'
+  }
+};
+/**
+ * Hook for managing breadcrumb state
+ */
+const useBreadcrumbs = () => {
+  const [breadcrumbs, setBreadcrumbs] = React.useState([]);
+  const addBreadcrumb = React.useCallback(item => {
+    setBreadcrumbs(prev => [...prev, item]);
+  }, []);
+  const removeBreadcrumb = React.useCallback(index => {
+    setBreadcrumbs(prev => prev.filter((_, i) => i !== index));
+  }, []);
+  const setBreadcrumbsCurrent = React.useCallback(items => {
+    setBreadcrumbs(items);
+  }, []);
+  const clearBreadcrumbs = React.useCallback(() => {
+    setBreadcrumbs([]);
+  }, []);
+  return {
+    breadcrumbs,
+    addBreadcrumb,
+    removeBreadcrumb,
+    setBreadcrumbs: setBreadcrumbsCurrent,
+    clearBreadcrumbs
+  };
+};
+
 const QwickAppsLogo = props => {
   const {
     styleProps,
@@ -24226,18 +25879,23 @@ exports.ActionType = void 0;
 })(exports.ActionType || (exports.ActionType = {}));
 
 exports.AVAILABLE_PALETTES = AVAILABLE_PALETTES;
+exports.AccessibilityProvider = AccessibilityProvider;
 exports.AllPalettes = AllPalettes;
 exports.Article = Article;
 exports.BasePage = BasePage;
+exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.CardListGrid = CardListGrid;
 exports.ChoiceInputField = ChoiceInputField;
 exports.Code = Code;
+exports.CollapsibleLayout = CollapsibleLayout;
+exports.CollapsibleLayoutView = CollapsibleLayoutView;
 exports.Content = Content;
 exports.CoverImageHeader = CoverImageHeader;
 exports.DataProvider = DataProvider;
 exports.DataProxy = DataProxy;
 exports.DimensionsProvider = DimensionsProvider;
+exports.ErrorBoundary = ErrorBoundary;
 exports.FeatureCard = FeatureCard;
 exports.FeatureGrid = FeatureGrid;
 exports.Footer = Footer;
@@ -24267,16 +25925,19 @@ exports.QwickAppsLogo = QwickAppsLogo;
 exports.SafeSpan = SafeSpan;
 exports.Section = Section;
 exports.SelectInputField = SelectInputField;
+exports.SwitchInputField = SwitchInputField;
 exports.T = T;
 exports.TextField = TextField;
 exports.TextInputField = TextInputField;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
+exports.animationConfigs = animationConfigs;
 exports.applyCustomPalette = applyCustomPalette;
 exports.clearUserPalettePreference = clearUserPalettePreference;
 exports.clearUserThemePreference = clearUserThemePreference;
 exports.createLogger = createLogger;
 exports.createPaletteFromCurrentTheme = createPaletteFromCurrentTheme;
+exports.defaultCollapsibleLayoutProps = defaultCollapsibleLayoutProps;
 exports.deleteCustomPalette = deleteCustomPalette;
 exports.exportPalette = exportPalette;
 exports.getCSSVariable = getCSSVariable;
@@ -24291,6 +25952,7 @@ exports.getThemePerformanceStats = getThemePerformanceStats;
 exports.importPalette = importPalette;
 exports.initializePalette = initializePalette;
 exports.initializeTheme = initializeTheme;
+exports.isCollapsibleLayoutProps = isCollapsibleLayoutProps;
 exports.loadUserPalettePreference = loadUserPalettePreference;
 exports.loadUserThemePreference = loadUserThemePreference;
 exports.logThemePerformanceStats = logThemePerformanceStats;
@@ -24308,8 +25970,12 @@ exports.saveUserThemePreference = saveUserThemePreference;
 exports.setCSSVariable = setCSSVariable;
 exports.setPalette = setPalette;
 exports.setTheme = setTheme;
+exports.spacingConfigs = spacingConfigs;
 exports.t = t;
+exports.useAccessibility = useAccessibility;
 exports.useBaseProps = useBaseProps;
+exports.useBreadcrumbs = useBreadcrumbs;
+exports.useCollapsibleState = useCollapsibleState;
 exports.useData = useData;
 exports.useDataBinding = useDataBinding;
 exports.useDataContext = useDataContext;
@@ -24322,3 +25988,5 @@ exports.useSafeLocation = useSafeLocation;
 exports.useSafeNavigate = useSafeNavigate;
 exports.useTemplate = useTemplate;
 exports.useTheme = useTheme;
+exports.withAccessibility = withAccessibility;
+exports.withErrorBoundary = withErrorBoundary;