@arquimedes.co/eureka-forms 3.0.51-test → 3.0.52-new-steps

package/dist/@Types/PredefinedSelectorFormStep.d.ts

@@ -0,0 +1,51 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+import { GSmartSelect } from './GenericFormSteps';
+export declare enum PredefinedOptionType {
+    /** ISO 3166-1 — lista de países */
+    COUNTRY = "COUNTRY",
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    STATE = "STATE",
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    CITY = "CITY",
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    CURRENCY = "CURRENCY",
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    LANGUAGE = "LANGUAGE",
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    COMMUNICATION_CHANNEL_TYPE = "COMMUNICATION_CHANNEL_TYPE",
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    DOCUMENT_TYPE = "DOCUMENT_TYPE",
+    /** Días de la semana */
+    DAY_OF_WEEK = "DAY_OF_WEEK",
+    /** Meses del año */
+    MONTH = "MONTH"
+}
+export interface PredefinedSelectorStep extends GSmartSelect {
+    type: 'PREDEFINED_SELECTOR';
+    predefinedType: PredefinedOptionType;
+    /**
+     * Solo para STATE y CITY: id del step padre que filtra las opciones.
+     *   - COUNTRY step → filtra estados del país seleccionado
+     *   - STATE step   → filtra ciudades del estado seleccionado
+     *
+     * Si no se especifica, se listan todas las opciones sin filtrar.
+     */
+    parentStepId?: string;
+    maxSize?: number;
+    defaultValue?: string;
+}
+export type PredefinedSelectorValue = string;

package/dist/@Types/PredefinedSelectorFormStep.js

@@ -0,0 +1,39 @@
+/**
+ * DRAFT — PredefinedSelectorFormStep types
+ *
+ * Paso que reemplaza tener que configurar manualmente opciones de selectores
+ * para listas fijas y controladas por Capta (países, ciudades, monedas, etc.).
+ * Las opciones vienen de APIs internas — el formulario no necesita configurarlas.
+ *
+ * También resuelve la cascada Country → State → City via parentStepId.
+ */
+// ===========================================================================
+// Tipos predefinidos disponibles
+// ===========================================================================
+export var PredefinedOptionType;
+(function (PredefinedOptionType) {
+    /** ISO 3166-1 — lista de países */
+    PredefinedOptionType["COUNTRY"] = "COUNTRY";
+    /**
+     * Departamento / provincia / estado.
+     * Requiere parentStepId apuntando a un step COUNTRY.
+     */
+    PredefinedOptionType["STATE"] = "STATE";
+    /**
+     * Ciudad / municipio.
+     * Requiere parentStepId apuntando a un step STATE (o COUNTRY si no hay STATE).
+     */
+    PredefinedOptionType["CITY"] = "CITY";
+    /** ISO 4217 — monedas (USD, COP, EUR, etc.) */
+    PredefinedOptionType["CURRENCY"] = "CURRENCY";
+    /** BCP 47 — idiomas (es, en, pt, etc.) */
+    PredefinedOptionType["LANGUAGE"] = "LANGUAGE";
+    /** Tipos de canal de comunicación (WhatsApp, Email, Teléfono) */
+    PredefinedOptionType["COMMUNICATION_CHANNEL_TYPE"] = "COMMUNICATION_CHANNEL_TYPE";
+    /** Tipos de documento de identidad por país (CC, NIT, Pasaporte, etc.) */
+    PredefinedOptionType["DOCUMENT_TYPE"] = "DOCUMENT_TYPE";
+    /** Días de la semana */
+    PredefinedOptionType["DAY_OF_WEEK"] = "DAY_OF_WEEK";
+    /** Meses del año */
+    PredefinedOptionType["MONTH"] = "MONTH";
+})(PredefinedOptionType || (PredefinedOptionType = {}));

package/dist/@Types/StepRef.d.ts

