@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/questions/_shared/hooks/useBasicQuestionGroup.js

@@ -1 +1,222 @@
-"use client";import{useState as t,useEffect as e,useRef as r}from"react";import{useExamQuestionStore as n}from"../../../../shared/lib/stores/examQuestionStore";export function getGroupNumberForIndex(t,e){if(!e||0===e.length||void 0===t)return 1;let r=0;for(const n of e)if(r+=n.questionCount,t<r)return n.number;return e[e.length-1]?.number??1}export function getIsFirstInGroup(t,e){if(!e||0===e.length||void 0===t)return!0;let r=0;for(const n of e){if(t===r)return!0;if(r+=n.questionCount,t<r)return!1}return!1}export function useBasicQuestionGroup({partId:l,groups:i,questionIndexInPart:s,initialData:u,articleCount:a=0}){const o=n(t=>t.setSharedPassageData),g=n(t=>t.getSharedPassageData),p=Boolean(i&&i.length>0),c=getGroupNumberForIndex(s,i),m=getIsFirstInGroup(s,i),f=a>0?Array.from({length:a},()=>({name:"",content:"",imageUrl:""})):[],b=(()=>{if(p&&l){const t=g(l,c);if(t)return{title:t.passageTitle??u?.title??"",subtitle:t.passageSubtitle??u?.subtitle??"",content:t.groupContent??t.passage??u?.content??"",imageUrl:t.imageUrl??u?.imageUrl??"",articles:t.articles??u?.articles??f}}return{title:u?.title??"",subtitle:u?.subtitle??"",content:u?.content??"",imageUrl:u?.imageUrl??"",articles:u?.articles??f}})(),[U,G]=t(b.title??""),[I,d]=t(b.subtitle??""),[C,S]=t(b.content??""),[h,x]=t(b.imageUrl??""),[T,F]=t(b.articles??f),q=r(c);e(()=>{if(!p||!l)return;if(!u)return;if(g(l,c))return;const t=u.title||null,e=u.subtitle||null,r=u.content||null,n=u.imageUrl||null,i=u.articles||null;null===t&&null===e&&null===r&&null===n&&null===i||(null!==t&&G(t),null!==e&&d(e),null!==r&&S(r),null!==n&&x(n),null!==i&&F(i),o(l,c,{passageTitle:t??"",passageSubtitle:e??"",groupContent:r??"",passage:r??"",imageUrl:n??"",articles:i??f}))},[u,l,c,p]),e(()=>{if(q.current===c)return;if(q.current=c,!p||!l)return;const t=g(l,c);t&&(t.passageTitle||t.passageSubtitle||t.groupContent||t.passage||t.imageUrl||t.articles)?(G(t.passageTitle??""),d(t.passageSubtitle??""),S(t.groupContent??t.passage??""),x(t.imageUrl??""),F(t.articles??f)):(G(u?.title??""),d(u?.subtitle??""),S(u?.content??""),x(u?.imageUrl??""),F(u?.articles??f))},[c,l,p]);const D=(t,e,r,n,i)=>{p&&l&&o(l,c,{passageTitle:t,passageSubtitle:e,groupContent:r,passage:r,imageUrl:n,articles:i??T})};return{isGrouped:p,currentGroupNumber:c,isFirstInGroup:m,groupTitle:U,groupSubtitle:I,groupContent:C,imageUrl:h,articles:T,setGroupTitle:t=>{G(t),D(t,I,C,h)},setGroupSubtitle:t=>{d(t),D(U,t,C,h)},setGroupContent:t=>{S(t),D(U,I,t,h)},setImageUrl:t=>{x(t),D(U,I,C,t)},setArticles:t=>{F(t),D(U,I,C,h,t)}}}
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Derives which group number a question at `questionIndexInPart` belongs to,
+ * given the part's group configuration array.
+ *
+ * Example: groups = [{ number:1, questionCount:3 }, { number:2, questionCount:3 }]
+ *   index 0,1,2 → group 1
+ *   index 3,4,5 → group 2
+ */
+export function getGroupNumberForIndex(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return 1;
+    let cumulative = 0;
+    for (const group of groups) {
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative) {
+            return group.number;
+        }
+    }
+    return groups[groups.length - 1]?.number ?? 1;
+}
+/**
+ * Checks if the current question is the first question in its group array
+ */
+export function getIsFirstInGroup(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return true;
+    let cumulative = 0;
+    for (const group of groups) {
+        if (questionIndexInPart === cumulative)
+            return true;
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative)
+            return false;
+    }
+    return false;
+}
+// ---------------------------------------------------------------------------
+// Hook implementation
+// ---------------------------------------------------------------------------
+/**
+ * `useBasicQuestionGroup`
+ *
+ * Manages the three shared group fields (title, content, imageUrl) for the
+ * "basic" question group used by ANSWER_THE_QUESTION, CHOOSE_THE_CORRECT_ANSWER,
+ * and FILL_IN_BLANK.
+ *
+ * Reads initial values from `examQuestionStore` (shared across all questions in
+ * the same group), falls back to `initialData`, and writes every change back to
+ * the store so sibling questions instantly see the updated values.
+ */
+export function useBasicQuestionGroup({ partId, groups, questionIndexInPart, initialData, articleCount = 0, }) {
+    const setSharedPassageData = useExamQuestionStore((s) => s.setSharedPassageData);
+    const getSharedPassageData = useExamQuestionStore((s) => s.getSharedPassageData);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    const isFirstInGroup = getIsFirstInGroup(questionIndexInPart, groups);
+    // ------------------------------------------------------------------
+    // Initialise state: store > initialData > empty string
+    // ------------------------------------------------------------------
+    // Create default empty articles array when articleCount > 0
+    const defaultArticles = articleCount > 0
+        ? Array.from({ length: articleCount }, () => ({ name: '', content: '', imageUrl: '' }))
+        : [];
+    const resolveInitial = () => {
+        if (isGrouped && partId) {
+            const stored = getSharedPassageData(partId, currentGroupNumber);
+            if (stored) {
+                return {
+                    title: stored.passageTitle ?? initialData?.title ?? '',
+                    subtitle: stored.passageSubtitle ?? initialData?.subtitle ?? '',
+                    content: stored.groupContent ?? stored.passage ?? initialData?.content ?? '',
+                    imageUrl: stored.imageUrl ?? initialData?.imageUrl ?? '',
+                    articles: stored.articles ?? initialData?.articles ?? defaultArticles,
+                };
+            }
+        }
+        return {
+            title: initialData?.title ?? '',
+            subtitle: initialData?.subtitle ?? '',
+            content: initialData?.content ?? '',
+            imageUrl: initialData?.imageUrl ?? '',
+            articles: initialData?.articles ?? defaultArticles,
+        };
+    };
+    const initial = resolveInitial();
+    const [groupTitle, setGroupTitleState] = useState(initial.title ?? '');
+    const [groupSubtitle, setGroupSubtitleState] = useState(initial.subtitle ?? '');
+    const [groupContent, setGroupContentState] = useState(initial.content ?? '');
+    const [imageUrl, setImageUrlState] = useState(initial.imageUrl ?? '');
+    const [articles, setArticlesState] = useState(initial.articles ?? defaultArticles);
+    // Track the last rendered group number so we can re-sync when navigating
+    const prevGroupNumberRef = useRef(currentGroupNumber);
+    // Track whether we have already seeded from initialData for the current group
+    // ------------------------------------------------------------------
+    // Seed from initialData when it becomes available (e.g. after async fetch).
+    // Only fills fields that are missing from the store — never overwrites
+    // values the user has already typed.
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        if (!initialData)
+            return;
+        const stored = getSharedPassageData(partId, currentGroupNumber);
+        // If a stored record already exists for this group, it means the data has
+        // been actively managed (written by persistToStore). Do NOT re-seed from
+        // initialData — the user may have intentionally cleared a field (e.g.
+        // deleted the group image). Falsy-checking individual stored fields like
+        // `!stored?.imageUrl` would treat '' the same as "never set", causing
+        // cleared values to be restored from initialData.
+        if (stored)
+            return;
+        const newTitle = initialData.title || null;
+        const newSubtitle = initialData.subtitle || null;
+        const newContent = initialData.content || null;
+        const newImage = initialData.imageUrl || null;
+        const newArticles = initialData.articles || null;
+        if (newTitle === null && newSubtitle === null && newContent === null && newImage === null && newArticles === null)
+            return;
+        if (newTitle !== null)
+            setGroupTitleState(newTitle);
+        if (newSubtitle !== null)
+            setGroupSubtitleState(newSubtitle);
+        if (newContent !== null)
+            setGroupContentState(newContent);
+        if (newImage !== null)
+            setImageUrlState(newImage);
+        if (newArticles !== null)
+            setArticlesState(newArticles);
+        setSharedPassageData(partId, currentGroupNumber, {
+            passageTitle: newTitle ?? '',
+            passageSubtitle: newSubtitle ?? '',
+            groupContent: newContent ?? '',
+            passage: newContent ?? '',
+            imageUrl: newImage ?? '',
+            articles: newArticles ?? defaultArticles,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialData, partId, currentGroupNumber, isGrouped]);
+    // ------------------------------------------------------------------
+    // Re-sync when the user navigates to a different question (group may change)
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        if (prevGroupNumberRef.current === currentGroupNumber)
+            return;
+        prevGroupNumberRef.current = currentGroupNumber;
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedPassageData(partId, currentGroupNumber);
+        if (stored && (stored.passageTitle || stored.passageSubtitle || stored.groupContent || stored.passage || stored.imageUrl || stored.articles)) {
+            setGroupTitleState(stored.passageTitle ?? '');
+            setGroupSubtitleState(stored.passageSubtitle ?? '');
+            setGroupContentState(stored.groupContent ?? stored.passage ?? '');
+            setImageUrlState(stored.imageUrl ?? '');
+            setArticlesState(stored.articles ?? defaultArticles);
+        }
+        else {
+            setGroupTitleState(initialData?.title ?? '');
+            setGroupSubtitleState(initialData?.subtitle ?? '');
+            setGroupContentState(initialData?.content ?? '');
+            setImageUrlState(initialData?.imageUrl ?? '');
+            setArticlesState(initialData?.articles ?? defaultArticles);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentGroupNumber, partId, isGrouped]);
+    // ------------------------------------------------------------------
+    // Helpers: write state + persist to store
+    // ------------------------------------------------------------------
+    const persistToStore = (title, subtitle, content, image, arts) => {
+        if (!isGrouped || !partId)
+            return;
+        setSharedPassageData(partId, currentGroupNumber, {
+            passageTitle: title,
+            passageSubtitle: subtitle,
+            groupContent: content,
+            passage: content,
+            imageUrl: image,
+            articles: arts ?? articles,
+        });
+    };
+    const setGroupTitle = (value) => {
+        setGroupTitleState(value);
+        persistToStore(value, groupSubtitle, groupContent, imageUrl);
+    };
+    const setGroupSubtitle = (value) => {
+        setGroupSubtitleState(value);
+        persistToStore(groupTitle, value, groupContent, imageUrl);
+    };
+    const setGroupContent = (value) => {
+        setGroupContentState(value);
+        persistToStore(groupTitle, groupSubtitle, value, imageUrl);
+    };
+    const setImageUrl = (value) => {
+        setImageUrlState(value);
+        persistToStore(groupTitle, groupSubtitle, groupContent, value);
+    };
+    const setArticles = (value) => {
+        setArticlesState(value);
+        persistToStore(groupTitle, groupSubtitle, groupContent, imageUrl, value);
+    };
+    return {
+        isGrouped,
+        currentGroupNumber,
+        isFirstInGroup,
+        groupTitle,
+        groupSubtitle,
+        groupContent,
+        imageUrl,
+        articles,
+        setGroupTitle,
+        setGroupSubtitle,
+        setGroupContent,
+        setImageUrl,
+        setArticles,
+    };
+}

