@superleapai/flow-ui 1.0.0

package/core/flow.js

@@ -0,0 +1,1729 @@
+/**
+ * Flow UI Components Library
+ *
+ * A reusable design system for building multi-step forms.
+ * Contains only UI components and state management utilities.
+ * Business logic should be implemented separately.
+ */
+(function (global) {
+  "use strict";
+
+  // ============================================================================
+  // STATE MANAGEMENT
+  // ============================================================================
+
+  let _state = {};
+  let _onStateChange = null;
+
+  /**
+   * Initialize state with default values
+   * @param {Object} initialState - Initial state object
+   * @param {Function} onChangeCallback - Optional callback when state changes
+   */
+  function initState(initialState, onChangeCallback) {
+    _state = { ...initialState };
+    _onStateChange = onChangeCallback;
+  }
+
+  /**
+   * Get current state
+   * @returns {Object} Current state
+   */
+  function getState() {
+    return _state;
+  }
+
+  /**
+   * Update state with partial values
+   * @param {Object} partial - Partial state to merge
+   */
+  function setState(partial) {
+    _state = { ..._state, ...partial };
+    if (_onStateChange) {
+      _onStateChange(_state);
+    }
+  }
+
+  /**
+   * Get a specific state value
+   * @param {string} key - State key
+   * @returns {*} State value
+   */
+  function get(key) {
+    return _state[key];
+  }
+
+  /**
+   * Set a specific state value
+   * @param {string} key - State key
+   * @param {*} value - Value to set
+   */
+  function set(key, value) {
+    setState({ [key]: value });
+  }
+
+  /**
+   * Resolve a component by name. Uses FlowUI._getComponent (set by index.js after
+   * capturing components) when available, so components work after globals are cleaned.
+   * Falls back to global[name] when flow.js is used without the single-file entry.
+   */
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      const c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  // ============================================================================
+  // SCREEN UTILITIES
+  // ============================================================================
+
+  /**
+   * Create a screen wrapper with title and description
+   * @param {string} title - Screen title
+   * @param {string} description - Screen description
+   * @returns {HTMLElement} Screen wrapper element
+   */
+  function createScreen(title, description) {
+    const wrapper = document.createElement("div");
+    wrapper.className = "screen";
+
+    const h = document.createElement("h2");
+    h.className = "screen-title";
+    h.textContent = title;
+
+    const p = document.createElement("p");
+    p.className = "screen-description";
+    p.textContent = description;
+
+    wrapper.appendChild(h);
+    wrapper.appendChild(p);
+    return wrapper;
+  }
+
+  /**
+   * Create a form grid container
+   * @returns {HTMLElement} Grid element
+   */
+  function createGrid() {
+    const grid = document.createElement("div");
+    grid.className = "form-grid";
+    return grid;
+  }
+
+  /**
+   * Create a field wrapper with label (uses Label component when available)
+   * @param {string} label - Field label
+   * @param {boolean} required - Whether field is required
+   * @param {string} helpText - Optional help text for tooltip
+   * @returns {HTMLElement} Field wrapper element
+   */
+  function createFieldWrapper(label, required = false, helpText = null) {
+    const field = document.createElement("div");
+    field.className = "field";
+
+    let labelEl;
+    const LabelComponent = getComponent("Label");
+    if (LabelComponent && typeof LabelComponent.create === "function") {
+      const suffix = helpText && getComponent("Tooltip") ? getComponent("Tooltip").create(helpText) : null;
+      labelEl = LabelComponent.create({
+        label: label,
+        required: required,
+        requiredPosition: "right",
+        optional: false,
+        size: "default",
+        suffix: suffix || undefined,
+      });
+    } else {
+      // Fallback: inline label (no Label component)
+      labelEl = document.createElement("label");
+      labelEl.className = "field-label";
+      const labelContentWrapper = document.createElement("span");
+      labelContentWrapper.style.display = "inline-flex";
+      labelContentWrapper.style.alignItems = "center";
+      labelContentWrapper.style.gap = "0.25rem";
+      if (required) {
+        labelContentWrapper.appendChild(document.createTextNode(label + " "));
+        const asterisk = document.createElement("span");
+        asterisk.className = "required-asterisk";
+        asterisk.textContent = "*";
+        labelContentWrapper.appendChild(asterisk);
+      } else {
+        labelContentWrapper.appendChild(document.createTextNode(label));
+      }
+      if (helpText && getComponent("Tooltip")) {
+        const tooltip = getComponent("Tooltip").create(helpText);
+        if (tooltip) labelContentWrapper.appendChild(tooltip);
+      }
+      labelEl.appendChild(labelContentWrapper);
+    }
+
+    field.appendChild(labelEl);
+    return field;
+  }
+
+  // ============================================================================
+  // FORM COMPONENTS
+  // ============================================================================
+
+  /**
+   * Create a text input field
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} config.placeholder - Placeholder text
+   * @param {boolean} config.required - Whether field is required
+   * @param {string} config.type - Input type (text, email, number, etc.)
+   * @returns {HTMLElement} Field element
+   */
+  function createInput(config) {
+    const { label, fieldId, placeholder, required = false, type = "text", helpText = null, variant, inputSize, disabled = false, showReadOnlyIcon } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("InputComponent") && getComponent("InputComponent").create) {
+      const currentValue = get(fieldId) || "";
+      const inputEl = getComponent("InputComponent").create({
+        variant: variant || "default",
+        inputSize: inputSize || "default",
+        type,
+        placeholder: placeholder || `Enter ${label.toLowerCase()}`,
+        value: currentValue,
+        disabled,
+        showReadOnlyIcon,
+        onChange: (e) => set(fieldId, e.target.value),
+        onInput: (e) => set(fieldId, e.target.value),
+      });
+      inputEl._fieldId = fieldId;
+      field.appendChild(inputEl);
+    }
+    return field;
+  }
+
+  /**
+   * Create a textarea field
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} config.placeholder - Placeholder text
+   * @param {boolean} config.required - Whether field is required
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @param {string} [config.variant] - 'default' | 'borderless' | 'inline' | 'error' | 'warning'
+   * @param {number} [config.rows] - Number of rows
+   * @param {boolean} [config.disabled] - Whether textarea is disabled
+   * @returns {HTMLElement} Field element
+   */
+  function createTextarea(config) {
+    const { label, fieldId, placeholder, required = false, helpText = null, variant, rows, disabled = false } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("TextareaComponent") && getComponent("TextareaComponent").create) {
+      const currentValue = get(fieldId) || "";
+      const textareaEl = getComponent("TextareaComponent").create({
+        variant: variant || "default",
+        placeholder: placeholder || `Enter ${label.toLowerCase()}`,
+        value: currentValue,
+        rows,
+        disabled,
+        onChange: (e) => set(fieldId, e.target.value),
+        onInput: (e) => set(fieldId, e.target.value),
+      });
+      textareaEl._fieldId = fieldId;
+      field.appendChild(textareaEl);
+      return field;
+    }
+
+    const textarea = document.createElement("textarea");
+    textarea.className = "textarea";
+    textarea.placeholder = placeholder || `Enter ${label.toLowerCase()}`;
+    textarea.value = get(fieldId) || "";
+    textarea.disabled = disabled;
+    if (rows != null) textarea.rows = rows;
+    textarea.addEventListener("change", (e) => set(fieldId, e.target.value));
+
+    field.appendChild(textarea);
+    return field;
+  }
+
+  /**
+   * Create a select dropdown field (using custom select component)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {Array} config.options - Array of { value, label } objects
+   * @param {boolean} config.required - Whether field is required
+   * @param {Function} config.onChange - Optional change handler
+   * @param {boolean} config.disabled - Whether select is disabled
+   * @returns {HTMLElement} Field element
+   */
+  function createSelect(config) {
+    const { label, fieldId, options = [], required = false, onChange, disabled = false, helpText = null } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    // Use custom select component if available, fallback to native select
+    if (getComponent("Select") && getComponent("Select").create) {
+      const currentValue = get(fieldId) || "";
+      const placeholder = `Select ${label}`;
+
+      const customSelect = getComponent("Select").create({
+        fieldId,
+        options,
+        placeholder,
+        value: currentValue,
+        disabled,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) {onChange(value);}
+        },
+      });
+
+      // Store reference for dynamic updates
+      customSelect._fieldId = fieldId;
+      customSelect._onChange = onChange;
+
+      field.appendChild(customSelect);
+      return field;
+    }
+
+    // Fallback to native select
+    const select = document.createElement("select");
+    select.className = "select";
+    select.disabled = disabled;
+    const placeholderOption = document.createElement("option");
+    placeholderOption.value = "";
+    placeholderOption.textContent = `Select ${label}`;
+    placeholderOption.className = "select-placeholder";
+    placeholderOption.disabled = true;
+    placeholderOption.selected = true;
+    select.appendChild(placeholderOption);
+
+    options.forEach((opt) => {
+      const o = document.createElement("option");
+      o.value = opt.value || opt.slug || opt.id;
+      o.textContent = opt.label || opt.name || opt.value;
+      select.appendChild(o);
+    });
+
+    select.value = get(fieldId) || "";
+    
+    // Set placeholder attribute for styling
+    if (!select.value) {
+      select.setAttribute("data-placeholder", "true");
+    }
+
+    select.addEventListener("change", (e) => {
+      const value = e.target.value;
+      set(fieldId, value);
+      
+      // Update placeholder attribute for styling
+      if (value === "") {
+        select.setAttribute("data-placeholder", "true");
+      } else {
+        select.removeAttribute("data-placeholder");
+      }
+      
+      if (onChange) {onChange(value);}
+    });
+
+    field.appendChild(select);
+    return field;
+  }
+
+  /**
+   * Create a time picker field (using TimePicker component)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} config.value - Initial value "HH:mm"
+   * @param {string} config.placeholder - Placeholder text
+   * @param {boolean} config.required - Whether field is required
+   * @param {Function} config.onChange - Optional change handler
+   * @param {boolean} config.disabled - Whether time picker is disabled
+   * @param {boolean} config.use24Hour - Use 24-hour format (default: false, i.e. 12-hour AM/PM)
+   * @returns {HTMLElement} Field element
+   */
+  function createTimePicker(config) {
+    const { label, fieldId, value: initialValue, placeholder, required = false, onChange, disabled = false, use24Hour = false, helpText = null } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("TimePicker") && getComponent("TimePicker").create) {
+      const currentValue = get(fieldId) || initialValue || "";
+
+      const timePicker = getComponent("TimePicker").create({
+        fieldId,
+        value: currentValue,
+        placeholder: placeholder || `Select ${label}`,
+        disabled,
+        use24Hour,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) { onChange(value); }
+        },
+      });
+
+      timePicker._fieldId = fieldId;
+      field.appendChild(timePicker);
+      return field;
+    }
+
+    // Fallback: native time input
+    const input = document.createElement("input");
+    input.type = "time";
+    input.className = "input";
+    input.value = get(fieldId) || "";
+    input.disabled = disabled;
+    input.addEventListener("change", (e) => {
+      set(fieldId, e.target.value);
+      if (onChange) { onChange(e.target.value); }
+    });
+    field.appendChild(input);
+    return field;
+  }
+
+  /**
+   * Create a date-time picker field (uses DateTimePicker component when available)
+   * State stores value as ISO date string or null.
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {Date|string|null} config.value - Initial value (Date or ISO string)
+   * @param {string} config.placeholder - Placeholder text
+   * @param {boolean} config.required - Whether field is required
+   * @param {Function} config.onChange - Optional change handler
+   * @param {boolean} config.disabled - Whether picker is disabled
+   * @param {12|24} config.hourCycle - 12 or 24 hour format
+   * @param {string} config.granularity - 'day' | 'hour' | 'minute' | 'second'
+   * @param {string} config.size - 'small' | 'default' | 'large'
+   * @param {Date} config.fromDate - Min selectable date
+   * @param {Date} config.toDate - Max selectable date
+   * @param {string} config.helpText - Optional help text for tooltip
+   * @returns {HTMLElement} Field element
+   */
+  function createDateTimePicker(config) {
+    const {
+      label,
+      fieldId,
+      value: initialValue,
+      placeholder,
+      required = false,
+      onChange,
+      disabled = false,
+      hourCycle = 12,
+      granularity = "minute",
+      size = "default",
+      fromDate,
+      toDate,
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("DateTimePicker") && getComponent("DateTimePicker").create) {
+      const raw = get(fieldId);
+      let currentValue;
+      if (initialValue instanceof Date) {
+        currentValue = initialValue;
+      } else if (raw === null || raw === undefined || raw === "") {
+        currentValue = undefined;
+      } else {
+        try {
+          currentValue = typeof raw === "string" ? new Date(raw) : raw;
+          if (Number.isNaN(currentValue.getTime())) currentValue = undefined;
+        } catch (e) {
+          currentValue = undefined;
+        }
+      }
+
+      const picker = getComponent("DateTimePicker").create({
+        value: currentValue,
+        placeholder: placeholder || `Pick ${label.toLowerCase()}`,
+        disabled,
+        hourCycle,
+        granularity,
+        size,
+        fromDate,
+        toDate,
+        onChange: (date) => {
+          set(fieldId, date ? date.toISOString() : null);
+          if (onChange) onChange(date);
+        },
+      });
+
+      picker._fieldId = fieldId;
+      field.appendChild(picker);
+      return field;
+    }
+
+    // Fallback: native date and time inputs
+    const dateInput = document.createElement("input");
+    dateInput.type = "date";
+    dateInput.className = "input";
+    const raw = get(fieldId);
+    if (raw) {
+      try {
+        const d = typeof raw === "string" ? new Date(raw) : raw;
+        if (!Number.isNaN(d.getTime())) {
+          dateInput.value = d.toISOString().slice(0, 10);
+        }
+      } catch (e) {}
+    }
+    dateInput.disabled = disabled;
+    dateInput.addEventListener("change", (e) => {
+      const val = e.target.value ? new Date(e.target.value + "T12:00:00Z").toISOString() : null;
+      set(fieldId, val);
+      if (onChange) onChange(val ? new Date(val) : undefined);
+    });
+    field.appendChild(dateInput);
+    return field;
+  }
+
+  /**
+   * Create a radio button group
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {Array} config.options - Array of { value, label, disabled? } objects
+   * @param {boolean} config.required - Whether field is required
+   * @param {Function} config.onChange - Optional change handler
+   * @param {string} [config.orientation] - 'horizontal' | 'vertical'
+   * @param {boolean} [config.disabled] - Disable all radios
+   * @returns {HTMLElement} Field element
+   */
+  function createRadioGroup(config) {
+    const { label, fieldId, options = [], required = false, onChange, helpText = null, orientation = "horizontal", disabled = false } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("RadioGroup") && getComponent("RadioGroup").create) {
+      const currentValue = get(fieldId);
+      const radioGroupEl = getComponent("RadioGroup").create({
+        name: fieldId,
+        options: options.map((opt) => ({ value: opt.value, label: opt.label || opt.value, disabled: opt.disabled })),
+        value: currentValue,
+        disabled,
+        orientation,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) onChange(value);
+        },
+      });
+      radioGroupEl._fieldId = fieldId;
+      field.appendChild(radioGroupEl);
+      return field;
+    }
+
+    const radioGroup = document.createElement("div");
+    radioGroup.className = "radio-group";
+
+    options.forEach((opt) => {
+      const wrapper = document.createElement("div");
+      wrapper.className = "radio-option";
+
+      const radio = document.createElement("input");
+      radio.type = "radio";
+      radio.name = fieldId;
+      radio.value = opt.value;
+      radio.id = `${fieldId}-${opt.value}`;
+      radio.checked = get(fieldId) === opt.value;
+      radio.disabled = disabled || !!opt.disabled;
+      radio.addEventListener("change", () => {
+        set(fieldId, opt.value);
+        if (onChange) {onChange(opt.value);}
+      });
+
+      const radioLabel = document.createElement("label");
+      radioLabel.htmlFor = `${fieldId}-${opt.value}`;
+      radioLabel.textContent = opt.label || opt.value;
+
+      wrapper.appendChild(radio);
+      wrapper.appendChild(radioLabel);
+      radioGroup.appendChild(wrapper);
+    });
+
+    field.appendChild(radioGroup);
+    return field;
+  }
+
+  /**
+   * Create a multi-select field (uses MultiSelect component when available, else checkbox group)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field (stores array)
+   * @param {Array} config.options - Array of { value, label } or { slug, display_name } objects
+   * @param {boolean} config.required - Whether field is required
+   * @param {Function} config.onChange - Optional change handler (receives array of selected values)
+   * @param {string} config.placeholder - Placeholder when none selected
+   * @param {string} config.helpText - Optional help text for tooltip
+   * @param {string} config.variant - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} config.size - 'default' | 'large' | 'small'
+   * @param {string} config.type - 'default' (count) | 'tags' (show tags in trigger)
+   * @param {boolean} config.disabled - Whether multiselect is disabled
+   * @returns {HTMLElement} Field element
+   */
+  function createMultiSelect(config) {
+    const { label, fieldId, options = [], required = false, onChange, placeholder, helpText = null, variant, size, type, disabled = false } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("MultiSelect") && getComponent("MultiSelect").create) {
+      const currentValues = get(fieldId) || [];
+      const multiEl = getComponent("MultiSelect").create({
+        fieldId,
+        options,
+        placeholder: placeholder || `Select ${label}`,
+        value: currentValues,
+        label: "selected",
+        variant: variant || "default",
+        size: size || "default",
+        type: type || "default",
+        disabled,
+        onValuesChange: (values) => {
+          set(fieldId, values);
+          if (onChange) onChange(values);
+        },
+      });
+      multiEl._fieldId = fieldId;
+      field.appendChild(multiEl);
+      return field;
+    }
+
+    // Fallback: checkbox group
+    const checkboxContainer = document.createElement("div");
+    checkboxContainer.className = "checkbox-group";
+
+    const currentValues = get(fieldId) || [];
+
+    options.forEach((opt) => {
+      const checkboxWrapper = document.createElement("label");
+      checkboxWrapper.className = "checkbox-label";
+
+      const checkbox = document.createElement("input");
+      checkbox.type = "checkbox";
+      const optValue = opt.value || opt.slug || opt.id;
+      checkbox.value = optValue;
+      checkbox.checked = currentValues.includes(optValue);
+      checkbox.addEventListener("change", () => {
+        const current = get(fieldId) || [];
+        const updated = checkbox.checked
+          ? [...current, optValue]
+          : current.filter((v) => v !== optValue);
+        set(fieldId, updated);
+        if (onChange) {onChange(updated);}
+      });
+
+      checkboxWrapper.appendChild(checkbox);
+      checkboxWrapper.appendChild(document.createTextNode(" " + (opt.label || opt.name || opt.display_name || opt.value)));
+      checkboxContainer.appendChild(checkboxWrapper);
+    });
+
+    field.appendChild(checkboxContainer);
+    return field;
+  }
+
+  /**
+   * Create a record select field (single record from an object, with search)
+   * Uses RecordSelect component when available and superleapClient is set.
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} config.objectSlug - Object slug (e.g. "account", "opportunity")
+   * @param {string} [config.placeholder] - Placeholder text
+   * @param {string} [config.searchPlaceholder] - Search input placeholder
+   * @param {boolean} [config.required] - Whether field is required
+   * @param {Function} [config.onChange] - Optional change handler (value, record?) => void
+   * @param {boolean} [config.disabled] - Whether record select is disabled
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.canClear] - Show clear button when value is set
+   * @param {number} [config.initialLimit] - Initial fetch limit
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @returns {HTMLElement} Field element
+   */
+  function createRecordSelect(config) {
+    const {
+      label,
+      fieldId,
+      objectSlug,
+      placeholder,
+      searchPlaceholder,
+      required = false,
+      onChange,
+      disabled = false,
+      variant,
+      size,
+      canClear,
+      initialLimit,
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("RecordSelect") && getComponent("RecordSelect").create) {
+      const currentValue = get(fieldId) || "";
+
+      const recordSelectEl = getComponent("RecordSelect").create({
+        fieldId,
+        objectSlug,
+        placeholder: placeholder || `Select ${label}`,
+        searchPlaceholder,
+        value: currentValue,
+        disabled,
+        variant: variant || "default",
+        size: size || "default",
+        canClear: !!canClear,
+        initialLimit,
+        onChange: (value, record) => {
+          set(fieldId, value);
+          if (onChange) onChange(value, record);
+        },
+      });
+
+      recordSelectEl._fieldId = fieldId;
+      field.appendChild(recordSelectEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Record select requires RecordSelect component and SuperLeap client.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create a record multi-select field (multiple records from an object, with search)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key (stores array of record ids)
+   * @param {string} config.objectSlug - Object slug (e.g. "account", "opportunity")
+   * @param {string} [config.placeholder] - Placeholder text
+   * @param {string} [config.searchPlaceholder] - Search input placeholder
+   * @param {boolean} [config.required=false]
+   * @param {Function} [config.onChange] - (values: string[], records?) => void
+   * @param {boolean} [config.disabled=false]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {number} [config.initialLimit] - Initial fetch limit
+   * @param {Array<string>} [config.displayFields] - Fields to show as secondary info
+   * @param {string} [config.helpText] - Optional help text for tooltip
+   * @returns {HTMLElement} Field element
+   */
+  function createRecordMultiSelect(config) {
+    const {
+      label,
+      fieldId,
+      objectSlug,
+      placeholder,
+      searchPlaceholder,
+      required = false,
+      onChange,
+      disabled = false,
+      variant,
+      size,
+      initialLimit,
+      displayFields,
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("RecordMultiSelect") && getComponent("RecordMultiSelect").create) {
+      const currentValues = get(fieldId) || [];
+      const recordMultiEl = getComponent("RecordMultiSelect").create({
+        fieldId,
+        objectSlug,
+        placeholder: placeholder || `Select ${label}`,
+        searchPlaceholder,
+        value: currentValues,
+        disabled,
+        variant: variant || "default",
+        size: size || "default",
+        initialLimit,
+        displayFields: displayFields || [],
+        onValuesChange: (values, records) => {
+          set(fieldId, values);
+          if (onChange) onChange(values, records);
+        },
+      });
+      recordMultiEl._fieldId = fieldId;
+      field.appendChild(recordMultiEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Record multi-select requires RecordMultiSelect component and SuperLeap client.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create an enum select field (options from SuperLeap object column)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} config.objectSlug - Object slug (e.g. "accounts")
+   * @param {string} config.columnSlug - Column slug (e.g. "status")
+   * @param {string} [config.placeholder] - Placeholder text
+   * @param {boolean} [config.required=false]
+   * @param {Function} [config.onChange] - (value: string) => void
+   * @param {boolean} [config.disabled=false]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.canClear] - Show clear button
+   * @param {Object} [config.currentRecordData] - For dependent fields
+   * @param {string} [config.helpText] - Optional help text
+   * @returns {HTMLElement} Field element
+   */
+  function createEnumSelect(config) {
+    const {
+      label,
+      fieldId,
+      objectSlug,
+      columnSlug,
+      placeholder,
+      required = false,
+      onChange,
+      disabled = false,
+      variant,
+      size,
+      canClear,
+      currentRecordData,
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("EnumSelect") && getComponent("EnumSelect").create) {
+      const currentValue = get(fieldId) || "";
+      const enumSelectEl = getComponent("EnumSelect").create({
+        fieldId,
+        objectSlug,
+        columnSlug,
+        placeholder: placeholder || `Select ${label}`,
+        value: currentValue,
+        disabled,
+        variant: variant || "default",
+        size: size || "default",
+        canClear: !!canClear,
+        currentRecordData: currentRecordData || {},
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) onChange(value);
+        },
+      });
+      enumSelectEl._fieldId = fieldId;
+      field.appendChild(enumSelectEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Enum select requires EnumSelect component and SuperLeap client.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create an enum multi-select field (options from SuperLeap object column)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key (stores array of values)
+   * @param {string} config.objectSlug - Object slug (e.g. "accounts")
+   * @param {string} config.columnSlug - Column slug (e.g. "tags")
+   * @param {string} [config.placeholder] - Placeholder text
+   * @param {boolean} [config.required=false]
+   * @param {Function} [config.onChange] - (values: string[]) => void
+   * @param {boolean} [config.disabled=false]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.canClear] - Show clear button
+   * @param {Object} [config.currentRecordData] - For dependent fields
+   * @param {string} [config.helpText] - Optional help text
+   * @returns {HTMLElement} Field element
+   */
+  function createEnumMultiSelect(config) {
+    const {
+      label,
+      fieldId,
+      objectSlug,
+      columnSlug,
+      placeholder,
+      required = false,
+      onChange,
+      disabled = false,
+      variant,
+      size,
+      canClear,
+      currentRecordData,
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    if (getComponent("EnumMultiSelect") && getComponent("EnumMultiSelect").create) {
+      const currentValues = get(fieldId) || [];
+      const enumMultiEl = getComponent("EnumMultiSelect").create({
+        fieldId,
+        objectSlug,
+        columnSlug,
+        placeholder: placeholder || `Select ${label}`,
+        value: currentValues,
+        disabled,
+        variant: variant || "default",
+        size: size || "default",
+        canClear: !!canClear,
+        currentRecordData: currentRecordData || {},
+        onChange: (values) => {
+          set(fieldId, values);
+          if (onChange) onChange(values);
+        },
+      });
+      enumMultiEl._fieldId = fieldId;
+      field.appendChild(enumMultiEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Enum multi-select requires EnumMultiSelect component and SuperLeap client.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create a duration picker field (stores value in seconds or milliseconds)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {number|null} [config.value] - Initial value (seconds or ms per formatType)
+   * @param {string} [config.formatType='seconds'] - 'seconds' | 'milliseconds'
+   * @param {string} [config.placeholder='hh:mm:ss']
+   * @param {boolean} [config.required=false]
+   * @param {Function} [config.onChange] - (value: number|null) => void
+   * @param {boolean} [config.disabled=false]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'small' | 'default' | 'large'
+   * @param {string} [config.helpText] - Optional help text
+   * @returns {HTMLElement} Field element
+   */
+  function createDuration(config) {
+    const {
+      label,
+      fieldId,
+      value: initialValue,
+      formatType = "seconds",
+      placeholder = "hh:mm:ss",
+      required = false,
+      onChange,
+      disabled = false,
+      variant = "default",
+      size = "default",
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("Duration") && getComponent("Duration").create) {
+      const currentValue = get(fieldId);
+      const valueToUse = currentValue !== undefined && currentValue !== null ? currentValue : initialValue;
+      const durationEl = getComponent("Duration").create({
+        value: valueToUse,
+        formatType,
+        placeholder,
+        disabled,
+        variant,
+        size,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) onChange(value);
+        },
+      });
+      durationEl._fieldId = fieldId;
+      field.appendChild(durationEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Duration picker requires Duration component.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create an enumeration field (N items, count 0..totalElements, e.g. star rating)
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key (stores number 0..totalElements)
+   * @param {number} config.totalElements - Number of items (e.g. 5 for 5 stars)
+   * @param {string|HTMLElement} config.enabledIcon - Icon when item is selected
+   * @param {string|HTMLElement} config.disabledIcon - Icon when item is not selected
+   * @param {number} [config.defaultValue=0] - Initial count
+   * @param {boolean} [config.required=false]
+   * @param {Function} [config.onChange] - (count: number) => void
+   * @param {boolean} [config.disabled=false]
+   * @param {boolean} [config.readOnly=false]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'success' | 'borderless' | 'inline'
+   * @param {string} [config.size] - 'default' | 'large' | 'small'
+   * @param {string} [config.helpText] - Optional help text
+   * @returns {HTMLElement} Field element
+   */
+  function createEnumeration(config) {
+    const {
+      label,
+      fieldId,
+      totalElements,
+      enabledIcon,
+      disabledIcon,
+      defaultValue = 0,
+      required = false,
+      onChange,
+      disabled = false,
+      readOnly = false,
+      variant = "default",
+      size = "default",
+      helpText = null,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("Enumeration") && getComponent("Enumeration").create) {
+      const currentValue = get(fieldId);
+      const valueToUse = currentValue !== undefined && currentValue !== null ? currentValue : defaultValue;
+      const enumEl = getComponent("Enumeration").create({
+        totalElements,
+        enabledIcon,
+        disabledIcon,
+        defaultValue: valueToUse,
+        disabled,
+        readOnly,
+        variant,
+        size,
+        onValueChange: (count) => {
+          set(fieldId, count);
+          if (onChange) onChange(count);
+        },
+      });
+      enumEl._fieldId = fieldId;
+      field.appendChild(enumEl);
+      return field;
+    }
+
+    const fallback = document.createElement("div");
+    fallback.className = "text-reg-13 text-typography-quaternary-text";
+    fallback.textContent = "Enumeration requires Enumeration component.";
+    field.appendChild(fallback);
+    return field;
+  }
+
+  /**
+   * Create a file upload field
+   * When FileInput component is available, uses S3 upload and stores array of URLs in state.
+   * Otherwise stores array of File objects (client-side only).
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field (stores array of files or URLs)
+   * @param {boolean} config.multiple - Allow multiple files
+   * @param {string} config.accept - Accepted file types
+   * @param {boolean} config.required - Whether field is required
+   * @param {string} [config.helpText] - Optional help text
+   * @param {boolean} [config.isPrivate] - Whether files are private (FileInput only)
+   * @param {number} [config.maxFiles] - Max files when multiple (FileInput only)
+   * @param {number} [config.maxFileSize] - Max file size in bytes (FileInput only)
+   * @returns {HTMLElement} Field element
+   */
+  function createFileUpload(config) {
+    const { label, fieldId, multiple = true, accept, required = false, helpText = null, isPrivate, maxFiles, maxFileSize } = config;
+
+    if (getComponent("FileInput") && getComponent("FileInput").create) {
+      return getComponent("FileInput").create({
+        label,
+        fieldId,
+        multiple,
+        accept: accept || "*",
+        required,
+        helpText,
+        isPrivate: !!isPrivate,
+        maxFiles: maxFiles != null ? maxFiles : null,
+        maxFileSize: maxFileSize != null ? maxFileSize : 10 * 1024 * 1024,
+      });
+    }
+
+    const field = createFieldWrapper(label, required, helpText);
+
+    const uploadWrapper = document.createElement("div");
+    uploadWrapper.className = "file-upload-wrapper";
+
+    const btn = document.createElement("div");
+    btn.className = "file-upload-button";
+    btn.textContent = "Choose a file";
+
+    const currentFiles = get(fieldId) || [];
+    const statusText = document.createElement("div");
+    statusText.className = "file-upload-text";
+    statusText.textContent = currentFiles.length > 0
+      ? `${currentFiles.length} file(s) selected`
+      : "No files chosen";
+
+    const input = document.createElement("input");
+    input.type = "file";
+    input.multiple = multiple;
+    input.className = "file-upload-input";
+    if (accept) {input.accept = accept;}
+
+    input.addEventListener("change", function () {
+      const files = Array.from(this.files || []);
+      set(fieldId, files);
+      statusText.textContent = files.length > 0
+        ? `${files.length} file(s) selected`
+        : "No files chosen";
+    });
+
+    uploadWrapper.appendChild(btn);
+    uploadWrapper.appendChild(statusText);
+    uploadWrapper.appendChild(input);
+    field.appendChild(uploadWrapper);
+
+    const hint = document.createElement("div");
+    hint.className = "field-hint";
+    hint.textContent = multiple ? "Multiple files allowed." : "Single file only.";
+    field.appendChild(hint);
+
+    return field;
+  }
+
+  /**
+   * Create a currency field (decimal input with 2 decimal places, SubOption-style layout).
+   * State stores number | null.
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label (optional; column label/currency used when available)
+   * @param {string} config.fieldId - State key for this field
+   * @param {Object} [config.column] - { properties?: { currency?: { currency?: string } }, placeholder?: string }
+   * @param {string} [config.placeholder]
+   * @param {boolean} [config.required=false]
+   * @param {string} [config.helpText]
+   * @param {string} [config.variant] - 'inline' | 'default' | 'borderless' | 'error' | 'warning'
+   * @param {string} [config.size] - 'small' | 'default' | 'large'
+   * @param {boolean} [config.disabled=false]
+   * @param {Function} [config.onChange]
+   * @returns {HTMLElement} Field element
+   */
+  function createCurrency(config) {
+    const {
+      label,
+      fieldId,
+      column = {},
+      placeholder,
+      required = false,
+      helpText = null,
+      variant = "default",
+      size = "default",
+      disabled = false,
+      onChange,
+    } = config;
+
+    const field = createFieldWrapper(label || "Amount", required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("CurrencyComponent") && getComponent("CurrencyComponent").create) {
+      const currentValue = get(fieldId);
+      const currencyEl = getComponent("CurrencyComponent").create({
+        variant,
+        size,
+        placeholder: placeholder || column.placeholder || "Enter value",
+        disabled,
+        column,
+        value: currentValue != null ? currentValue : null,
+        onChange: (value) => {
+          set(fieldId, value);
+          if (onChange) onChange(value);
+        },
+      });
+      currencyEl._fieldId = fieldId;
+      field.appendChild(currencyEl);
+      return field;
+    }
+
+    const input = document.createElement("input");
+    input.type = "number";
+    input.step = "0.01";
+    input.placeholder = placeholder || "Enter amount";
+    input.value = get(fieldId) != null ? get(fieldId) : "";
+    input.disabled = disabled;
+    input.className = "input w-full";
+    input.addEventListener("input", (e) => {
+      const raw = e.target.value;
+      const num = raw === "" ? null : parseFloat(raw);
+      set(fieldId, isNaN(num) ? null : num);
+      if (onChange) onChange(isNaN(num) ? null : num);
+    });
+    field.appendChild(input);
+    return field;
+  }
+
+  /**
+   * Create a phone input field (international phone number with country selector)
+   * State stores string in format "callingCode-nationalNumber" (e.g., "91-9876543210")
+   * @param {Object} config - Configuration object
+   * @param {string} config.label - Field label
+   * @param {string} config.fieldId - State key for this field
+   * @param {string} [config.defaultCountryCode] - Default country code (e.g., 'US', 'IN')
+   * @param {string} [config.placeholder] - Custom placeholder
+   * @param {boolean} [config.required=false]
+   * @param {string} [config.helpText]
+   * @param {string} [config.variant] - 'default' | 'error' | 'warning' | 'borderless' | 'inline'
+   * @param {string} [config.inputSize] - 'default' | 'large' | 'small'
+   * @param {boolean} [config.disabled=false]
+   * @param {boolean} [config.disableCountrySelect=false] - Disable country selector
+   * @param {boolean} [config.hideCountrySelect=false] - Hide country selector completely
+   * @param {Function} [config.onChange] - Optional change handler (fullValue, country)
+   * @returns {HTMLElement} Field element
+   */
+  function createPhoneInput(config) {
+    const {
+      label,
+      fieldId,
+      defaultCountryCode,
+      placeholder,
+      required = false,
+      helpText = null,
+      variant = "default",
+      inputSize = "default",
+      disabled = false,
+      disableCountrySelect = false,
+      hideCountrySelect = false,
+      onChange,
+    } = config;
+
+    const field = createFieldWrapper(label, required, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("PhoneInput") && getComponent("PhoneInput").create) {
+      const currentValue = get(fieldId) || "";
+      const phoneInputEl = getComponent("PhoneInput").create({
+        variant,
+        inputSize,
+        defaultCountryCode: defaultCountryCode || "IN",
+        defaultPhoneNumber: currentValue,
+        placeholder,
+        disabled,
+        disableCountrySelect,
+        hideCountrySelect,
+        onChange: (fullValue, country) => {
+          set(fieldId, fullValue);
+          if (onChange) onChange(fullValue, country);
+        },
+      });
+      phoneInputEl._fieldId = fieldId;
+      field.appendChild(phoneInputEl);
+      return field;
+    }
+
+    // Fallback: simple tel input
+    const input = document.createElement("input");
+    input.type = "tel";
+    input.className = "input";
+    input.placeholder = placeholder || "Enter phone number";
+    input.value = get(fieldId) || "";
+    input.disabled = disabled;
+    input.addEventListener("input", (e) => {
+      set(fieldId, e.target.value);
+      if (onChange) onChange(e.target.value, null);
+    });
+    field.appendChild(input);
+    return field;
+  }
+
+  /**
+   * Create a checkbox field with optional label and help text
+   * @param {Object} config - { label, fieldId, checked, indeterminate, disabled, helpText, size, align, isLabelCaps, onChange }
+   * @returns {HTMLElement} Field wrapper containing checkbox
+   */
+  function createCheckbox(config) {
+    const {
+      label,
+      fieldId,
+      checked = false,
+      indeterminate = false,
+      disabled = false,
+      helpText = null,
+      size = "default",
+      align = "left",
+      isLabelCaps = false,
+      onChange,
+    } = config;
+
+    const field = createFieldWrapper(label, false, helpText);
+    field.setAttribute("data-field-id", fieldId);
+
+    if (getComponent("Checkbox") && getComponent("Checkbox").create) {
+      const currentValue = get(fieldId);
+      const checkboxEl = getComponent("Checkbox").create({
+        id: fieldId,
+        name: fieldId,
+        checked: currentValue !== undefined ? currentValue : checked,
+        indeterminate,
+        disabled,
+        size,
+        align,
+        isLabelCaps,
+        onChange: (isChecked) => {
+          set(fieldId, isChecked);
+          if (onChange) onChange(isChecked);
+        },
+      });
+      checkboxEl._fieldId = fieldId;
+      field.appendChild(checkboxEl);
+      return field;
+    }
+
+    // Fallback: simple checkbox input
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    input.className = "checkbox";
+    input.id = fieldId;
+    input.name = fieldId;
+    input.checked = get(fieldId) || checked;
+    input.disabled = disabled;
+    input.addEventListener("change", (e) => {
+      set(fieldId, e.target.checked);
+      if (onChange) onChange(e.target.checked);
+    });
+    field.appendChild(input);
+    return field;
+  }
+
+  // ============================================================================
+  // STEPPER COMPONENT
+  // ============================================================================
+
+  /**
+   * Create/update a stepper component
+   * @param {HTMLElement} container - Container element for stepper
+   * @param {Array} steps - Array of { id, label } objects
+   * @param {string} currentStepId - Currently active step ID
+   */
+  function renderStepper(container, steps, currentStepId) {
+    if (!container) {return;}
+    container.innerHTML = "";
+
+    steps.forEach((step, idx) => {
+      const pill = document.createElement("div");
+      pill.className = "step-pill" + (step.id === currentStepId ? " step-pill--active" : "");
+
+      const indexSpan = document.createElement("span");
+      indexSpan.className = "step-pill-index";
+      indexSpan.textContent = String(idx + 1);
+
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = step.label;
+
+      pill.appendChild(indexSpan);
+      pill.appendChild(labelSpan);
+      container.appendChild(pill);
+    });
+  }
+
+  // ============================================================================
+  // ALERT COMPONENT
+  // ============================================================================
+
+  /**
+   * Render alerts/errors
+   * Uses Alert component when available for design-system styling.
+   * @param {HTMLElement} container - Container element for alerts
+   * @param {Array} messages - Array of error/info messages (strings) or { title?, description } objects
+   * @param {string} type - Alert type: "error" | "info" | "success" | "warning" | "destructive" | "default"
+   */
+  function renderAlerts(container, messages = [], type = "error") {
+    if (!container) {return;}
+    container.innerHTML = "";
+
+    const Alert = getComponent("Alert");
+    const useAlertComponent = Alert && typeof Alert.create === "function";
+
+    messages.forEach((msg) => {
+      const description = typeof msg === "string" ? msg : (msg.description || msg.title || "");
+      const title = typeof msg === "object" && msg.title ? msg.title : "";
+
+      if (useAlertComponent && (description || title)) {
+        const variantMap = { error: "error", info: "info", success: "success" };
+        const variant = variantMap[type] || type;
+        const alertEl = Alert.create({ title, description, variant });
+        if (alertEl) container.appendChild(alertEl);
+      } else {
+        const div = document.createElement("div");
+        div.className = `alert alert--${type}`;
+        div.textContent = description || title;
+        container.appendChild(div);
+      }
+    });
+  }
+
+  // ============================================================================
+  // TABLE COMPONENT
+  // ============================================================================
+
+  /**
+   * Create a data table with radio selection
+   * @param {Object} config - Configuration object
+   * @param {Array} config.columns - Array of { key, label } for columns
+   * @param {Array} config.data - Array of data objects
+   * @param {string} config.fieldId - State key for selected row
+   * @param {string} config.idKey - Key to use as unique identifier (default: "id")
+   * @param {Function} config.onSelect - Optional callback when row is selected
+   * @returns {HTMLElement} Table container element
+   */
+  function createDataTable(config) {
+    const { columns, data = [], fieldId, idKey = "id", onSelect } = config;
+
+    const tableContainer = document.createElement("div");
+    tableContainer.className = "table-container";
+
+    const tableScroll = document.createElement("div");
+    tableScroll.className = "table-scroll";
+
+    const table = document.createElement("table");
+    table.className = "table";
+
+    // Header
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    headerRow.innerHTML = "<th></th>"; // Radio column
+    columns.forEach((col) => {
+      const th = document.createElement("th");
+      th.textContent = col.label;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement("tbody");
+
+    if (data.length === 0) {
+      const tr = document.createElement("tr");
+      tr.innerHTML = `<td colspan="${columns.length + 1}" style="text-align: center; padding: 2rem; color: var(--text-muted);">No results found.</td>`;
+      tbody.appendChild(tr);
+    } else {
+      data.forEach((row) => {
+        const tr = document.createElement("tr");
+
+        // Radio cell
+        const tdRadio = document.createElement("td");
+        const radio = document.createElement("input");
+        radio.type = "radio";
+        radio.name = fieldId;
+        radio.value = row[idKey];
+        radio.checked = get(fieldId) === row[idKey];
+        radio.addEventListener("change", () => {
+          set(fieldId, row[idKey]);
+          if (onSelect) {onSelect(row);}
+        });
+        tdRadio.appendChild(radio);
+        tr.appendChild(tdRadio);
+
+        // Data cells
+        columns.forEach((col) => {
+          const td = document.createElement("td");
+          td.textContent = row[col.key] || "";
+          tr.appendChild(td);
+        });
+
+        tbody.appendChild(tr);
+      });
+    }
+
+    table.appendChild(tbody);
+    tableScroll.appendChild(table);
+    tableContainer.appendChild(tableScroll);
+
+    return tableContainer;
+  }
+
+  /**
+   * Create a design-system table (SuperleapTable component)
+   * For radio-selection table use createDataTable instead.
+   * @param {Object} config - Configuration object
+   * @param {Array} config.data - Array of row objects
+   * @param {Array} config.columns - Column definitions { header, accessor?, cell?(row) }
+   * @param {boolean} [config.showHeader=true]
+   * @param {string} [config.headerSize='small'] - 'small' | 'default' | 'large'
+   * @param {boolean} [config.hasBorder=true]
+   * @param {Function} [config.onRowClick] - (rowId) => void
+   * @param {Function} [config.onFetch] - For infinite scroll
+   * @param {boolean} [config.hasMore=false]
+   * @param {boolean} [config.isLoading=false]
+   * @param {string} [config.emptyMessage='No data available']
+   * @returns {HTMLElement|Object} Table container or table instance
+   */
+  function createTable(config) {
+    const SuperleapTable = getComponent("SuperleapTable");
+    if (SuperleapTable && typeof SuperleapTable.createTable === "function") {
+      return SuperleapTable.createTable(config);
+    }
+    const tableContainer = document.createElement("div");
+    tableContainer.className = "table-container";
+    tableContainer.textContent = "Table component (SuperleapTable) not loaded.";
+    return tableContainer;
+  }
+
+  /**
+   * Create a search input for filtering
+   * @param {Object} config - Configuration object
+   * @param {string} config.placeholder - Placeholder text
+   * @param {string} config.fieldId - State key for search query
+   * @param {Function} config.onSearch - Callback when search value changes
+   * @returns {HTMLElement} Search container element
+   */
+  function createSearchInput(config) {
+    const { placeholder = "Search...", fieldId, onSearch } = config;
+
+    const searchContainer = document.createElement("div");
+    searchContainer.className = "search-container";
+    searchContainer.innerHTML = `
+      <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+      <input type="text" class="search-input" placeholder="${placeholder}" value="${get(fieldId) || ""}">
+    `;
+
+    const searchInput = searchContainer.querySelector(".search-input");
+    searchInput.addEventListener("input", (e) => {
+      set(fieldId, e.target.value.toLowerCase());
+      if (onSearch) {onSearch(e.target.value.toLowerCase());}
+    });
+
+    return searchContainer;
+  }
+
+  // ============================================================================
+  // SUMMARY/REVIEW COMPONENT
+  // ============================================================================
+
+  /**
+   * Create a summary row for review screens
+   * @param {string} label - Row label
+   * @param {string} value - Row value
+   * @returns {HTMLElement} Field element
+   */
+  function createSummaryRow(label, value) {
+    const field = document.createElement("div");
+    field.className = "field";
+
+    const l = document.createElement("div");
+    l.className = "field-label";
+    l.textContent = label;
+
+    const v = document.createElement("div");
+    v.className = "field-hint";
+    v.textContent = value || "-";
+
+    field.appendChild(l);
+    field.appendChild(v);
+    return field;
+  }
+
+  // ============================================================================
+  // TOAST NOTIFICATIONS
+  // ============================================================================
+
+  /**
+   * Create a badge element (Badge component)
+   * @param {Object} config - { variant, color, size, startIcon, endIcon, icon, content, className }
+   * @returns {HTMLElement} Badge element
+   */
+  function createBadge(config) {
+    const Badge = getComponent("Badge");
+    if (Badge && typeof Badge.create === "function") {
+      return Badge.create(config);
+    }
+    const span = document.createElement("span");
+    span.className = "badge";
+    span.textContent = config && (config.content || "");
+    return span;
+  }
+
+  /**
+   * Create an avatar element (Avatar component)
+   * @param {Object} config - { name, image?, size?, shape?, className? }
+   * @returns {HTMLElement} Avatar element
+   */
+  function createAvatar(config) {
+    const Avatar = getComponent("Avatar");
+    if (Avatar && typeof Avatar.create === "function") {
+      return Avatar.create(config);
+    }
+    const div = document.createElement("div");
+    div.className = "flex shrink-0 size-32 items-center justify-center rounded-full bg-primary-base";
+    div.textContent = (config && config.name && config.name.charAt(0)) || "?";
+    return div;
+  }
+
+  /**
+   * Create a vivid avatar (name-based background and text color)
+   * @param {Object} config - { name, image?, size?, shape?, className? }
+   * @returns {HTMLElement} VividAvatar element
+   */
+  function createVividAvatar(config) {
+    const Avatar = getComponent("Avatar");
+    if (Avatar && typeof Avatar.createVivid === "function") {
+      return Avatar.createVivid(config);
+    }
+    return createAvatar(config);
+  }
+
+  /**
+   * Create an avatar group (overlapping avatars, max 3 + remainder)
+   * @param {Object} config - { users: [{ id, name, image? }], size?, className? }
+   * @returns {HTMLElement} AvatarGroup wrapper element
+   */
+  function createAvatarGroup(config) {
+    const Avatar = getComponent("Avatar");
+    if (Avatar && typeof Avatar.createGroup === "function") {
+      return Avatar.createGroup(config);
+    }
+    const div = document.createElement("div");
+    div.className = "flex -space-x-4";
+    div.textContent = "";
+    return div;
+  }
+
+  /**
+   * Create a vivid avatar group (each avatar uses name-based color)
+   * @param {Object} config - { users: [{ id, name, image? }], size?, className? }
+   * @returns {HTMLElement} VividAvatarGroup wrapper element
+   */
+  function createVividAvatarGroup(config) {
+    const Avatar = getComponent("Avatar");
+    if (Avatar && typeof Avatar.createVividGroup === "function") {
+      return Avatar.createVividGroup(config);
+    }
+    return createAvatarGroup(config);
+  }
+
+  /**
+   * Create a loader/spinner element (Loader/Spinner component)
+   * @param {Object} config - { size: 'small'|'medium'|'large', color, text }
+   * @returns {HTMLElement} Spinner container element
+   */
+  function createLoader(config) {
+    const Loader = getComponent("Loader");
+    const Spinner = getComponent("Spinner");
+    const comp = Loader || Spinner;
+    if (comp && typeof comp.create === "function") {
+      return comp.create(config || {});
+    }
+    const div = document.createElement("div");
+    div.className = "spinner";
+    div.textContent = config && config.text ? config.text : "Loading...";
+    return div;
+  }
+
+  /**
+   * Show a toast notification
+   * Wrapper for the Toast component (components/toast.js)
+   * @param {string} message - Toast message
+   * @param {string} type - Toast type: "success", "error", "warning", "info", "loading"
+   * @param {number} duration - Duration in ms (default 4000, 0 for persistent)
+   * @returns {Object} Toast API {close, element}
+   */
+  function showToast(message, type = "info", duration = 4000) {
+    // Check if Toast component is available
+    const Toast = getComponent("Toast");
+    if (Toast && typeof Toast.show === "function") {
+      return Toast.show(message, type, duration);
+    }
+
+    // Fallback: log to console if Toast component not loaded
+    console.warn("[FlowUI] Toast component not loaded. Message:", message, "Type:", type);
+    return { close: function() {}, element: null };
+  }
+
+  // ============================================================================
+  // EXPORT PUBLIC API
+  // ============================================================================
+
+  global.FlowUI = {
+    // State management
+    initState,
+    getState,
+    setState,
+    get,
+    set,
+
+    // Screen utilities
+    createScreen,
+    createGrid,
+    createFieldWrapper,
+
+    // Form components
+    createInput,
+    createTextarea,
+    createSelect,
+    createTimePicker,
+    createDateTimePicker,
+    createRadioGroup,
+    createMultiSelect,
+    createRecordSelect,
+    createRecordMultiSelect,
+    createEnumSelect,
+    createEnumMultiSelect,
+    createDuration,
+    createEnumeration,
+    createFileUpload,
+    createCurrency,
+    createPhoneInput,
+    createCheckbox,
+
+    // Button (delegates to Button component when available; resolved at call time via getComponent)
+    createButton: function (config) {
+      const Button = getComponent("Button");
+      if (Button && typeof Button.create === "function") {
+        return Button.create(config);
+      }
+      const btn = document.createElement("button");
+      btn.type = (config && config.type) || "button";
+      btn.className = "btn " + (config && config.variant === "primary" ? "btn-primary" : "btn-ghost");
+      btn.textContent = (config && (config.text || config.label)) || "Button";
+      if (config && config.disabled) btn.disabled = true;
+      if (config && typeof config.onClick === "function") {
+        btn.addEventListener("click", config.onClick);
+      }
+      return btn;
+    },
+
+    // Stepper
+    renderStepper,
+
+    // Alerts (now shows toast notifications)
+    showToast,
+    renderAlerts, // Legacy support for static alerts
+
+    // Table
+    createDataTable,
+    createTable,
+    createSearchInput,
+
+    // Summary
+    createSummaryRow,
+
+    // Badge & Loader
+    createBadge,
+    createLoader,
+
+    // Avatar
+    createAvatar,
+    createVividAvatar,
+    createAvatarGroup,
+    createVividAvatarGroup,
+  };
+
+  console.log("[FlowUI] Module loaded successfully");
+})(typeof window !== "undefined" ? window : this);