@@ -0,0 +1,135 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+/**
+ * Representa un valor estático/literal configurado en tiempo de diseño.
+ * No cambia dinámicamente según las respuestas del usuario.
+ *
+ * @typeParam T - Tipo de dato del valor estático.
+ */
+export interface FixedRef<T> {
+    /**
+     * Indica que el valor es fijo.
+     */
+    type: 'FIXED';
+    /**
+     * El valor estático de tipo T.
+     * @example "km"
+     * @example 50
+     */
+    value: T;
+}
+/**
+ * Referencia dinámica al valor actual de otro step en el mismo formulario.
+ * El runtime del formulario sustituye esta referencia por el valor que el usuario
+ * haya ingresado en el step indicado.
+ *
+ * @typeParam TAllowed - Literal(es) de tipo de step permitidos como origen.
+ *   Por defecto es `string` (cualquier tipo de step). Pasar un literal union
+ *   permite al Form Builder filtrar la lista de steps disponibles en la UI.
+ *
+ * @example
+ * ```ts
+ * // Referencia a cualquier tipo de step
+ * const ref: StepRef = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_unidad_medida',
+ *   fallback: 'm'
+ * }
+ *
+ * // Referencia restringida únicamente a pasos de tipo LOCATION
+ * const refLocation: StepRef<'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_destino_cliente',
+ *   allowedStepTypes: ['LOCATION']
+ * }
+ * ```
+ */
+export interface StepRef<TAllowed extends string = string> {
+    /**
+     * Indica que el valor se toma dinámicamente de otro paso.
+     */
+    type: 'STEP_REF';
+    /**
+     * ID del paso origen en el formulario del cual se leerá el valor en tiempo de ejecución.
+     * @example "step_ubicacion_cliente"
+     */
+    idStep: string;
+    /**
+     * Valor de respaldo (fallback) en formato de texto a utilizar mientras el paso referenciado
+     * no contenga ningún valor (ej: porque el usuario aún no llega a ese paso).
+     * Si se omite, el campo referenciador se comportará como vacío o sin unidad.
+     *
+     * @example "m"
+     */
+    fallback?: string;
+    /**
+     * Lista de tipos de pasos permitidos para esta referencia.
+     * Ayuda al Form Builder a filtrar la interfaz de selección de campos y es
+     * validada por el backend al guardar la configuración del formulario.
+     * Si no se define, se permite referenciar cualquier tipo de paso.
+     *
+     * @example ["LOCATION"]
+     * @example ["PREDEFINED_SELECTOR", "CHECKBOX"]
+     */
+    allowedStepTypes?: TAllowed[];
+}
+/**
+ * Tipo genérico para campos que admiten tanto un valor estático como una referencia dinámica.
+ *
+ * @typeParam T - Tipo del valor cuando es FIXED (ej: `string`, `number`, `boolean`).
+ * @typeParam TAllowed - Tipos de paso de origen permitidos si es STEP_REF.
+ *
+ * @example
+ * ```ts
+ * // Un sufijo de texto dinámico:
+ * const sufijo: DynamicRef<string> = { type: 'FIXED', value: 'km' };
+ *
+ * // Una coordenada geográfica que debe venir de un paso de mapa:
+ * const origen: DynamicRef<LocationCoords, 'LOCATION'> = {
+ *   type: 'STEP_REF',
+ *   idStep: 'step_mapa_inicio',
+ *   allowedStepTypes: ['LOCATION']
+ * };
+ * ```
+ */
+export type DynamicRef<T, TAllowed extends string = string> = FixedRef<T> | StepRef<TAllowed>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export declare function isFixedRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is FixedRef<T>;
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export declare function isStepRef<T, TAllowed extends string = string>(ref: DynamicRef<T, TAllowed>): ref is StepRef<TAllowed>;

package/dist/@Types/StepRef.js