package/dist/components/questions/_shared/hooks/useCompareImagesGroup.js

@@ -1 +1,140 @@
-import{useCallback as e,useEffect as a,useMemo as r,useRef as m,useState as i}from"react";import{useExamQuestionStore as n}from"../../../../shared/lib/stores/examQuestionStore";export function useCompareImagesGroup(t,d,g){const l=n(e=>e.setSharedCompareImagesData),I=n(e=>e.getSharedCompareImagesData),o=n(e=>e.sharedCompareImagesData),U=r(()=>({candidateImageUrl:"",examinerImageUrl:""}),[]),c=void 0!==t&&void 0!==d,s=(()=>{if(c){const e=I(t,d);if(e&&(e.candidateImageUrl||e.examinerImageUrl))return{candidateImageUrl:e.candidateImageUrl||g?.candidateImageUrl||"",examinerImageUrl:e.examinerImageUrl||g?.examinerImageUrl||""}}return{candidateImageUrl:g?.candidateImageUrl||"",examinerImageUrl:g?.examinerImageUrl||""}})(),[x,u]=i(s.candidateImageUrl),[p,f]=i(s.examinerImageUrl),v=m(d);a(()=>{if(!c)return;if(!g)return;const e=I(t,d);if((!e||!e.candidateImageUrl&&!e.examinerImageUrl)&&(g.candidateImageUrl||g.examinerImageUrl)){const a=g.candidateImageUrl||"",r=g.examinerImageUrl||"";u(a),f(r),l(t,d,{...e||{},candidateImageUrl:a,examinerImageUrl:r})}},[g,t,d,c]),a(()=>{if(v.current===d)return;if(v.current=d,!c)return;const e=I(t,d);e&&(e.candidateImageUrl||e.examinerImageUrl)?(u(e.candidateImageUrl||""),f(e.examinerImageUrl||"")):(u(g?.candidateImageUrl||""),f(g?.examinerImageUrl||""))},[d,t,c]),a(()=>{if(!c)return;const e=I(t,d);if(!e||!e.candidateImageUrl&&!e.examinerImageUrl)try{const e=`exam_question_${t}_${d}`,a=localStorage.getItem(e);if(a){const e=JSON.parse(a),r=e.questionGroup?.payload?.candidateImageUrl,m=e.questionGroup?.payload?.examinerImageUrl;(r||m)&&(u(r||""),f(m||""),l(t,d,{candidateImageUrl:r||"",examinerImageUrl:m||""}))}}catch(e){console.error("Error parsing localStorage question data:",e)}},[t,d,c,I,l]),a(()=>{if(!c)return;const e=I(t,d);e&&(u(a=>void 0!==e.candidateImageUrl&&a!==e.candidateImageUrl?e.candidateImageUrl:a),f(a=>void 0!==e.examinerImageUrl&&a!==e.examinerImageUrl?e.examinerImageUrl:a))},[o,c,t,d,I]);const S=(e,a)=>{if(!c)return;const r=I(t,d)||U;l(t,d,{...r,...void 0!==e&&{candidateImageUrl:e},...void 0!==a&&{examinerImageUrl:a}})};return{candidateImageUrl:x,examinerImageUrl:p,updateCandidateImage:e(e=>{u(e),S(e,void 0)},[c,t,d,I,l,U]),updateExaminerImage:e(e=>{f(e),S(void 0,e)},[c,t,d,I,l,U]),isValid:c}}
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+export function useCompareImagesGroup(partId, groupNumber, initialData) {
+    const setSharedCompareImagesData = useExamQuestionStore((s) => s.setSharedCompareImagesData);
+    const getSharedCompareImagesData = useExamQuestionStore((s) => s.getSharedCompareImagesData);
+    const sharedCompareImagesData = useExamQuestionStore((s) => s.sharedCompareImagesData);
+    const emptyData = useMemo(() => ({ candidateImageUrl: '', examinerImageUrl: '' }), []);
+    // Valid only if we have both identifiers
+    const isValid = partId !== undefined && groupNumber !== undefined;
+    const resolveInitial = () => {
+        if (isValid) {
+            const stored = getSharedCompareImagesData(partId, groupNumber);
+            if (stored && (stored.candidateImageUrl || stored.examinerImageUrl)) {
+                return {
+                    candidateImageUrl: stored.candidateImageUrl || initialData?.candidateImageUrl || '',
+                    examinerImageUrl: stored.examinerImageUrl || initialData?.examinerImageUrl || '',
+                };
+            }
+        }
+        return {
+            candidateImageUrl: initialData?.candidateImageUrl || '',
+            examinerImageUrl: initialData?.examinerImageUrl || '',
+        };
+    };
+    const initial = resolveInitial();
+    const [candidateImageUrl, setCandidateImageUrl] = useState(initial.candidateImageUrl);
+    const [examinerImageUrl, setExaminerImageUrl] = useState(initial.examinerImageUrl);
+    const prevGroupNumberRef = useRef(groupNumber);
+    // Initialize from initialData on mount or group load
+    useEffect(() => {
+        if (!isValid)
+            return;
+        if (!initialData)
+            return;
+        const stored = getSharedCompareImagesData(partId, groupNumber);
+        if (stored && (stored.candidateImageUrl || stored.examinerImageUrl))
+            return;
+        if (initialData.candidateImageUrl || initialData.examinerImageUrl) {
+            const newCandidate = initialData.candidateImageUrl || '';
+            const newExaminer = initialData.examinerImageUrl || '';
+            setCandidateImageUrl(newCandidate);
+            setExaminerImageUrl(newExaminer);
+            setSharedCompareImagesData(partId, groupNumber, {
+                ...(stored || {}),
+                candidateImageUrl: newCandidate,
+                examinerImageUrl: newExaminer,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialData, partId, groupNumber, isValid]);
+    // Handle group number changes
+    useEffect(() => {
+        if (prevGroupNumberRef.current === groupNumber)
+            return;
+        prevGroupNumberRef.current = groupNumber;
+        if (!isValid)
+            return;
+        const stored = getSharedCompareImagesData(partId, groupNumber);
+        if (stored && (stored.candidateImageUrl || stored.examinerImageUrl)) {
+            setCandidateImageUrl(stored.candidateImageUrl || '');
+            setExaminerImageUrl(stored.examinerImageUrl || '');
+        }
+        else {
+            setCandidateImageUrl(initialData?.candidateImageUrl || '');
+            setExaminerImageUrl(initialData?.examinerImageUrl || '');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [groupNumber, partId, isValid]);
+    // Sync from local storage if component mounts and store is empty
+    useEffect(() => {
+        if (!isValid)
+            return;
+        const currentData = getSharedCompareImagesData(partId, groupNumber);
+        if (!currentData || (!currentData.candidateImageUrl && !currentData.examinerImageUrl)) {
+            try {
+                const localStorageKey = `exam_question_${partId}_${groupNumber}`;
+                const savedData = localStorage.getItem(localStorageKey);
+                if (savedData) {
+                    const parsed = JSON.parse(savedData);
+                    const candidate = parsed.questionGroup?.payload?.candidateImageUrl;
+                    const examiner = parsed.questionGroup?.payload?.examinerImageUrl;
+                    if (candidate || examiner) {
+                        setCandidateImageUrl(candidate || '');
+                        setExaminerImageUrl(examiner || '');
+                        setSharedCompareImagesData(partId, groupNumber, {
+                            candidateImageUrl: candidate || '',
+                            examinerImageUrl: examiner || '',
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error parsing localStorage question data:', error);
+            }
+        }
+    }, [partId, groupNumber, isValid, getSharedCompareImagesData, setSharedCompareImagesData]);
+    // Subscribe to external store changes
+    useEffect(() => {
+        if (!isValid)
+            return;
+        const stored = getSharedCompareImagesData(partId, groupNumber);
+        if (stored) {
+            setCandidateImageUrl((prev) => {
+                if (stored.candidateImageUrl !== undefined && prev !== stored.candidateImageUrl)
+                    return stored.candidateImageUrl;
+                return prev;
+            });
+            setExaminerImageUrl((prev) => {
+                if (stored.examinerImageUrl !== undefined && prev !== stored.examinerImageUrl)
+                    return stored.examinerImageUrl;
+                return prev;
+            });
+        }
+    }, [sharedCompareImagesData, isValid, partId, groupNumber, getSharedCompareImagesData]);
+    const persistToStore = (candidateUrl, examinerUrl) => {
+        if (!isValid)
+            return;
+        const currentData = getSharedCompareImagesData(partId, groupNumber) || emptyData;
+        setSharedCompareImagesData(partId, groupNumber, {
+            ...currentData,
+            ...(candidateUrl !== undefined && { candidateImageUrl: candidateUrl }),
+            ...(examinerUrl !== undefined && { examinerImageUrl: examinerUrl }),
+        });
+    };
+    const updateCandidateImage = useCallback((url) => {
+        setCandidateImageUrl(url);
+        persistToStore(url, undefined);
+    }, [isValid, partId, groupNumber, getSharedCompareImagesData, setSharedCompareImagesData, emptyData]);
+    const updateExaminerImage = useCallback((url) => {
+        setExaminerImageUrl(url);
+        persistToStore(undefined, url);
+    }, [isValid, partId, groupNumber, getSharedCompareImagesData, setSharedCompareImagesData, emptyData]);
+    return {
+        candidateImageUrl,
+        examinerImageUrl,
+        updateCandidateImage,
+        updateExaminerImage,
+        isValid,
+    };
+}

package/dist/components/questions/_shared/hooks/useImageQuestionGroup.js

@@ -1 +1,123 @@
-"use client";import{useState as e,useEffect as r,useRef as t}from"react";import{useExamQuestionStore as n}from"../../../../shared/lib/stores/examQuestionStore";export function getGroupNumberForIndex(e,r){if(!r||0===r.length||void 0===e)return 1;let t=0;for(const n of r)if(t+=n.questionCount,e<t)return n.number;return r[r.length-1]?.number??1}export function useImageQuestionGroup({partId:i,groups:s,questionIndexInPart:a,initialData:o}){const u=n(e=>e.setSharedSceneData),g=n(e=>e.getSharedSceneData),m=n(e=>e.sharedSceneData),c=Boolean(s&&s.length>0),f=getGroupNumberForIndex(a,s),l=(()=>{if(c&&i){const e=g(i,f);if(e&&void 0!==e.images)return{images:e.images&&e.images.length>0?e.images:o?.images??[]}}return{images:o?.images??[]}})(),[d,p]=e(l.images??[]),h=t(f);r(()=>{if(!c||!i)return;if(!o)return;const e=g(i,f);if(e&&void 0!==e.images)return;const r=o.images&&o.images.length>0?o.images:null;null!==r&&(p(r),u(i,f,{...e||{},images:r}))},[o,i,f,c]),r(()=>{if(h.current===f)return;if(h.current=f,!c||!i)return;const e=g(i,f);e&&e.images&&e.images.length>0?p(e.images):p(o?.images??[])},[f,i,c]),r(()=>{if(!c||!i)return;const e=g(i,f);e&&e.images&&p(r=>JSON.stringify(r)!==JSON.stringify(e.images)?e.images||[]:r)},[m,c,i,f,g]);const S=e=>{if(!c||!i)return;const r=g(i,f);u(i,f,{...r||{},images:e})};return{isGrouped:c,currentGroupNumber:f,images:d,setImages:e=>{"function"==typeof e?p(r=>{const t=e(r);return S(t),t}):(p(e),S(e))}}}
+'use client';
+import { useState, useEffect, useRef } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+// Reusing helper from useSceneQuestionGroup
+export function getGroupNumberForIndex(questionIndexInPart, groups) {
+    if (!groups || groups.length === 0 || questionIndexInPart === undefined)
+        return 1;
+    let cumulative = 0;
+    for (const group of groups) {
+        cumulative += group.questionCount;
+        if (questionIndexInPart < cumulative) {
+            return group.number;
+        }
+    }
+    return groups[groups.length - 1]?.number ?? 1;
+}
+export function useImageQuestionGroup({ partId, groups, questionIndexInPart, initialData, }) {
+    const setSharedSceneData = useExamQuestionStore((s) => s.setSharedSceneData);
+    const getSharedSceneData = useExamQuestionStore((s) => s.getSharedSceneData);
+    const sharedSceneData = useExamQuestionStore((s) => s.sharedSceneData);
+    const isGrouped = Boolean(groups && groups.length > 0);
+    const currentGroupNumber = getGroupNumberForIndex(questionIndexInPart, groups);
+    const resolveInitial = () => {
+        if (isGrouped && partId) {
+            const stored = getSharedSceneData(partId, currentGroupNumber);
+            if (stored && stored.images !== undefined) {
+                return {
+                    images: stored.images && stored.images.length > 0
+                        ? stored.images
+                        : initialData?.images ?? [],
+                };
+            }
+        }
+        return {
+            images: initialData?.images ?? [],
+        };
+    };
+    const initial = resolveInitial();
+    const [imagesState, setImagesState] = useState(initial.images ?? []);
+    const prevGroupNumberRef = useRef(currentGroupNumber);
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        if (!initialData)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        if (stored && stored.images !== undefined)
+            return;
+        const newImages = initialData.images && initialData.images.length > 0
+            ? initialData.images
+            : null;
+        if (newImages === null)
+            return;
+        setImagesState(newImages);
+        // Keep existing stored data if any, just augment the `images`
+        setSharedSceneData(partId, currentGroupNumber, {
+            ...(stored || {}),
+            images: newImages,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialData, partId, currentGroupNumber, isGrouped]);
+    useEffect(() => {
+        if (prevGroupNumberRef.current === currentGroupNumber)
+            return;
+        prevGroupNumberRef.current = currentGroupNumber;
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        if (stored && stored.images && stored.images.length > 0) {
+            setImagesState(stored.images);
+        }
+        else {
+            setImagesState(initialData?.images ?? []);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentGroupNumber, partId, isGrouped]);
+    // ------------------------------------------------------------------
+    // Subscribe to external store changes (from other questions in group)
+    // ------------------------------------------------------------------
+    useEffect(() => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        if (stored && stored.images) {
+            // Only update if references/lengths differ to avoid infinite loops,
+            // or perform a deep comparison if needed. For now, basic length/ref check:
+            setImagesState((prev) => {
+                if (JSON.stringify(prev) !== JSON.stringify(stored.images)) {
+                    return stored.images || [];
+                }
+                return prev;
+            });
+        }
+    }, [sharedSceneData, isGrouped, partId, currentGroupNumber, getSharedSceneData]);
+    const persistToStore = (nodes) => {
+        if (!isGrouped || !partId)
+            return;
+        const stored = getSharedSceneData(partId, currentGroupNumber);
+        setSharedSceneData(partId, currentGroupNumber, {
+            ...(stored || {}),
+            images: nodes,
+        });
+    };
+    const setImages = (value) => {
+        if (typeof value === 'function') {
+            setImagesState((prev) => {
+                const next = value(prev);
+                persistToStore(next);
+                return next;
+            });
+        }
+        else {
+            setImagesState(value);
+            persistToStore(value);
+        }
+    };
+    return {
+        isGrouped,
+        currentGroupNumber,
+        images: imagesState,
+        setImages,
+    };
+}

package/dist/components/questions/_shared/hooks/useInfoExchangeGroup.js

@@ -1 +1,50 @@
-import{useCallback as e,useEffect as a}from"react";import{useExamQuestionStore as i}from"../../../../shared/lib/stores/examQuestionStore";const t={title:"",imageUrl:"",fields:[],candidateFields:[],examinerFields:[]};export function useInfoExchangeGroup(r,o){const{getSharedInfoExchangeData:d,setSharedInfoExchangeData:n}=i(),s=void 0!==r&&void 0!==o,l=s?d(r,o):void 0,c={title:l?.title||"",imageUrl:l?.imageUrl||"",fields:l?.fields||[],candidateFields:l?.candidateFields||l?.fields||[],examinerFields:l?.examinerFields||[]};a(()=>{if(!s)return;if(!d(r,o))try{const e=`exam_info_exchange_${r}_${o}`,a=localStorage.getItem(e);if(a){const e=JSON.parse(a);e?.payload&&n(r,o,e.payload)}}catch{}},[r,o,s,d,n]);return{...c,updateGroupData:e(e=>{if(!s)return;const a=d(r,o)||t;n(r,o,{...a,...e})},[s,r,o,d,n]),isValid:s}}
+import { useCallback, useEffect } from 'react';
+import { useExamQuestionStore } from '../../../../shared/lib/stores/examQuestionStore';
+const EMPTY_DATA = {
+    title: '', imageUrl: '', fields: [],
+    candidateFields: [], examinerFields: [],
+};
+export function useInfoExchangeGroup(partId, groupNumber) {
+    const { getSharedInfoExchangeData, setSharedInfoExchangeData } = useExamQuestionStore();
+    const isValid = partId !== undefined && groupNumber !== undefined;
+    const rawData = isValid
+        ? getSharedInfoExchangeData(partId, groupNumber)
+        : undefined;
+    const groupData = {
+        title: rawData?.title || '',
+        imageUrl: rawData?.imageUrl || '',
+        fields: rawData?.fields || [],
+        candidateFields: rawData?.candidateFields || rawData?.fields || [],
+        examinerFields: rawData?.examinerFields || [],
+    };
+    // Sync from localStorage on mount
+    useEffect(() => {
+        if (!isValid)
+            return;
+        const current = getSharedInfoExchangeData(partId, groupNumber);
+        if (!current) {
+            try {
+                const key = `exam_info_exchange_${partId}_${groupNumber}`;
+                const saved = localStorage.getItem(key);
+                if (saved) {
+                    const parsed = JSON.parse(saved);
+                    if (parsed?.payload) {
+                        setSharedInfoExchangeData(partId, groupNumber, parsed.payload);
+                    }
+                }
+            }
+            catch { }
+        }
+    }, [partId, groupNumber, isValid, getSharedInfoExchangeData, setSharedInfoExchangeData]);
+    const updateGroupData = useCallback((data) => {
+        if (!isValid)
+            return;
+        const current = getSharedInfoExchangeData(partId, groupNumber) || EMPTY_DATA;
+        setSharedInfoExchangeData(partId, groupNumber, { ...current, ...data });
+    }, [isValid, partId, groupNumber, getSharedInfoExchangeData, setSharedInfoExchangeData]);
+    return {
+        ...groupData,
+        updateGroupData,
+        isValid,
+    };
+}

package/dist/components/questions/_shared/hooks/useQuestionFormState.js

@@ -1 +1,54 @@
-import{useState as e,useCallback as s}from"react";const i={questionType:"",content:"",level:"A1",difficulty:"EASY",skill:"READING",points:1,audioUrl:"",images:[],blanks:[""],options:["","","",""],correctOption:0,mcImageUrl:"",imageUrl:"",statements:[{id:"1",text:"",isCorrect:!0}],arrangeLettersData:void 0,passage:"",passageBlanks:[],viewImageMainImageUrl:"",viewImageMainTitle:"",viewImagePassage:"",viewImageBlanks:[],viewImageWordBank:[],readChooseBestImageUrl:"",readChooseBestQuestionerName:"",readChooseBestResponderName:"",readChooseBestSubQuestions:[],fillMissingWordsInGrid:[],fillMissingWordsInGridRows:4,fillMissingWordsInGridColumns:8,fillMissingWordsInGridAnswers:[],lookPictureChooseSubQuestions:[],lookPictureFillWordHintSubQuestions:[]};export function useQuestionFormState(){const[t,o]=e(i);return{state:t,updateField:s((e,s)=>{o(i=>({...i,[e]:s}))},[]),resetState:s(()=>{o(i)},[]),resetToInitialData:s(e=>{o(s=>({...s,...e}))},[]),setState:o}}
+import { useState, useCallback } from 'react';
+const initialState = {
+    questionType: '',
+    content: '',
+    level: 'A1',
+    difficulty: 'EASY',
+    skill: 'READING',
+    points: 1,
+    audioUrl: '',
+    images: [],
+    blanks: [''],
+    options: ['', '', '', ''],
+    correctOption: 0,
+    mcImageUrl: '',
+    imageUrl: '',
+    statements: [{ id: '1', text: '', isCorrect: true }],
+    arrangeLettersData: undefined,
+    passage: '',
+    passageBlanks: [],
+    viewImageMainImageUrl: '',
+    viewImageMainTitle: '',
+    viewImagePassage: '',
+    viewImageBlanks: [],
+    viewImageWordBank: [],
+    readChooseBestImageUrl: '',
+    readChooseBestQuestionerName: '',
+    readChooseBestResponderName: '',
+    readChooseBestSubQuestions: [],
+    fillMissingWordsInGrid: [],
+    fillMissingWordsInGridRows: 4,
+    fillMissingWordsInGridColumns: 8,
+    fillMissingWordsInGridAnswers: [],
+    lookPictureChooseSubQuestions: [],
+    lookPictureFillWordHintSubQuestions: [],
+};
+export function useQuestionFormState() {
+    const [state, setState] = useState(initialState);
+    const updateField = useCallback((field, value) => {
+        setState((prev) => ({ ...prev, [field]: value }));
+    }, []);
+    const resetState = useCallback(() => {
+        setState(initialState);
+    }, []);
+    const resetToInitialData = useCallback((initialData) => {
+        setState((prev) => ({ ...prev, ...initialData }));
+    }, []);
+    return {
+        state,
+        updateField,
+        resetState,
+        resetToInitialData,
+        setState,
+    };
+}