Form Generation

/**
 * Basic Form - from public/showcase/forms.
 */
export function mount(root) {
            // Common blueprints for examples
    const userBlueprint = {
              name: {
                type: 'string',
                label: 'Full Name',
                required: true,
                minLength: 2,
                formConfig: {
                  placeholder: 'Enter your full name'
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  placeholder: 'user@example.com'
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                min: 18,
                max: 120,
                formConfig: {
                  helperText: 'Must be between 18 and 120'
                }
              },
              role: {
                type: 'select',
                label: 'Role',
                options: [
                  {value: 'user', label: 'User'},
                  {value: 'moderator', label: 'Moderator'},
                  {value: 'admin', label: 'Administrator'}
                ],
                default: 'user'
              },
              newsletter: {
                type: 'boolean',
                label: 'Subscribe to Newsletter',
                default: false
              }
            };
    const sampleData = {
              name: 'Alice Johnson',
              email: 'alice@example.com',
              age: 28,
              role: 'user',
              newsletter: true
            };
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(root).find(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // The card is in demo.html behind data-if; keep the wrapper node, since
            // data-if detaches it (and puts the same node back) when the card is hidden.
    const wrapper = $(root).find('#basic-form-wrapper')[0];
    const shown = M.observable(false);
    const handle = M.applyBindings({shown}, root);
            // Basic Form Generation
    $(root).find('#generate-basic-form').on('click', () => {
              try {
                const form = Domma.forms.create(userBlueprint, sampleData, {
                  layout: 'grid',
                  columns: 2,
                  onSubmit: (data, formInstance) => {
                    logToOutput('#basic-form-output', 'Form submitted: ' + JSON.stringify(data, null, 2));
                  },
                  onValidationError: (errors, formInstance) => {
                    logToOutput('#basic-form-output', 'Validation errors: ' + JSON.stringify(errors, null, 2));
                  }
                });

                form.renderTo(wrapper);
                shown.value = true;
                logToOutput('#basic-form-output', 'Form generated successfully!');
              } catch (error) {
                logToOutput('#basic-form-output', 'Error: ' + error.message);
              }
            });
    $(root).find('#clear-basic-form').on('click', () => {
              shown.value = false;
              $(wrapper).empty();
              $(root).find('#basic-form-output').text('Cleared. Click "Generate Form" to create a new form...');
            });
    return () => handle.dispose();
}

/**
 * Layout Styles - from public/showcase/forms.
 */
export function mount(root) {
            // Common blueprints for examples
    const userBlueprint = {
              name: {
                type: 'string',
                label: 'Full Name',
                required: true,
                minLength: 2,
                formConfig: {
                  placeholder: 'Enter your full name'
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  placeholder: 'user@example.com'
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                min: 18,
                max: 120,
                formConfig: {
                  helperText: 'Must be between 18 and 120'
                }
              },
              role: {
                type: 'select',
                label: 'Role',
                options: [
                  {value: 'user', label: 'User'},
                  {value: 'moderator', label: 'Moderator'},
                  {value: 'admin', label: 'Administrator'}
                ],
                default: 'user'
              },
              newsletter: {
                type: 'boolean',
                label: 'Subscribe to Newsletter',
                default: false
              }
            };
    const sampleData = {
              name: 'Alice Johnson',
              email: 'alice@example.com',
              age: 28,
              role: 'user',
              newsletter: true
            };
            // The card is in demo.html behind data-if, its title bound to layoutType.
            // Keep the wrapper node: data-if detaches it (and puts the same node back).
    const wrapper = $(root).find('#layout-form-wrapper')[0];
    const shown = M.observable(false);
    const layoutType = M.observable('');
    const handle = M.applyBindings({shown, layoutType}, root);
            // Helper function to render layout forms into the card
    function renderLayoutForm(form, type) {
              form.renderTo(wrapper);
              layoutType.value = type;
              shown.value = true;
            }
            // Form Layouts
    $(root).find('#layout-stacked').on('click', () => {
              try {
                const form = Domma.forms.create(userBlueprint, sampleData, {
                  layout: 'stacked'
                });
                renderLayoutForm(form, 'Stacked');
              } catch (error) {
                console.error('Layout error:', error);
              }
            });
    $(root).find('#layout-grid').on('click', () => {
              try {
                const form = Domma.forms.create(userBlueprint, sampleData, {
                  layout: 'grid',
                  columns: 2
                });
                renderLayoutForm(form, 'Grid (2-col)');
              } catch (error) {
                console.error('Layout error:', error);
              }
            });
    $(root).find('#layout-sections').on('click', () => {
              try {
                const form = Domma.forms.create(userBlueprint, sampleData, {
                  layout: 'grid',
                  columns: 2,
                  sections: [
                    {
                      title: 'Personal Information',
                      fields: ['name', 'email', 'age']
                    },
                    {
                      title: 'Account Settings',
                      fields: ['role', 'newsletter']
                    }
                  ]
                });
                renderLayoutForm(form, 'With Sections');
              } catch (error) {
                console.error('Layout error:', error);
              }
            });
    $(root).find('#clear-layout-form').on('click', () => {
              shown.value = false;
              $(wrapper).empty();
            });
    return () => handle.dispose();
}

/**
 * Live demo - card single-select with required validation - from public/showcase/forms.
 */
export function mount(root) {
            // ===== Chooser Field =====
    let chooserFormInstance = null;
    const chooserOutput = $(root).find('#chooser-output')[0];
    const chooserContainer = $(root).find('#chooser-form-container')[0];
    const cardChooserBlueprint = {
              plan: {
                type: 'chooser',
                variant: 'card',
                columns: 3,
                required: true,
                label: 'Choose your plan',
                options: [
                  { value: 'starter', label: 'Starter', icon: 'rocket',
                    description: 'For solo builders.' },
                  { value: 'pro',     label: 'Pro',     icon: 'zap',
                    description: 'Teams up to 10.', recommended: true,
                    badge: { text: 'POPULAR', type: 'success' } },
                  { value: 'ent',     label: 'Enterprise', icon: 'briefcase',
                    description: 'Custom limits + SSO.' }
                ]
              }
            };
    const chipChooserBlueprint = {
              tags: {
                type: 'chooser',
                variant: 'chip',
                multiple: true,
                label: 'Pick your tags',
                options: [
                  { value: 'js',   label: 'JavaScript', icon: 'code' },
                  { value: 'css',  label: 'CSS',        icon: 'palette' },
                  { value: 'a11y', label: 'A11y',       icon: 'eye' },
                  { value: 'perf', label: 'Performance', icon: 'zap' },
                  { value: 'wasm', label: 'WASM',       icon: 'cpu', disabled: true }
                ]
              }
            };
    const visualChooserBlueprint = {
              plan: {
                type: 'chooser',
                variant: 'card',
                columns: 3,
                required: true,
                label: 'Glow + accent demo',
                accent: '#ec4899',
                accentStyle: 'glow',
                glow: true,
                glowColour: '#ec4899',
                shadow: 'lg',
                options: [
                  { value: 'starter', label: 'Starter', icon: 'rocket',  description: 'For solo builders.' },
                  { value: 'pro',     label: 'Pro',     icon: 'zap',     description: 'Teams up to 10.',
                    recommended: true, badge: { text: 'POPULAR', type: 'success' } },
                  { value: 'ent',     label: 'Enterprise', icon: 'briefcase', description: 'Custom limits + SSO.' }
                ]
              }
            };
    const renderChooser = (blueprint) => {
              chooserContainer.replaceChildren();
              chooserFormInstance = Domma.forms.create(blueprint);
              chooserFormInstance.renderTo('#chooser-form-container');
              chooserOutput.textContent = 'Form rendered. Pick an option, then click "Validate" or "Get values".';
            };
    $(root).find('#chooser-card-generate').on('click', () => renderChooser(cardChooserBlueprint));
    $(root).find('#chooser-chip-generate').on('click', () => renderChooser(chipChooserBlueprint));
    $(root).find('#chooser-visual-generate').on('click', () => renderChooser(visualChooserBlueprint));
    $(root).find('#chooser-validate').on('click', () => {
              if (!chooserFormInstance) {
                chooserOutput.textContent = 'Generate a chooser first.';
                return;
              }
              const ok = chooserFormInstance.validate();
              chooserOutput.textContent = ok
                ? 'Validation passed.'
                : 'Validation failed: ' + JSON.stringify(chooserFormInstance.errors, null, 2);
            });
    $(root).find('#chooser-submit').on('click', () => {
              if (!chooserFormInstance) {
                chooserOutput.textContent = 'Generate a chooser first.';
                return;
              }
              chooserOutput.textContent = JSON.stringify(chooserFormInstance.getData(), null, 2);
            });
    $(root).find('#chooser-clear').on('click', () => {
              chooserContainer.replaceChildren();
              chooserFormInstance = null;
              chooserOutput.textContent = 'Submit or validate to see captured values';
            });
}

/**
 * Modal Forms - from public/showcase/forms.
 */
export function mount(root) {
            // Common blueprints for examples
    const userBlueprint = {
              name: {
                type: 'string',
                label: 'Full Name',
                required: true,
                minLength: 2,
                formConfig: {
                  placeholder: 'Enter your full name'
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  placeholder: 'user@example.com'
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                min: 18,
                max: 120,
                formConfig: {
                  helperText: 'Must be between 18 and 120'
                }
              },
              role: {
                type: 'select',
                label: 'Role',
                options: [
                  {value: 'user', label: 'User'},
                  {value: 'moderator', label: 'Moderator'},
                  {value: 'admin', label: 'Administrator'}
                ],
                default: 'user'
              },
              newsletter: {
                type: 'boolean',
                label: 'Subscribe to Newsletter',
                default: false
              }
            };
    const sampleData = {
              name: 'Alice Johnson',
              email: 'alice@example.com',
              age: 28,
              role: 'user',
              newsletter: true
            };
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // Modal Forms
    $(root).find('#open-edit-modal').on('click', () => {
              try {
                const modal = Domma.forms.modal(userBlueprint, sampleData, {
                  title: 'Edit User Profile',
                  size: 'medium',
                  saveText: 'Update Profile',
                  onSave: async (formData, formInstance) => {
                    logToOutput('#modal-form-output', 'User updated: ' + JSON.stringify(formData, null, 2));
                  },
                  onError: (error, formData, formInstance) => {
                    logToOutput('#modal-form-output', 'Error: ' + error.message);
                  }
                });
                modal.open();
              } catch (error) {
                logToOutput('#modal-form-output', 'Modal error: ' + error.message);
              }
            });
    $(root).find('#open-create-modal').on('click', () => {
              try {
                const modal = Domma.forms.modal(userBlueprint, {}, {
                  title: 'Create New User',
                  size: 'medium',
                  saveText: 'Create User',
                  onSave: async (formData, formInstance) => {
                    logToOutput('#modal-form-output', 'User created: ' + JSON.stringify(formData, null, 2));
                  },
                  onError: (error, formData, formInstance) => {
                    logToOutput('#modal-form-output', 'Error: ' + error.message);
                  }
                });
                modal.open();
              } catch (error) {
                logToOutput('#modal-form-output', 'Modal error: ' + error.message);
              }
            });
}

/**
 * Registration Wizard - from public/showcase/forms.
 */
export function mount(root) {
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // Wizard Component
    $(root).find('#open-wizard').on('click', () => {
              try {
                // Show the wizard container
                $(root).find('#wizard-container').show();

                const wizard = Domma.forms.wizard('#wizard-container', {
                  blueprint: {
                    steps: [
                      {
                        title: 'Account Details',
                        description: 'Basic account information',
                        fields: [
                          {
                            name: 'username',
                            type: 'text',
                            label: 'Username',
                            required: true,
                            validation: {
                              minLength: 3
                            }
                          },
                          {
                            name: 'email',
                            type: 'email',
                            label: 'Email Address',
                            required: true
                          }
                        ]
                      },
                      {
                        title: 'Profile Information',
                        description: 'Tell us about yourself',
                        fields: [
                          {
                            name: 'name',
                            type: 'text',
                            label: 'Full Name',
                            required: true
                          },
                          {
                            name: 'bio',
                            type: 'textarea',
                            label: 'Biography',
                            formConfig: {
                              rows: 3
                            }
                          }
                        ]
                      },
                      {
                        title: 'Preferences',
                        description: 'Customize your experience',
                        fields: [
                          {
                            name: 'theme',
                            type: 'select',
                            label: 'Theme',
                            options: [
                              {value: 'light', label: 'Light'},
                              {value: 'dark', label: 'Dark'}
                            ]
                          },
                          {
                            name: 'notifications',
                            type: 'checkbox',
                            label: 'Enable Notifications'
                          }
                        ]
                      }
                    ]
                  },
                  layout: 'grid',
                  cols: 2,
                  finishText: 'Complete Registration',
                  onSubmit: (allData) => {
                    logToOutput('#wizard-output', 'Wizard completed! Data: ' + JSON.stringify(allData, null, 2));
                    $(root).find('#wizard-container').hide();
                  },
                  onStepChange: (step, data) => {
                    logToOutput('#wizard-output', `Moved to step ${step + 1}: ${JSON.stringify(data, null, 2)}`);
                  },
                  onValidation: (isValid, errors, step) => {
                    if (!isValid) {
                      logToOutput('#wizard-output', `Validation failed on step ${step + 1}: ${errors.join(', ')}`);
                    }
                  },
                  onError: (error) => {
                    logToOutput('#wizard-output', 'Wizard error: ' + error.message);
                  }
                });

                logToOutput('#wizard-output', 'Wizard created successfully! Use the navigation buttons to proceed.');
              } catch (error) {
                logToOutput('#wizard-output', 'Wizard error: ' + error.message);
                console.error('Wizard creation error:', error);
              }
            });
}

/**
 * CRUD Operations (Mock Data) - from public/showcase/forms.
 */
export function mount(root) {
            // Common blueprints for examples
    const userBlueprint = {
              name: {
                type: 'string',
                label: 'Full Name',
                required: true,
                minLength: 2,
                formConfig: {
                  placeholder: 'Enter your full name'
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  placeholder: 'user@example.com'
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                min: 18,
                max: 120,
                formConfig: {
                  helperText: 'Must be between 18 and 120'
                }
              },
              role: {
                type: 'select',
                label: 'Role',
                options: [
                  {value: 'user', label: 'User'},
                  {value: 'moderator', label: 'Moderator'},
                  {value: 'admin', label: 'Administrator'}
                ],
                default: 'user'
              },
              newsletter: {
                type: 'boolean',
                label: 'Subscribe to Newsletter',
                default: false
              }
            };
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // Mock CRUD Data
    let mockUsers = [
              {id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'admin', age: 28},
              {id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'user', age: 34},
              {id: 3, name: 'Carol White', email: 'carol@example.com', role: 'moderator', age: 29}
            ];
    let nextId = 4;
            // Mock CRUD Helper (simplified version)
    let crudTable = null;
    function initMockCrud() {
              // Create table
              const columns = [
                {key: 'id', title: 'ID', sortable: true, width: '60px'},
                {key: 'name', title: 'Name', sortable: true},
                {key: 'email', title: 'Email', sortable: true},
                {key: 'role', title: 'Role', sortable: true},
                {key: 'age', title: 'Age', sortable: true},
                {
                  key: 'actions',
                  title: 'Actions',
                  sortable: false,
                  render: (value, row) => `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary crud-edit-btn" data-id="${row.id}">
                                <span data-icon="edit" data-icon-size="16"></span>
                                Edit
                            </button>
                            <button class="btn btn-outline-danger crud-delete-btn" data-id="${row.id}">
                                <span data-icon="trash" data-icon-size="16"></span>
                                Delete
                            </button>
                        </div>
                    `
                }
              ];

              crudTable = Domma.tables.create('#crud-users-table', {
                data: mockUsers,
                columns,
                pagination: true,
                pageSize: 10,
                striped: true,
                exportPanel: true
              });

              logToOutput('#crud-output', 'CRUD table initialized with ' + mockUsers.length + ' users');
            }
            // CRUD Event Handlers
    $(root).find('.crud-add-btn').on('click', () => {
              try {
                const modal = Domma.forms.modal(userBlueprint, {}, {
                  title: 'Add New User',
                  saveText: 'Add User',
                  onSave: async (formData) => {
                    const newUser = {...formData, id: nextId++};
                    mockUsers.push(newUser);
                    if (crudTable) {
                      crudTable.setData([...mockUsers]);
                    }
                    logToOutput('#crud-output', 'User added: ' + JSON.stringify(newUser));
                  }
                });
                modal.open();
              } catch (error) {
                logToOutput('#crud-output', 'Add user error: ' + error.message);
              }
            });
    $(root).find('.crud-refresh-btn').on('click', () => {
              if (crudTable) {
                crudTable.setData([...mockUsers]);
                logToOutput('#crud-output', 'Table refreshed');
              }
            });
            // Event delegation for edit/delete buttons, on the demo (it goes when the demo resets)
    $(root).on('click', '.crud-edit-btn', function () {
              const userId = parseInt($(this).attr('data-id'));
              const user = mockUsers.find(u => u.id === userId);
              if (user) {
                try {
                  const modal = Domma.forms.modal(userBlueprint, user, {
                    title: `Edit User: ${user.name}`,
                    saveText: 'Update User',
                    onSave: async (formData) => {
                      const index = mockUsers.findIndex(u => u.id === userId);
                      if (index !== -1) {
                        mockUsers[index] = {...mockUsers[index], ...formData};
                        if (crudTable) {
                          crudTable.setData([...mockUsers]);
                        }
                        logToOutput('#crud-output', 'User updated: ' + JSON.stringify(mockUsers[index]));
                      }
                    }
                  });
                  modal.open();
                } catch (error) {
                  logToOutput('#crud-output', 'Edit user error: ' + error.message);
                }
              }
            });
    $(root).on('click', '.crud-delete-btn', async function () {
              const userId = parseInt($(this).attr('data-id'));
              const user = mockUsers.find(u => u.id === userId);
              if (user) {
                const confirmed = await E.confirm(
                  `Delete user "${user.name}"?\n\nThis action cannot be undone.`,
                  {title: 'Confirm Delete', confirmText: 'Delete'}
                );

                if (confirmed) {
                  const index = mockUsers.findIndex(u => u.id === userId);
                  if (index !== -1) {
                    mockUsers.splice(index, 1);
                    if (crudTable) {
                      crudTable.setData([...mockUsers]);
                    }
                    logToOutput('#crud-output', 'User deleted: ' + user.name);
                  }
                }
              }
            });
            // Initialize CRUD on page load
    initMockCrud();
}

/**
 * Form Validation - from public/showcase/forms.
 */
export function mount(root) {
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(root).find(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // Validation Form
    const validationBlueprint = {
              username: {
                type: 'string',
                label: 'Username',
                required: true,
                minLength: 3,
                maxLength: 20,
                pattern: /^[a-zA-Z0-9_]+$/,
                formConfig: {
                  hint: 'Only letters, numbers, and underscores',
                  placeholder: 'Enter username'
                },
                validate: (value) => {
                  if (value.toLowerCase().includes('admin')) {
                    return 'Username cannot contain "admin"';
                  }
                  if (value.toLowerCase().includes('test')) {
                    return 'Username cannot contain "test"';
                  }
                  return true;
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  hint: 'Enter a valid email address',
                  placeholder: 'user@example.com'
                },
                validate: (value) => {
                  if (value.includes('spam')) {
                    return 'Email cannot contain "spam"';
                  }
                  return true;
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                required: true,
                min: 13,
                max: 120,
                formConfig: {
                  hint: 'Must be between 13 and 120',
                  placeholder: 'Enter your age'
                },
                validate: (value) => {
                  const num = parseInt(value);
                  if (num < 13) return 'Must be at least 13 years old';
                  if (num > 120) return 'Age cannot exceed 120';
                  if (num >= 13 && num < 18) return 'Warning: Under 18 requires parental consent';
                  return true;
                }
              },
              password: {
                type: 'password',
                label: 'Password',
                required: true,
                minLength: 8,
                formConfig: {
                  hint: 'At least 8 characters with uppercase, number, and special character',
                  placeholder: 'Enter secure password'
                },
                validate: (value) => {
                  if (!/[A-Z]/.test(value)) return 'Must contain uppercase letter';
                  if (!/[a-z]/.test(value)) return 'Must contain lowercase letter';
                  if (!/[0-9]/.test(value)) return 'Must contain number';
                  if (!/[!@#$%^&*(),.?":{}|<>]/.test(value)) return 'Must contain special character';
                  return true;
                }
              },
              confirmPassword: {
                type: 'password',
                label: 'Confirm Password',
                required: true,
                formConfig: {
                  hint: 'Re-enter the password above',
                  placeholder: 'Confirm password'
                },
                validate: (value, allData) => {
                  if (!value) return 'Password confirmation is required';
                  return value === allData.password || 'Passwords do not match';
                }
              }
            };
            // The card is in demo.html behind data-if; keep the wrapper node, since
            // data-if detaches it (and puts the same node back) when the card is hidden.
    const wrapper = $(root).find('#validation-form-wrapper')[0];
    const shown = M.observable(false);
    const handle = M.applyBindings({shown}, root);
    $(root).find('#generate-validation-form').on('click', () => {
              try {
                const form = Domma.forms.create(validationBlueprint, {}, {
                  validationMode: 'blur',
                  layout: 'grid',
                  columns: 2,
                  onSubmit: (data, formInstance) => {
                    logToOutput('#validation-output', 'Validation form submitted: ' + JSON.stringify(data, null, 2));
                  },
                  onValidationError: (errors, formInstance) => {
                    logToOutput('#validation-output', 'Validation errors: ' + JSON.stringify(errors, null, 2));
                  }
                });

                form.renderTo(wrapper);
                shown.value = true;
                logToOutput('#validation-output', 'Validation form generated. Try entering invalid data to see validation in action.');
              } catch (error) {
                logToOutput('#validation-output', 'Error: ' + error.message);
              }
            });
    $(root).find('#clear-validation-form').on('click', () => {
              shown.value = false;
              $(wrapper).empty();
              $(root).find('#validation-output').text('Cleared. Click "Generate Validation Form" to create a new form...');
            });
    return () => handle.dispose();
}

/**
 * Model Integration - from public/showcase/forms.
 */
export function mount(root) {
            // Common blueprints for examples
    const userBlueprint = {
              name: {
                type: 'string',
                label: 'Full Name',
                required: true,
                minLength: 2,
                formConfig: {
                  placeholder: 'Enter your full name'
                }
              },
              email: {
                type: 'email',
                label: 'Email Address',
                required: true,
                pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                formConfig: {
                  placeholder: 'user@example.com'
                }
              },
              age: {
                type: 'number',
                label: 'Age',
                min: 18,
                max: 120,
                formConfig: {
                  helperText: 'Must be between 18 and 120'
                }
              },
              role: {
                type: 'select',
                label: 'Role',
                options: [
                  {value: 'user', label: 'User'},
                  {value: 'moderator', label: 'Moderator'},
                  {value: 'admin', label: 'Administrator'}
                ],
                default: 'user'
              },
              newsletter: {
                type: 'boolean',
                label: 'Subscribe to Newsletter',
                default: false
              }
            };
    const sampleData = {
              name: 'Alice Johnson',
              email: 'alice@example.com',
              age: 28,
              role: 'user',
              newsletter: true
            };
            // Log function for outputs
    function logToOutput(selector, message) {
              const output = $(root).find(selector);
              if (output.length === 0) {
                console.warn('Output element not found:', selector);
                return;
              }
              const timestamp = D().format('HH:mm:ss');
              output.text(output.text() + `[${timestamp}] ${message}\n`);
              if (output[0]) {
                output.scrollTop(output[0].scrollHeight);
              }
            }
            // The card is in demo.html behind data-if; keep the wrapper node, since
            // data-if detaches it (and puts the same node back) when the card is hidden.
    const wrapper = $(root).find('#model-form-wrapper')[0];
    const shown = M.observable(false);
    const handle = M.applyBindings({shown}, root);
            // Model Integration
    let userModel = null;
    $(root).find('#create-model-form').on('click', () => {
              try {
                // Create model with persistence
                userModel = M.create(userBlueprint, sampleData, {
                  persist: 'forms-showcase-user'
                });

                // Listen for model changes
                userModel.onChange((changes) => {
                  logToOutput('#model-output', 'Model changed: ' + JSON.stringify(changes, null, 2));
                });

                const form = Domma.forms.create(userBlueprint, userModel.get(), {
                  layout: 'grid',
                  columns: 2,
                  onSubmit: (data, formInstance) => {
                    userModel.set(data);
                    userModel.save(); // Explicitly save to localStorage
                    logToOutput('#model-output', 'Form submitted and model updated: ' + JSON.stringify(data, null, 2));
                    logToOutput('#model-output', 'Data automatically saved to localStorage with key: forms-showcase-user');
                  },
                  onChange: (data, formInstance) => {
                    // Auto-save on field changes for real-time persistence
                    userModel.set(data);
                    userModel.save();
                  }
                });

                form.renderTo(wrapper);
                shown.value = true;
                logToOutput('#model-output', 'Model form created with persistence. Data will be saved to localStorage.');
              } catch (error) {
                logToOutput('#model-output', 'Error: ' + error.message);
              }
            });
    $(root).find('#load-saved-data').on('click', () => {
              if (userModel) {
                userModel.load();
                logToOutput('#model-output', 'Data loaded from localStorage: ' + JSON.stringify(userModel.get(), null, 2));
              } else {
                logToOutput('#model-output', 'No model created yet. Create a form first.');
              }
            });
    $(root).find('#clear-saved-data').on('click', () => {
              if (userModel) {
                userModel.clearStorage();
                logToOutput('#model-output', 'Saved data cleared from localStorage.');
              } else {
                S.remove('forms-showcase-user');
                logToOutput('#model-output', 'Storage cleared manually.');
              }
            });
    return () => handle.dispose();
}

/**
 * Domma Forms Reference - from public/showcase/forms.
 */
export function mount(root) {
            // Copy functionality for reference guide
    async function copyToClipboard(text) {
              try {
                await navigator.clipboard.writeText(text);
                // Show brief success indicator
                E.toast('Copied to clipboard!', {type: 'success', duration: 2000});
              } catch (err) {
                console.error('Failed to copy:', err);
                E.toast('Failed to copy', {type: 'error', duration: 2000});
              }
            };
    function copyCodeExample(button) {
              const codeBlock = button.nextElementSibling.querySelector('code') ||
                button.nextElementSibling;
              const text = codeBlock.textContent;
              copyToClipboard(text);
            };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyToClipboard('string');
    });
    $(root).find('[data-action="2"]').on('click', function (event) {
        copyToClipboard('email');
    });
    $(root).find('[data-action="3"]').on('click', function (event) {
        copyToClipboard('password');
    });
    $(root).find('[data-action="4"]').on('click', function (event) {
        copyToClipboard('number');
    });
    $(root).find('[data-action="5"]').on('click', function (event) {
        copyToClipboard('boolean');
    });
    $(root).find('[data-action="6"]').on('click', function (event) {
        copyToClipboard('textarea');
    });
    $(root).find('[data-action="7"]').on('click', function (event) {
        copyToClipboard('select');
    });
    $(root).find('[data-action="8"]').on('click', function (event) {
        copyToClipboard('radio');
    });
    $(root).find('[data-action="9"]').on('click', function (event) {
        copyToClipboard('checkbox-group');
    });
    $(root).find('[data-action="10"]').on('click', function (event) {
        copyToClipboard('file');
    });
    $(root).find('[data-action="11"]').on('click', function (event) {
        copyToClipboard('date');
    });
    $(root).find('[data-action="12"]').on('click', function (event) {
        copyToClipboard('datetime');
    });
    $(root).find('[data-action="13"]').on('click', function (event) {
        copyToClipboard('required: true');
    });
    $(root).find('[data-action="14"]').on('click', function (event) {
        copyToClipboard('minLength: 3');
    });
    $(root).find('[data-action="15"]').on('click', function (event) {
        copyToClipboard('maxLength: 100');
    });
    $(root).find('[data-action="16"]').on('click', function (event) {
        copyToClipboard('min: 0, max: 100');
    });
    $(root).find('[data-action="17"]').on('click', function (event) {
        copyToClipboard('pattern: /^[A-Za-z]+$/');
    });
    $(root).find('[data-action="18"]').on('click', function (event) {
        copyToClipboard('validate: (value) => value !== \'test\'');
    });
    $(root).find('[data-action="19"]').on('click', function (event) {
        copyToClipboard('layout: \'stacked\'');
    });
    $(root).find('[data-action="20"]').on('click', function (event) {
        copyToClipboard('layout: \'grid\'');
    });
    $(root).find('[data-action="21"]').on('click', function (event) {
        copyToClipboard('layout: \'inline\'');
    });
    $(root).find('[data-action="22"]').on('click', function (event) {
        copyToClipboard('columns: 2');
    });
    $(root).find('[data-action="23"]').on('click', function (event) {
        copyToClipboard('submitText: \'Save Changes\'');
    });
    $(root).find('[data-action="24"]').on('click', function (event) {
        copyToClipboard('showSubmitButton: false');
    });
    $(root).find('[data-action="25"]').on('click', function (event) {
        copyToClipboard('formConfig: { placeholder: \'Enter text...\' }');
    });
    $(root).find('[data-action="26"]').on('click', function (event) {
        copyToClipboard('formConfig: { helperText: \'This helps you\' }');
    });
    $(root).find('[data-action="27"]').on('click', function (event) {
        copyToClipboard('formConfig: { hint: \'Required field\' }');
    });
    $(root).find('[data-action="28"]').on('click', function (event) {
        copyToClipboard('formConfig: { disabled: true }');
    });
    $(root).find('[data-action="29"]').on('click', function (event) {
        copyToClipboard('formConfig: { readonly: true }');
    });
    $(root).find('[data-action="30"]').on('click', function (event) {
        copyToClipboard('formConfig: { span: 2 }');
    });
    $(root).find('[data-action="31"]').on('click', function (event) {
        copyToClipboard('const html = form.render();');
    });
    $(root).find('[data-action="32"]').on('click', function (event) {
        copyToClipboard('form.renderTo(\'#container\');');
    });
    $(root).find('[data-action="33"]').on('click', function (event) {
        copyToClipboard('const isValid = form.validate();');
    });
    $(root).find('[data-action="34"]').on('click', function (event) {
        copyToClipboard('const data = form.getFormData();');
    });
    $(root).find('[data-action="35"]').on('click', function (event) {
        copyToClipboard('form.setData(newData);');
    });
    $(root).find('[data-action="36"]').on('click', function (event) {
        copyToClipboard('form.reset();');
    });
    $(root).find('[data-action="37"]').on('click', function (event) {
        copyToClipboard('onSubmit: (data) => console.log(data)');
    });
    $(root).find('[data-action="38"]').on('click', function (event) {
        copyToClipboard('onValidationError: (errors) => console.error(errors)');
    });
    $(root).find('[data-action="39"]').on('click', function (event) {
        copyToClipboard('onChange: (data) => console.log(data)');
    });
    $(root).find('[data-action="40"]').on('click', function (event) {
        copyToClipboard('onError: (error) => console.error(error)');
    });
    $(root).find('[data-action="41"]').on('click', function (event) {
        copyToClipboard('onSave: async (data) => await api.save(data)');
    });
    $(root).find('[data-action="42"]').on('click', function (event) {
        copyToClipboard('onComplete: (data) => console.log(\'Completed:\', data)');
    });
}

/**
 * Domma Forms Reference - from public/showcase/forms.
 */
export function mount(root) {

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyToClipboard('string');
    });
    $(root).find('[data-action="2"]').on('click', function (event) {
        copyToClipboard('email');
    });
    $(root).find('[data-action="3"]').on('click', function (event) {
        copyToClipboard('password');
    });
    $(root).find('[data-action="4"]').on('click', function (event) {
        copyToClipboard('number');
    });
    $(root).find('[data-action="5"]').on('click', function (event) {
        copyToClipboard('boolean');
    });
    $(root).find('[data-action="6"]').on('click', function (event) {
        copyToClipboard('textarea');
    });
    $(root).find('[data-action="7"]').on('click', function (event) {
        copyToClipboard('select');
    });
    $(root).find('[data-action="8"]').on('click', function (event) {
        copyToClipboard('radio');
    });
    $(root).find('[data-action="9"]').on('click', function (event) {
        copyToClipboard('checkbox-group');
    });
    $(root).find('[data-action="10"]').on('click', function (event) {
        copyToClipboard('file');
    });
    $(root).find('[data-action="11"]').on('click', function (event) {
        copyToClipboard('date');
    });
    $(root).find('[data-action="12"]').on('click', function (event) {
        copyToClipboard('datetime');
    });
}

/**
 * Basic Form - from public/showcase/forms.
 */
export function mount(root) {
            // Copy functionality for reference guide
    async function copyToClipboard(text) {
              try {
                await navigator.clipboard.writeText(text);
                // Show brief success indicator
                E.toast('Copied to clipboard!', {type: 'success', duration: 2000});
              } catch (err) {
                console.error('Failed to copy:', err);
                E.toast('Failed to copy', {type: 'error', duration: 2000});
              }
            };
    function copyCodeExample(button) {
              const codeBlock = button.nextElementSibling.querySelector('code') ||
                button.nextElementSibling;
              const text = codeBlock.textContent;
              copyToClipboard(text);
            };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyCodeExample(this);
    });
}

/**
 * Modal Form - from public/showcase/forms.
 */
export function mount(root) {
            // Copy functionality for reference guide
    async function copyToClipboard(text) {
              try {
                await navigator.clipboard.writeText(text);
                // Show brief success indicator
                E.toast('Copied to clipboard!', {type: 'success', duration: 2000});
              } catch (err) {
                console.error('Failed to copy:', err);
                E.toast('Failed to copy', {type: 'error', duration: 2000});
              }
            };
    function copyCodeExample(button) {
              const codeBlock = button.nextElementSibling.querySelector('code') ||
                button.nextElementSibling;
              const text = codeBlock.textContent;
              copyToClipboard(text);
            };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyCodeExample(this);
    });
}

/**
 * Wizard - from public/showcase/forms.
 */
export function mount(root) {
            // Copy functionality for reference guide
    async function copyToClipboard(text) {
              try {
                await navigator.clipboard.writeText(text);
                // Show brief success indicator
                E.toast('Copied to clipboard!', {type: 'success', duration: 2000});
              } catch (err) {
                console.error('Failed to copy:', err);
                E.toast('Failed to copy', {type: 'error', duration: 2000});
              }
            };
    function copyCodeExample(button) {
              const codeBlock = button.nextElementSibling.querySelector('code') ||
                button.nextElementSibling;
              const text = codeBlock.textContent;
              copyToClipboard(text);
            };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyCodeExample(this);
    });
}

/**
 * CRUD Interface - from public/showcase/forms.
 */
export function mount(root) {
            // Copy functionality for reference guide
    async function copyToClipboard(text) {
              try {
                await navigator.clipboard.writeText(text);
                // Show brief success indicator
                E.toast('Copied to clipboard!', {type: 'success', duration: 2000});
              } catch (err) {
                console.error('Failed to copy:', err);
                E.toast('Failed to copy', {type: 'error', duration: 2000});
              }
            };
    function copyCodeExample(button) {
              const codeBlock = button.nextElementSibling.querySelector('code') ||
                button.nextElementSibling;
              const text = codeBlock.textContent;
              copyToClipboard(text);
            };

    // Handlers the old page had inline (onclick=…), wired here.
    $(root).find('[data-action="1"]').on('click', function (event) {
        copyCodeExample(this);
    });
}