@@ -0,0 +1,49 @@
+/**
+ * DRAFT — Sistema de referencias dinámicas entre steps
+ *
+ * Permite que la configuración de un paso use el valor en tiempo de ejecución
+ * de otro step del mismo formulario, en lugar de un literal fijo.
+ *
+ * Patrón de uso:
+ *
+ *   // Valor fijo definido en la configuración del formulario
+ *   suffix: { type: 'FIXED', value: 'km' }
+ *
+ *   // Valor tomado del step 'step_unidad' cuando el usuario interactúa
+ *   suffix: { type: 'STEP_REF', idStep: 'step_unidad', fallback: 'm' }
+ *
+ * Se puede aplicar a cualquier campo de configuración cuyo valor deba
+ * responder a la selección previa del usuario: sufijos, unidades, monedas,
+ * títulos dinámicos, límites numéricos, etc.
+ */
+// ---------------------------------------------------------------------------
+// Helpers de narrowing
+// ---------------------------------------------------------------------------
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo FIXED.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isFixedRef(miRef)) {
+ *   console.log("El valor es:", miRef.value);
+ * }
+ * ```
+ */
+export function isFixedRef(ref) {
+    return ref.type === 'FIXED';
+}
+/**
+ * Comprueba si la referencia dinámica recibida es de tipo STEP_REF.
+ * Funciona como Type Guard para TypeScript.
+ *
+ * @example
+ * ```ts
+ * if (isStepRef(miRef)) {
+ *   console.log("Apunta al step:", miRef.idStep);
+ * }
+ * ```
+ */
+export function isStepRef(ref) {
+    return ref.type === 'STEP_REF';
+}

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -0,0 +1,17 @@
+import { BookingStep } from '../../@Types/BookingFormStep';
+import { BookingSlot } from '../../@Types/BookingFormStep';
+import { StepProps } from '../Step';
+export interface BookingStepProps extends StepProps {
+    step: BookingStep;
+    /**
+     * Callback to fetch available slots for a given person + date.
+     * The form host wires this to their availability API.
+     * If omitted, the component shows an empty slot list.
+     */
+    fetchSlots?: (params: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+}
+declare function BookingStepComponent(props: BookingStepProps): JSX.Element;
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/BookingStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialBookingStep from './MaterialBookingStep/MaterialBookingStep';
+import { useAppSelector } from '../../hooks';
+function BookingStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialBookingStep, { ...props });
+        }
+    }
+}
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -0,0 +1,7 @@
+import { BookingStepProps } from '../BookingStep';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+declare function MaterialBookingStep({ step, editable, fetchSlots }: BookingStepProps): JSX.Element;
+export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkBookingPicker` (en Shared).
+ */
+function MaterialBookingStep({ step, editable, fetchSlots }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Selecciona una cita' : undefined },
+    });
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: onChange, label: step.label, description: step.description, durationMinutes: step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: step.personSelectionMode, persons: step.persons, collectContact: step.collectContact, fetchSlots: fetchSlots, readOnly: isReadOnly, error: error?.message }) }));
+}
+export default MaterialBookingStep;

package/dist/FormSteps/CalendarStep/CalendarStep.d.ts

@@ -0,0 +1,7 @@
+import { CalendarStep } from '../../@Types/CalendarFormStep';
+import { StepProps } from '../Step';
+export interface CalendarStepProps extends StepProps {
+    step: CalendarStep;
+}
+declare function CalendarStepComponent(props: CalendarStepProps): JSX.Element;
+export default CalendarStepComponent;

package/dist/FormSteps/CalendarStep/CalendarStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialCalendarStep from './MaterialCalendarStep/MaterialCalendarStep';
+import { useAppSelector } from '../../hooks';
+function CalendarStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialCalendarStep, { ...props });
+        }
+    }
+}
+export default CalendarStepComponent;

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.d.ts

@@ -0,0 +1,3 @@
+import { CalendarStepProps } from '../CalendarStep';
+declare function MaterialCalendarStep({ step, editable }: CalendarStepProps): JSX.Element;
+export default MaterialCalendarStep;

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useState, useCallback, useRef, useMemo } from 'react';
+import { startOfWeek, endOfWeek, addWeeks, addDays, addMonths, startOfMonth, endOfMonth, isSameMonth, isSameDay, isToday, format, parse, startOfDay, } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { Popover } from '@mui/material';
+import ArrowLeftIcon from '../../../Icons/ArrowLeftIcon';
+import ArrowRightIcon from '../../../Icons/ArrowRightIcon';
+import ViewWeekIcon from '../../../Icons/ViewWeekIcon';
+import ViewDayIcon from '../../../Icons/ViewDayIcon';
+import CalendarIcon from '../../../Icons/CalendarIcon';
+import AddIcon from '../../../Icons/AddIcon';
+import CloseIcon from '../../../Icons/CloseIcon';
+import DeleteIcon from '../../../Icons/DeleteIcon';
+import { CalendarEventCategory, CalendarDefaultView, } from '../../../@Types/CalendarFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import styles from './MaterialCalendarStep.module.css';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const CELL_HEIGHT = 48; // px per hour
+const WEEK_START = 1; // Monday
+const CATEGORY_COLORS = {
+    [CalendarEventCategory.WORKING]: '#4CAF50',
+    [CalendarEventCategory.PHYSICAL]: '#2196F3',
+    [CalendarEventCategory.VIRTUAL]: '#9C27B0',
+    [CalendarEventCategory.SPECIFIC]: '#FF9800',
+    [CalendarEventCategory.MEETING]: '#E91E63',
+    [CalendarEventCategory.BUSY]: '#607D8B',
+    [CalendarEventCategory.CUSTOM]: '#795548',
+};
+const CATEGORY_LABELS = {
+    [CalendarEventCategory.WORKING]: 'Trabajo',
+    [CalendarEventCategory.PHYSICAL]: 'Presencial',
+    [CalendarEventCategory.VIRTUAL]: 'Virtual',
+    [CalendarEventCategory.SPECIFIC]: 'Específico',
+    [CalendarEventCategory.MEETING]: 'Reunión',
+    [CalendarEventCategory.BUSY]: 'Ocupado',
+    [CalendarEventCategory.CUSTOM]: 'Personalizado',
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function parseTime(hhmm) {
+    const [h, m] = hhmm.split(':').map(Number);
+    return { h: h ?? 0, m: m ?? 0 };
+}
+function toMinutes(hhmm) {
+    const { h, m } = parseTime(hhmm);
+    return h * 60 + m;
+}
+function minutesToHHMM(mins) {
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+function isoToHHMM(iso) {
+    // "2024-06-19T09:30:00" → "09:30"
+    return iso.slice(11, 16);
+}
+function dateAndTimeToISO(date, hhmm) {
+    const { h, m } = parseTime(hhmm);
+    const d = new Date(date);
+    d.setHours(h, m, 0, 0);
+    return d.toISOString().slice(0, 19);
+}
+function isoToDate(iso) {
+    // Treat as local time (no timezone shift)
+    return parse(iso.slice(0, 19), 'yyyy-MM-dd\'T\'HH:mm:ss', new Date());
+}
+function newEventId() {
+    return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+function EventBlock({ event, minHour, template, onDelete, readOnly }) {
+    const startMins = toMinutes(isoToHHMM(event.start));
+    const endMins = toMinutes(isoToHHMM(event.end));
+    const top = (startMins - minHour * 60) * (CELL_HEIGHT / 60);
+    const height = Math.max((endMins - startMins) * (CELL_HEIGHT / 60), 18);
+    const color = template?.color ?? CATEGORY_COLORS[event.category] ?? '#607D8B';
+    const label = event.title ?? template?.name ?? CATEGORY_LABELS[event.category];
+    return (_jsxs("div", { className: styles.eventBlock, style: { top, height, backgroundColor: color }, title: `${label}  ${isoToHHMM(event.start)}–${isoToHHMM(event.end)}`, children: [_jsx("span", { className: styles.eventLabel, children: label }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), "\u2013", isoToHHMM(event.end)] }), !readOnly && (_jsx("button", { type: "button", className: styles.eventDeleteBtn, onClick: (e) => { e.stopPropagation(); onDelete(event.id); }, "aria-label": "Eliminar", children: _jsx(DeleteIcon, { size: 13 }) }))] }));
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+function MaterialCalendarStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    // ------------------------------------------------------------------
+    // Resolve config
+    // ------------------------------------------------------------------
+    const minTimeStr = step.minTime ?? '00:00';
+    const maxTimeStr = step.maxTime ?? '23:00';
+    const minHour = parseTime(minTimeStr).h;
+    const maxHour = parseTime(maxTimeStr).h + 1;
+    const totalHours = maxHour - minHour;
+    const showWeekends = step.showWeekends ?? true;
+    const allowedCategories = (step.allowedCategories?.length ? step.allowedCategories : Object.values(CalendarEventCategory));
+    const defaultViewMode = (step.defaultView ?? CalendarDefaultView.WEEK);
+    // ------------------------------------------------------------------
+    // Form value
+    // ------------------------------------------------------------------
+    const { value, onChange } = useFormStep(step, {
+        defaultValue: null,
+        rules: {
+            required: step.required ? 'Este campo es obligatorio' : undefined,
+        },
+    });
+    const events = useMemo(() => value?.events ?? [], [value?.events]);
+    const setEvents = useCallback((updater) => {
+        onChange({
+            type: 'CALENDAR_VALUE',
+            events: updater(events),
+            timezone: value?.timezone,
+        });
+    }, [events, value?.timezone, onChange]);
+    const deleteEvent = useCallback((id) => setEvents((prev) => prev.filter((e) => e.id !== id)), [setEvents]);
+    // ------------------------------------------------------------------
+    // Navigation state
+    // ------------------------------------------------------------------
+    const [viewMode, setViewMode] = useState(defaultViewMode);
+    const [current, setCurrent] = useState(() => startOfDay(new Date()));
+    const [createState, setCreate] = useState(null);
+    // Create form
+    const [newCategory, setNewCategory] = useState(allowedCategories[0] ?? CalendarEventCategory.WORKING);
+    const [newTitle, setNewTitle] = useState('');
+    const [newStart, setNewStart] = useState('09:00');
+    const [newEnd, setNewEnd] = useState('10:00');
+    const gridRef = useRef(null);
+    // ------------------------------------------------------------------
+    // Derived view dates
+    // ------------------------------------------------------------------
+    const weekStart = startOfWeek(current, { weekStartsOn: WEEK_START });
+    const weekEnd = endOfWeek(current, { weekStartsOn: WEEK_START });
+    const visibleDays = (() => {
+        if (viewMode === 'day')
+            return [current];
+        const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
+        return showWeekends ? days : days.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
+    })();
+    // ------------------------------------------------------------------
+    // Navigate
+    // ------------------------------------------------------------------
+    const prev = () => {
+        if (viewMode === 'month')
+            setCurrent((d) => addMonths(d, -1));
+        else if (viewMode === 'week')
+            setCurrent((d) => addWeeks(d, -1));
+        else
+            setCurrent((d) => addDays(d, -1));
+    };
+    const next = () => {
+        if (viewMode === 'month')
+            setCurrent((d) => addMonths(d, 1));
+        else if (viewMode === 'week')
+            setCurrent((d) => addWeeks(d, 1));
+        else
+            setCurrent((d) => addDays(d, 1));
+    };
+    const navLabel = () => {
+        if (viewMode === 'month')
+            return format(current, 'MMMM yyyy', { locale: es });
+        if (viewMode === 'week') {
+            const s = format(weekStart, 'd MMM', { locale: es });
+            const e = format(weekEnd, 'd MMM yyyy', { locale: es });
+            return `${s} – ${e}`;
+        }
+        return format(current, 'EEEE d \'de\' MMMM yyyy', { locale: es });
+    };
+    // ------------------------------------------------------------------
+    // Events per day (for time-grid views)
+    // ------------------------------------------------------------------
+    const eventsForDay = (day) => events.filter((e) => isSameDay(isoToDate(e.start), day));
+    // ------------------------------------------------------------------
+    // Create flow
+    // ------------------------------------------------------------------
+    const handleGridClick = (e, day) => {
+        if (isReadOnly)
+            return;
+        const rect = (e.currentTarget).getBoundingClientRect();
+        const relY = e.clientY - rect.top;
+        const clickedMins = Math.round((relY / CELL_HEIGHT) * 60) * 30; // snap to 30min
+        const startMins = minHour * 60 + clickedMins;
+        const startHHMM = minutesToHHMM(Math.min(startMins, (maxHour - 1) * 60));
+        const endHHMM = minutesToHHMM(Math.min(startMins + 60, maxHour * 60));
+        setNewStart(startHHMM);
+        setNewEnd(endHHMM);
+        setNewCategory(allowedCategories[0] ?? CalendarEventCategory.WORKING);
+        setNewTitle('');
+        setCreate({ anchorEl: e.currentTarget, date: day, startMins });
+    };
+    const handleMonthDayClick = (day) => {
+        setCurrent(day);
+        setViewMode('day');
+    };
+    const handleCreate = () => {
+        if (!createState)
+            return;
+        const startISO = dateAndTimeToISO(createState.date, newStart);
+        const endISO = dateAndTimeToISO(createState.date, newEnd);
+        const template = step.eventTemplates?.find((t) => t.category === newCategory);
+        const evt = {
+            id: newEventId(),
+            category: newCategory,
+            start: startISO,
+            end: endISO,
+            title: newTitle || undefined,
+            eventTemplateId: template?.id,
+        };
+        setEvents((prev) => [...prev, evt]);
+        setCreate(null);
+    };
+    // ------------------------------------------------------------------
+    // Hour labels column
+    // ------------------------------------------------------------------
+    const hourLabels = Array.from({ length: totalHours }, (_, i) => minHour + i);
+    // ------------------------------------------------------------------
+    // Time-grid view (week / day)
+    // ------------------------------------------------------------------
+    const renderTimeGrid = () => (_jsxs("div", { className: styles.gridWrapper, children: [_jsxs("div", { className: styles.gridHeader, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.cornerCell }), visibleDays.map((day) => (_jsxs("div", { className: `${styles.dayHeader} ${isToday(day) ? styles.dayHeaderToday : ''}`, onClick: () => { setCurrent(day); setViewMode('day'); }, children: [_jsx("span", { className: styles.dayHeaderDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: `${styles.dayHeaderNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') })] }, day.toISOString())))] }), _jsx("div", { className: styles.gridBody, ref: gridRef, children: _jsxs("div", { className: styles.gridInner, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.hourLabels, children: hourLabels.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 && `${String(h).padStart(2, '0')}:00` }, h))) }), visibleDays.map((day) => (_jsxs("div", { className: styles.dayColumn, style: { height: totalHours * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hourLabels.map((h) => (_jsx("div", { className: styles.hourLine, style: { top: (h - minHour) * CELL_HEIGHT } }, h))), eventsForDay(day).map((evt) => (_jsx(EventBlock, { event: evt, minHour: minHour, template: step.eventTemplates?.find((t) => t.category === evt.category), onDelete: deleteEvent, readOnly: isReadOnly }, evt.id)))] }, day.toISOString())))] }) })] }));
+    // ------------------------------------------------------------------
+    // Month view
+    // ------------------------------------------------------------------
+    const renderMonth = () => {
+        const mStart = startOfMonth(current);
+        const mEnd = endOfMonth(current);
+        const gridStart = startOfWeek(mStart, { weekStartsOn: WEEK_START });
+        const gridEnd = endOfWeek(mEnd, { weekStartsOn: WEEK_START });
+        const days = [];
+        let d = gridStart;
+        while (d <= gridEnd) {
+            days.push(d);
+            d = addDays(d, 1);
+        }
+        const DOW_LABELS = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
+        return (_jsxs("div", { className: styles.monthGrid, children: [DOW_LABELS.map((lbl) => (_jsx("div", { className: styles.monthDowHeader, children: lbl }, lbl))), days.map((day) => {
+                    const dayEvts = eventsForDay(day);
+                    const outside = !isSameMonth(day, current);
+                    return (_jsxs("div", { className: [
+                            styles.monthCell,
+                            outside ? styles.monthCellOutside : '',
+                            isToday(day) ? styles.monthCellToday : '',
+                        ].filter(Boolean).join(' '), onClick: () => handleMonthDayClick(day), children: [_jsx("span", { className: `${styles.monthCellNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') }), dayEvts.slice(0, 3).map((evt) => {
+                                const color = CATEGORY_COLORS[evt.category] ?? '#607D8B';
+                                return (_jsx("div", { className: styles.monthEventDot, style: { backgroundColor: color }, children: evt.title ?? CATEGORY_LABELS[evt.category] }, evt.id));
+                            }), dayEvts.length > 3 && (_jsxs("div", { className: styles.monthMoreLabel, children: ["+", dayEvts.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
+                })] }));
+    };
+    // ------------------------------------------------------------------
+    // Create popover
+    // ------------------------------------------------------------------
+    const needsTitle = newCategory === CalendarEventCategory.MEETING ||
+        newCategory === CalendarEventCategory.CUSTOM;
+    const renderCreatePopover = () => {
+        if (!createState)
+            return null;
+        return (_jsxs(Popover, { open: true, anchorEl: createState.anchorEl, onClose: () => setCreate(null), anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.popoverPaper } }, children: [_jsxs("div", { className: styles.popoverHeader, children: [_jsx("span", { className: styles.popoverTitle, children: "Nuevo evento" }), _jsx("button", { type: "button", className: styles.popoverClose, onClick: () => setCreate(null), children: _jsx(CloseIcon, { size: 16 }) })] }), _jsxs("div", { className: styles.popoverBody, children: [_jsx("div", { className: styles.popoverLabel, children: "Tipo" }), _jsx("div", { className: styles.categoryGrid, children: allowedCategories.map((cat) => (_jsxs("button", { type: "button", className: `${styles.categoryChip} ${newCategory === cat ? styles.categoryChipActive : ''}`, style: newCategory === cat ? { backgroundColor: CATEGORY_COLORS[cat], color: '#fff' } : {}, onClick: () => setNewCategory(cat), children: [_jsx("span", { className: styles.categoryDot, style: { backgroundColor: CATEGORY_COLORS[cat] } }), CATEGORY_LABELS[cat]] }, cat))) }), needsTitle && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverLabel, children: "Nombre" }), _jsx("input", { className: styles.popoverInput, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "Ej: Standup, Visita cliente\u2026", autoFocus: true })] })), _jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Inicio" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newStart, onChange: (e) => setNewStart(e.target.value) })] }), _jsx("span", { className: styles.timeDash, children: "\u2013" }), _jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Fin" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newEnd, onChange: (e) => setNewEnd(e.target.value) })] })] }), _jsxs("button", { type: "button", className: styles.createBtn, style: { backgroundColor: CATEGORY_COLORS[newCategory] }, onClick: handleCreate, children: [_jsx(AddIcon, { size: 16 }), "Agregar bloque"] })] })] }));
+    };
+    // ------------------------------------------------------------------
+    // Render
+    // ------------------------------------------------------------------
+    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.viewSwitcher, children: [_jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'day' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('day'), title: "D\u00EDa", children: _jsx(ViewDayIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'week' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('week'), title: "Semana", children: _jsx(ViewWeekIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'month' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('month'), title: "Mes", children: _jsx(CalendarIcon, { size: 18 }) })] }), _jsxs("div", { className: styles.navGroup, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: prev, children: _jsx(ArrowLeftIcon, { size: 20 }) }), _jsx("span", { className: styles.navLabel, children: navLabel() }), _jsx("button", { type: "button", className: styles.navBtn, onClick: next, children: _jsx(ArrowRightIcon, { size: 20 }) })] }), events.length > 0 && (_jsxs("span", { className: styles.eventBadge, children: [events.length, " evento", events.length !== 1 ? 's' : ''] })), !isReadOnly && viewMode !== 'month' && (_jsx("span", { className: styles.hintText, children: "Clic en el grid para agregar" }))] }), _jsx("div", { className: styles.calendarCard, children: viewMode === 'month' ? renderMonth() : renderTimeGrid() }), !isReadOnly && renderCreatePopover()] }));
+}
+export default MaterialCalendarStep;