@stellartech/image-style-widget-directus 1.0.15 → 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import{useApi as e,defineInterface as a}from"@directus/extensions-sdk";import{defineComponent as n,ref as t,computed as l,watch as i,resolveComponent as r,openBlock as d,createElementBlock as o,normalizeClass as s,createCommentVNode as c,createElementVNode as u,Fragment as m,withDirectives as g,vShow as p,createVNode as v,toDisplayString as f,nextTick as _,withModifiers as b,createTextVNode as h,vModelText as y,createBlock as x,inject as w,onMounted as k,normalizeStyle as I,unref as C,withKeys as S,renderList as $}from"vue";const F={class:"style-card__images"},z=["src","alt"],E={class:"style-card__placeholder"},P={key:1,class:"style-card__placeholder"},j=["src","alt"],U={class:"style-card__placeholder"},M={key:1,class:"style-card__placeholder"},G=["src"],A={class:"style-card__content"},O={class:"style-card__header"},T={class:"style-card__radio"},B=["checked","name"],N={class:"style-card__name"},D={class:"style-card__prompt"},L={class:"style-card__actions"},R=["disabled"];var V=n({__name:"StyleCard",props:{style:{},isSelected:{type:Boolean},radioGroupName:{},loading:{type:Boolean},getThumbnailUrl:{type:Function},getOriginalUrl:{type:Function}},emits:["select","edit","regenerate"],setup(e){const a=e,n=t(!1),_=t(!1),b=t(!1),h=t(!1),y=t(null),x=l(()=>a.style.example_1?b.value?a.getOriginalUrl(a.style.example_1):a.getThumbnailUrl(a.style.example_1,160):""),w=l(()=>a.style.example_2?h.value?a.getOriginalUrl(a.style.example_2):a.getThumbnailUrl(a.style.example_2,160):"");function k(){b.value?n.value=!0:b.value=!0}function I(){h.value?_.value=!0:h.value=!0}function C(e){y.value=a.getOriginalUrl(e)}function S(){y.value=null}i(()=>[a.style.example_1,a.style.example_2],()=>{n.value=!1,_.value=!1,b.value=!1,h.value=!1});const $=l(()=>a.style.prompt.length<=100?a.style.prompt:a.style.prompt.substring(0,100)+"...");return(a,t)=>{const l=r("v-icon");return d(),o("div",{class:s(["style-card",{"style-card--selected":e.isSelected}])},[c(" Images Section "),u("div",F,[u("div",{class:s(["style-card__image",{"style-card__image--clickable":!!e.style.example_1}]),onClick:t[0]||(t[0]=a=>e.style.example_1&&C(e.style.example_1))},[e.style.example_1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:`${e.style.name} example 1`,loading:"lazy",onError:k},null,40,z),[[p,!n.value]]),g(u("div",E,[v(l,{name:"image"})],512),[[p,n.value]])],64)):(d(),o("div",P,[v(l,{name:"image"})]))],2),u("div",{class:s(["style-card__image",{"style-card__image--clickable":!!e.style.example_2}]),onClick:t[1]||(t[1]=a=>e.style.example_2&&C(e.style.example_2))},[e.style.example_2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:`${e.style.name} example 2`,loading:"lazy",onError:I},null,40,j),[[p,!_.value]]),g(u("div",U,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",M,[v(l,{name:"image"})]))],2)]),c(" Lightbox Modal "),y.value?(d(),o("div",{key:0,class:"style-card__lightbox",onClick:S},[u("img",{src:y.value,alt:"Enlarged image"},null,8,G)])):c("v-if",!0),c(" Content Section "),u("div",A,[c(" Header: Radio + Name "),u("div",O,[u("label",T,[u("input",{type:"radio",checked:e.isSelected,name:e.radioGroupName,onChange:t[2]||(t[2]=n=>a.$emit("select",e.style.id))},null,40,B),t[6]||(t[6]=u("span",{class:"style-card__radio-custom"},null,-1))]),u("h3",N,f(e.style.name),1)]),c(" Prompt Preview "),u("p",D,f($.value),1),c(" Actions "),u("div",L,[c(' Hidden for now - set v-if="true" to restore '),c("v-if",!0),u("button",{class:"style-card__btn style-card__btn--secondary",disabled:e.loading,onClick:t[4]||(t[4]=n=>a.$emit("regenerate",e.style))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Generate an example"),1)],8,R),u("button",{class:s(["style-card__btn",{"style-card__btn--primary":e.isSelected}]),onClick:t[5]||(t[5]=n=>a.$emit("select",e.style.id))},[v(l,{name:e.isSelected?"radio_button_checked":"radio_button_unchecked",small:""},null,8,["name"]),t[8]||(t[8]=u("span",null,"Select",-1))],2)])])],2)}}}),q=[],W=[];function K(e,a){if(e&&"undefined"!=typeof document){var n,t=!0===a.prepend?"prepend":"append",l=!0===a.singleTag,i="string"==typeof a.container?document.querySelector(a.container):document.getElementsByTagName("head")[0];if(l){var r=q.indexOf(i);-1===r&&(r=q.push(i)-1,W[r]={}),n=W[r]&&W[r][t]?W[r][t]:W[r][t]=d()}else n=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),a.attributes)for(var n=Object.keys(a.attributes),l=0;l<n.length;l++)e.setAttribute(n[l],a.attributes[n[l]]);var r="prepend"===t?"afterbegin":"beforeend";return i.insertAdjacentElement(r,e),e}}K("\n.style-card[data-v-30991788] {\n display: flex;\n gap: 20px;\n padding: 16px;\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 8px;\n background: var(--theme--background, #fff);\n transition: all 0.2s ease;\n}\n.style-card[data-v-30991788]:hover {\n border-color: var(--theme--border-color, #ccc);\n}\n.style-card--selected[data-v-30991788] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n}\n.style-card__images[data-v-30991788] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n.style-card__image[data-v-30991788] {\n width: 80px;\n height: 80px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--theme--background-subdued, #f5f5f5);\n}\n.style-card__image img[data-v-30991788] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.style-card__placeholder[data-v-30991788] {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--theme--foreground-subdued, #999);\n}\n.style-card__content[data-v-30991788] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.style-card__header[data-v-30991788] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.style-card__radio[data-v-30991788] {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.style-card__radio input[data-v-30991788] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n.style-card__radio-custom[data-v-30991788] {\n width: 18px;\n height: 18px;\n border: 2px solid var(--theme--border-color, #ccc);\n border-radius: 50%;\n transition: all 0.2s ease;\n}\n.style-card__radio input:checked + .style-card__radio-custom[data-v-30991788] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary, #6644ff);\n box-shadow: inset 0 0 0 3px var(--theme--background, #fff);\n}\n.style-card__name[data-v-30991788] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.style-card__prompt[data-v-30991788] {\n margin: 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n line-height: 1.4;\n flex: 1;\n}\n.style-card__actions[data-v-30991788] {\n display: flex;\n gap: 8px;\n margin-top: auto;\n}\n.style-card__btn[data-v-30991788] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.style-card__btn[data-v-30991788]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.style-card__btn[data-v-30991788]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.style-card__btn--primary[data-v-30991788] {\n background: var(--theme--primary, #6644ff);\n border-color: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.style-card__btn--primary[data-v-30991788]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n border-color: var(--theme--primary-accent, #5533ee);\n color: #fff;\n}\n.style-card__btn--secondary[data-v-30991788] {\n background: transparent;\n}\n.style-card__image--clickable[data-v-30991788] {\n cursor: pointer;\n}\n.style-card__image--clickable[data-v-30991788]:hover {\n opacity: 0.85;\n}\n.style-card__lightbox[data-v-30991788] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n cursor: zoom-out;\n padding: 40px;\n}\n.style-card__lightbox img[data-v-30991788] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n}\n",{});var H=(e,a)=>{const n=e.__vccOpts||e;for(const[e,t]of a)n[e]=t;return n},X=H(V,[["__scopeId","data-v-30991788"],["__file","StyleCard.vue"]]);const J={class:"image-card"},Q={class:"image-card__header"},Y={class:"image-card__placeholder-text"},Z={class:"image-card__body"},ee={class:"image-card__images"},ae=["src"],ne={class:"image-card__image-placeholder"},te={key:1,class:"image-card__image-placeholder"},le=["src"],ie={class:"image-card__image-placeholder"},re={key:1,class:"image-card__image-placeholder"},de={class:"image-card__content"},oe={class:"image-card__prompts-section"},se={class:"image-card__prompt-item"},ce={class:"image-card__prompt"},ue={class:"image-card__actions"},me=["disabled"],ge=["disabled"],pe=["disabled"],ve={class:"image-card__selection"},fe=["src"];var _e=n({__name:"ImageCard",props:{item:{},loading:{type:Boolean},getThumbnailUrl:{type:Function},getOriginalUrl:{type:Function}},emits:["select-image","edit","regenerate","delete"],setup(e){const a=e,n=t(null),_=t(!1),b=t(!1),h=t(!1),y=t(!1),x=l(()=>a.item.image1?h.value?a.getOriginalUrl(a.item.image1):a.getThumbnailUrl(a.item.image1,200):""),w=l(()=>a.item.image2?y.value?a.getOriginalUrl(a.item.image2):a.getThumbnailUrl(a.item.image2,200):"");function k(){h.value?_.value=!0:h.value=!0}function I(){y.value?b.value=!0:y.value=!0}function C(e){n.value=a.getOriginalUrl(e)}function S(){n.value=null}i(()=>[a.item.image1,a.item.image2],()=>{_.value=!1,b.value=!1,h.value=!1,y.value=!1});const $=l(()=>a.item.prompt1.length<=120?a.item.prompt1:a.item.prompt1.substring(0,120)+"...");return(a,t)=>{const l=r("v-icon");return d(),o("div",J,[c(" Placeholder Header "),u("div",Q,[v(l,{name:"image"}),u("span",Y,f(e.item.placeholder),1)]),u("div",Z,[c(" Images Section "),u("div",ee,[u("div",{class:s(["image-card__image",{"image-card__image--selected":1===e.item.selected}]),onClick:t[0]||(t[0]=a=>e.item.image1&&C(e.item.image1))},[e.item.image1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:"Generated image 1",loading:"lazy",onError:k},null,40,ae),[[p,!_.value]]),g(u("div",ne,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",te,[v(l,{name:"image"})])),t[7]||(t[7]=u("div",{class:"image-card__image-badge"},"1",-1))],2),u("div",{class:s(["image-card__image",{"image-card__image--selected":2===e.item.selected}]),onClick:t[1]||(t[1]=a=>e.item.image2&&C(e.item.image2))},[e.item.image2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:"Generated image 2",loading:"lazy",onError:I},null,40,le),[[p,!b.value]]),g(u("div",ie,[v(l,{name:"image"})],512),[[p,b.value]])],64)):(d(),o("div",re,[v(l,{name:"image"})])),t[8]||(t[8]=u("div",{class:"image-card__image-badge"},"2",-1))],2)]),c(" Content Section "),u("div",de,[c(" Prompt Display "),u("div",oe,[u("div",se,[t[9]||(t[9]=u("span",{class:"image-card__prompt-label"},"Prompt:",-1)),u("p",ce,f($.value),1)])]),c(" Actions "),u("div",ue,[u("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[2]||(t[2]=n=>a.$emit("edit",e.item))},[v(l,{name:"edit",small:""}),t[10]||(t[10]=u("span",null,"Edit Prompt",-1))],8,me),u("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[3]||(t[3]=n=>a.$emit("regenerate",e.item))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Regenerate"),1)],8,ge),u("button",{class:"image-card__btn image-card__btn--danger",disabled:e.loading,onClick:t[4]||(t[4]=n=>a.$emit("delete",e.item))},[v(l,{name:"delete",small:""}),t[11]||(t[11]=u("span",null,"Delete",-1))],8,pe)]),c(" Selection Buttons "),u("div",ve,[u("button",{class:s(["image-card__select-btn",{"image-card__select-btn--active":1===e.item.selected}]),onClick:t[5]||(t[5]=n=>a.$emit("select-image",e.item.placeholder,1))},[v(l,{name:1===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[12]||(t[12]=u("span",null,"Select 1",-1))],2),u("button",{class:s(["image-card__select-btn",{"image-card__select-btn--active":2===e.item.selected}]),onClick:t[6]||(t[6]=n=>a.$emit("select-image",e.item.placeholder,2))},[v(l,{name:2===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[13]||(t[13]=u("span",null,"Select 2",-1))],2)])])]),c(" Lightbox Modal "),n.value?(d(),o("div",{key:0,class:"image-card__lightbox",onClick:S},[u("img",{src:n.value,alt:"Enlarged image"},null,8,fe)])):c("v-if",!0)])}}});K("\n.image-card[data-v-fd93f3b3] {\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 8px;\n background: var(--theme--background, #fff);\n overflow: hidden;\n}\n.image-card__header[data-v-fd93f3b3] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--theme--background-subdued, #f5f5f5);\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.image-card__placeholder-text[data-v-fd93f3b3] {\n font-size: 14px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.image-card__body[data-v-fd93f3b3] {\n display: flex;\n gap: 20px;\n padding: 16px;\n}\n.image-card__images[data-v-fd93f3b3] {\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n.image-card__image[data-v-fd93f3b3] {\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--theme--background-subdued, #f5f5f5);\n border: 3px solid transparent;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__image[data-v-fd93f3b3]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__image--selected[data-v-fd93f3b3] {\n border-color: var(--theme--primary, #6644ff);\n}\n.image-card__image img[data-v-fd93f3b3] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.image-card__image-placeholder[data-v-fd93f3b3] {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--theme--foreground-subdued, #999);\n}\n.image-card__image-badge[data-v-fd93f3b3] {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.6);\n color: #fff;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.image-card__image--selected .image-card__image-badge[data-v-fd93f3b3] {\n background: var(--theme--primary, #6644ff);\n}\n.image-card__content[data-v-fd93f3b3] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n}\n.image-card__prompts-section[data-v-fd93f3b3] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.image-card__prompt-item[data-v-fd93f3b3] {\n padding: 8px;\n background: var(--theme--background-subdued, #f9f9f9);\n border-radius: 4px;\n}\n.image-card__prompt-label[data-v-fd93f3b3] {\n font-size: 11px;\n font-weight: 600;\n color: var(--theme--foreground-subdued, #666);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n.image-card__prompt[data-v-fd93f3b3] {\n margin: 4px 0 0 0;\n font-size: 12px;\n color: var(--theme--foreground, #333);\n line-height: 1.4;\n}\n.image-card__actions[data-v-fd93f3b3] {\n display: flex;\n gap: 8px;\n}\n.image-card__btn[data-v-fd93f3b3] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__btn[data-v-fd93f3b3]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.image-card__btn[data-v-fd93f3b3]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.image-card__btn--secondary[data-v-fd93f3b3] {\n background: transparent;\n}\n.image-card__btn--danger[data-v-fd93f3b3] {\n background: transparent;\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__btn--danger[data-v-fd93f3b3]:hover:not(:disabled) {\n background: var(--theme--danger-background, #ffebee);\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__selection[data-v-fd93f3b3] {\n display: flex;\n gap: 8px;\n}\n.image-card__select-btn[data-v-fd93f3b3] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: 2px solid var(--theme--border-color, #ccc);\n border-radius: 6px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__select-btn[data-v-fd93f3b3]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__select-btn--active[data-v-fd93f3b3] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n color: var(--theme--primary, #6644ff);\n}\n\n/* Lightbox Modal */\n.image-card__lightbox[data-v-fd93f3b3] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n cursor: zoom-out;\n padding: 40px;\n}\n.image-card__lightbox img[data-v-fd93f3b3] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n}\n",{});var be=H(_e,[["__scopeId","data-v-fd93f3b3"],["__file","ImageCard.vue"]]);const he={class:"edit-modal"},ye={class:"edit-modal__header"},xe={class:"edit-modal__title"},we={class:"edit-modal__body"},ke={class:"edit-modal__label"},Ie=["placeholder"],Ce={class:"edit-modal__footer"},Se=["disabled"];var $e=n({__name:"EditModal",props:{isOpen:{type:Boolean},title:{},prompt:{},placeholder:{},saving:{type:Boolean}},emits:["close","save"],setup(e,{emit:a}){const n=e,s=a,m=t(n.prompt),p=t(null),w=l(()=>m.value!==n.prompt);function k(){w.value&&s("save",m.value)}return i(()=>n.prompt,e=>{m.value=e}),i(()=>n.isOpen,async e=>{e&&(m.value=n.prompt,await _(),p.value?.focus(),p.value?.select())}),(a,n)=>{const t=r("v-icon");return e.isOpen?(d(),o("div",{key:0,class:"edit-modal__overlay",onClick:n[3]||(n[3]=b(e=>a.$emit("close"),["self"]))},[u("div",he,[u("div",ye,[u("h3",xe,[v(t,{name:"edit"}),n[4]||(n[4]=h(" Edit Prompt ",-1))]),u("button",{class:"edit-modal__close",onClick:n[0]||(n[0]=e=>a.$emit("close"))},[v(t,{name:"close"})])]),u("div",we,[u("label",ke,f(e.title),1),g(u("textarea",{ref_key:"textareaRef",ref:p,"onUpdate:modelValue":n[1]||(n[1]=e=>m.value=e),class:"edit-modal__textarea",rows:"6",placeholder:e.placeholder},null,8,Ie),[[y,m.value]]),n[5]||(n[5]=u("p",{class:"edit-modal__hint"}," Edit the prompt text and click Save to apply changes. ",-1))]),u("div",Ce,[u("button",{class:"edit-modal__btn edit-modal__btn--secondary",onClick:n[2]||(n[2]=e=>a.$emit("close"))}," Cancel "),u("button",{class:"edit-modal__btn edit-modal__btn--primary",disabled:!w.value||e.saving,onClick:k},[e.saving?(d(),x(t,{key:0,name:"refresh",small:""})):c("v-if",!0),u("span",null,f(e.saving?"Saving...":"Save"),1)],8,Se)])])])):c("v-if",!0)}}});K("\n.edit-modal__overlay[data-v-44d552bc] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n.edit-modal[data-v-44d552bc] {\n width: 100%;\n max-width: 600px;\n background: var(--theme--background, #fff);\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n}\n.edit-modal__header[data-v-44d552bc] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.edit-modal__title[data-v-44d552bc] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.edit-modal__close[data-v-44d552bc] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.edit-modal__close[data-v-44d552bc]:hover {\n background: var(--theme--background-subdued, #f5f5f5);\n color: var(--theme--foreground, #333);\n}\n.edit-modal__body[data-v-44d552bc] {\n padding: 20px;\n}\n.edit-modal__label[data-v-44d552bc] {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.edit-modal__textarea[data-v-44d552bc] {\n width: 100%;\n padding: 12px;\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 6px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground, #333);\n font-size: 14px;\n font-family: inherit;\n line-height: 1.5;\n resize: vertical;\n transition: border-color 0.2s ease;\n}\n.edit-modal__textarea[data-v-44d552bc]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.edit-modal__textarea[data-v-44d552bc]::placeholder {\n color: var(--theme--foreground-subdued, #999);\n}\n.edit-modal__hint[data-v-44d552bc] {\n margin: 8px 0 0 0;\n font-size: 12px;\n color: var(--theme--foreground-subdued, #666);\n}\n.edit-modal__footer[data-v-44d552bc] {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n background: var(--theme--background-subdued, #f9f9f9);\n}\n.edit-modal__btn[data-v-44d552bc] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 10px 20px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.edit-modal__btn[data-v-44d552bc]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.edit-modal__btn--secondary[data-v-44d552bc] {\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n border: 1px solid var(--theme--border-color, #ccc);\n}\n.edit-modal__btn--secondary[data-v-44d552bc]:hover:not(:disabled) {\n background: var(--theme--background-subdued, #f5f5f5);\n}\n.edit-modal__btn--primary[data-v-44d552bc] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.edit-modal__btn--primary[data-v-44d552bc]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n",{});var Fe=H($e,[["__scopeId","data-v-44d552bc"],["__file","EditModal.vue"]]);const ze=[{id:"flux-kontext-pro",name:"Flux"},{id:"gemini-2.5-flash-image",name:"Nano Banana"}],Ee="24f7273a-d7f6-4ddb-94d3-df4869c9d945";const Pe={class:"image-style-widget"},je={key:0,class:"widget__processing"},Ue={class:"widget__progress"},Me={class:"widget__progress-bar"},Ge={class:"widget__loading"},Ae={class:"widget__error"},Oe={class:"widget__header"},Te={class:"widget__header-row"},Be={class:"widget__header-text"},Ne={class:"widget__title"},De=["title"],Le={class:"widget__header-controls"},Re={class:"widget__url-input"},Ve=["value","disabled"],qe={key:0,class:"widget__url-saving"},We={class:"widget__model-selector"},Ke={class:"widget__model-buttons"},He=["onClick"],Xe={class:"widget__list"},Je={key:0,class:"widget__empty"},Qe={class:"widget__header"},Ye={class:"widget__header-row"},Ze={class:"widget__header-text"},ea={class:"widget__title"},aa=["title"],na={class:"widget__header-controls"},ta={class:"widget__url-input"},la=["value","disabled"],ia={key:0,class:"widget__url-saving"},ra={class:"widget__model-selector"},da={class:"widget__model-buttons"},oa=["onClick"],sa={class:"widget__list"},ca={key:0,class:"widget__empty"},ua={key:5,class:"widget__footer"},ma=["disabled"],ga=["title"];var pa=n({__name:"interface",props:{value:{},mode:{default:"style-select"},stylesCollection:{default:"ImageStyles"},primaryKey:{},collection:{},defaultCollapsed:{type:Boolean,default:!0}},emits:["input"],setup(a,{emit:n}){const _=Math.random().toString(36).substring(2,9),b=a,y=n,F=w("values");function z(){return F?void 0!==F.value?F.value:F:{}}const E=l(()=>{const e=z();return b.primaryKey||e?.id||null}),P=l(()=>{const e=z();return e?.text||e?.Text||""}),{loading:j,error:U,fetchFlowId:M,updateFlowId:G,checkIsAdmin:A,fetchStyles:O,updateStylePrompt:T,regenerateStyleExamples:B,regeneratePlaceholderImages:N,getFileUrl:D,getThumbnailUrl:L,getOriginalUrl:R,extractPlaceholders:V,generateImagePrompts:q,generateSingleImage:W,updateContentWithImages:K,updateLessonContent:H,fetchLessonContent:J,getImageVariants:Q,saveGeneratedImages:Y,deleteImageVariant:Z,acceptContentImage:ee}=function(){const a=e(),n=t(!1),l=t(null);async function i(e,n="gemini-2.5-flash-image",t=Ee,l,i){const r=(await a.post(`/flows/trigger/${t}`,{path:"/api/misc/images/upload",payload:{prompt:e,model:n,format:"png",aspect_ratio:"16:9",...l?{title:l}:{},...i?.length?{reference_images:i}:{}}})).data;return r?.data?.id||r?.id||null}function r(e,a=160){return e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}?width=${a}&height=${a}&fit=cover&quality=75&format=webp`:""}return{loading:n,error:l,fetchFlowId:async function(){try{const e=await a.get("/items/WidgetConfig");return e.data.data?.flow_id||Ee}catch(e){return console.warn("Failed to fetch flow ID, using default:",e.message),Ee}},updateFlowId:async function(e){try{return await a.patch("/items/WidgetConfig",{flow_id:e}),!0}catch(e){return l.value=e.message||"Failed to update flow ID",!1}},checkIsAdmin:async function(){try{const e=await a.get("/users/me",{params:{fields:["role.admin_access"]}});return!0===e.data.data?.role?.admin_access}catch(e){return console.warn("Failed to check admin status:",e.message),!1}},fetchStyles:async function(e="ImageStyles"){n.value=!0,l.value=null;try{return(await a.get(`/items/${e}`,{params:{filter:{is_active:{_eq:!0}},sort:["sort"],fields:["id","name","prompt","example_1","example_2","is_active","sort"]}})).data.data||[]}catch(e){return l.value=e.message||"Failed to fetch styles",[]}finally{n.value=!1}},updateStylePrompt:async function(e,t,i){n.value=!0,l.value=null;try{return await a.patch(`/items/${e}/${t}`,{prompt:i}),!0}catch(e){return l.value=e.message||"Failed to update prompt",!1}finally{n.value=!1}},regenerateStyleExamples:async function(e,t,r="ImageStyles",d="gemini-2.5-flash-image",o=Ee){n.value=!0,l.value=null;try{const[n,s]=await Promise.all([i(t,d,o),i(t,d,o)]);return n&&s?(await a.patch(`/items/${r}/${e}`,{example_1:n,example_2:s}),{example_1:n,example_2:s}):(l.value="Failed to generate images",null)}catch(e){return l.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},regeneratePlaceholderImages:async function(e,a,t="gemini-2.5-flash-image",r=Ee,d,o){n.value=!0,l.value=null;try{const[n,s]=await Promise.all([i(e,t,r,d),i(a,t,r,o)]);return n&&s?{image1:n,image2:s}:(l.value="Failed to generate images",null)}catch(e){return l.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},getFileUrl:function(e){return r(e,200)},getThumbnailUrl:r,getOriginalUrl:function(e){return e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`:""},generateImagePrompts:async function(e,t,i=Ee){n.value=!0,l.value=null;try{const n=(await a.post(`/flows/trigger/${i}`,{path:"/api/misc/prompts",payload:{style:e,description:t,model:"gpt-4o-mini"}})).data;return n?.data||n}catch(e){return l.value=e.message||"Failed to generate image prompts",null}finally{n.value=!1}},getImageVariants:async function(e){n.value=!0,l.value=null;try{return(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e}},fields:["id","title","status","lesson","images.id","images.image","images.prompt","images.status"]}})).data.data||[]}catch(e){return l.value=e.message||"Failed to fetch image variants",[]}finally{n.value=!1}},saveGeneratedImages:async function(e,t){n.value=!0,l.value=null;try{for(const n of t){const t=(await a.post("/items/ImageVariants",{title:n.placeholder,lesson:e,status:"found"})).data.data.id,l=[];n.image1&&l.push({image:n.image1,prompt:n.prompt1,variants:t,status:"generated"}),n.image2&&l.push({image:n.image2,prompt:n.prompt2,variants:t,status:"generated"}),l.length>0&&await a.post("/items/ContentImage",l)}return!0}catch(e){return l.value=e.message||"Failed to save generated images",!1}finally{n.value=!1}},deleteImageVariant:async function(e,t){n.value=!0,l.value=null;try{const n=(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e},title:{_eq:t}},fields:["id","images.id","images.image"]}})).data.data||[];for(const e of n){const n=[];if(e.images&&e.images.length>0)for(const t of e.images)t.image&&n.push(t.image),await a.delete(`/items/ContentImage/${t.id}`);await a.delete(`/items/ImageVariants/${e.id}`);for(const e of n)try{await a.delete(`/files/${e}`)}catch(a){console.warn(`Failed to delete file ${e}:`,a.message)}}return!0}catch(e){return l.value=e.message||"Failed to delete image variant",!1}finally{n.value=!1}},extractPlaceholders:function(e){const a=[],n=/!\[([^\]]+)\](?!\()/g;let t;for(;null!==(t=n.exec(e));)a.push(t[1]);return a},generateSingleImage:i,acceptContentImage:async function(e){try{const n=(await a.get("/items/ContentImage",{params:{filter:{image:{_eq:e}},fields:["id"],limit:1}})).data.data||[];return n.length>0&&await a.patch(`/items/ContentImage/${n[0].id}`,{status:"accepted"}),!0}catch(e){return console.warn("Failed to accept content image:",e.message),!1}},updateContentWithImages:function(e,a){let n=e;for(const{caption:e,fileId:t}of a){const a=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),l=new RegExp(`!\\[${a}\\](\\([^)]*\\))?`,"g"),i=`![${e}](/assets/${t})`;n=n.replace(l,i)}return n},updateLessonContent:async function(e,t,i){if(!i)throw new Error("collection is required but was not provided");n.value=!0,l.value=null;try{return await a.patch(`/items/${i}/${e}`,{text:t}),!0}catch(e){return l.value=e.message||"Failed to update lesson content",!1}finally{n.value=!1}},fetchLessonContent:async function(e,n){if(!n)throw new Error("collection is required but was not provided");try{const t=await a.get(`/items/${n}/${e}`,{params:{fields:["text"]}});return t.data.data?.text||t.data.data?.Text||null}catch(e){return console.error("Failed to fetch lesson content:",e),null}}}}(),ae=t(b.mode),ne=["SM_Lessons","NX_Lessons"].includes(b.collection||"")||!1===b.defaultCollapsed,te=t(ne),le=t(ne),ie=t([]),re=t(null),de=t(null),oe=t("gemini-2.5-flash-image"),se=t("90dc5ee7-bb99-4fde-97fb-910f586db5cb"),ce=t(!1),ue=t(!1),me=t([]),ge=t(null),pe=t(!1),ve=t(""),fe=t(0),_e=t(!1),he=t(""),ye=t(""),xe=t(null),we=t(null),ke=t(!1);l(()=>"style-select"===ae.value?ie.value.length>0:me.value.length>0);const Ie=l(()=>"style-select"===ae.value?null!==re.value:me.value.every(e=>e.selected)),Ce=l(()=>"style-select"===ae.value?"Generate Images":"Confirm Selections"),Se=l(()=>te.value?oe.value:"gemini-2.5-flash-image");function $e(){b.value&&"object"==typeof b.value&&(b.value.selectedStyleId&&(re.value=b.value.selectedStyleId),b.value.items&&b.value.items.length>0&&(me.value=b.value.items,ae.value="image-review"),b.value.currentMode&&(ae.value=b.value.currentMode))}async function pa(){ie.value=await O(b.stylesCollection),!re.value&&ie.value.length>0&&(re.value=ie.value[0].id),Ia()}function va(){ae.value="style-select",Ia()}async function fa(){if(E.value){pe.value=!0,ve.value="Loading existing images...",fe.value=10;try{const e=await Q(String(E.value));if(fe.value=50,!e||0===e.length)return U.value="No generated images found for this lesson. Generate images first.",void(pe.value=!1);const a=e.map(e=>{const a=e.images||[],n=a[0],t=a[1];return{placeholder:e.title||"Untitled",prompt1:n?.prompt||"",prompt2:t?.prompt||n?.prompt||"",image1:n?.image||null,image2:t?.image||null,selected:n?.image?1:t?.image?2:null}});fe.value=90,me.value=a,ae.value="image-review",fe.value=100,Ia()}catch(e){U.value=e.message||"Failed to load existing images"}finally{pe.value=!1}}}function _a(e){re.value=e,Ia()}async function ba(e){de.value=e.id;const a=await B(e.id,e.prompt,b.stylesCollection,Se.value,se.value);if(a){const n=ie.value.findIndex(a=>a.id===e.id);n>=0&&(ie.value[n]={...ie.value[n],example_1:a.example_1,example_2:a.example_2})}de.value=null}function ha(e,a){const n=me.value.find(a=>a.placeholder===e);n&&(n.selected=a,Ia())}async function ya(e){ge.value=e.placeholder;const a=await N(e.prompt1,e.prompt2,Se.value,se.value,e.placeholder+"_1",e.placeholder+"_2");if(a){const n=me.value.findIndex(a=>a.placeholder===e.placeholder);n>=0&&(me.value[n]={...me.value[n],image1:a.image1,image2:a.image2,selected:1},Ia())}ge.value=null}async function xa(e){if(!E.value)return;if(!confirm(`Delete "${e.placeholder}" and its images? This cannot be undone.`))return;ge.value=e.placeholder;if(await Z(String(E.value),e.placeholder)){const a=me.value.findIndex(a=>a.placeholder===e.placeholder);a>=0&&(me.value.splice(a,1),Ia())}ge.value=null}function wa(){_e.value=!1,xe.value=null,we.value=null}async function ka(e){if(ke.value=!0,xe.value){if(await T(b.stylesCollection,xe.value.id,e)){const a=ie.value.findIndex(e=>e.id===xe.value.id);a>=0&&(ie.value[a]={...ie.value[a],prompt:e}),wa()}}else if(we.value){const a=me.value.findIndex(e=>e.placeholder===we.value.placeholder);a>=0&&(me.value[a]={...me.value[a],prompt1:e,prompt2:e},Ia(),wa())}ke.value=!1}function Ia(){y("input",{currentMode:ae.value,selectedStyleId:re.value,selectedStyle:ie.value.find(e=>e.id===re.value)||null,items:me.value})}async function Ca(){Ie.value&&("style-select"===ae.value?await async function(){const e=ie.value.find(e=>e.id===re.value);if(!e)return void(U.value="No style selected. Please select an image style first.");if(!P.value)return void(U.value="No content available in the Description field. Add text with [image placeholders] first.");pe.value=!0,fe.value=0;const a=[e.example_1,e.example_2].filter(Boolean);try{ve.value="Generating image prompts with AI...",fe.value=10;const n=await q(e.prompt,P.value,se.value);if(!n||!n.images||0===n.images.length)return U.value="No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.",void(pe.value=!1);fe.value=30,ve.value=`Generating images for ${n.images.length} placeholder(s)...`;const t=[],l=60/n.images.length;for(let i=0;i<n.images.length;i++){const r=n.images[i];ve.value=`Generating images for "${r.placeholder}"... (${i+1}/${n.images.length})`;const d=r.prompts[0]||`${e.prompt}. Subject: ${r.placeholder}`,o=r.prompts[1]||d,[s,c]=await Promise.all([W(d,Se.value,se.value,`${r.placeholder}_1`,a),W(o,Se.value,se.value,`${r.placeholder}_2`,a)]);t.push({placeholder:r.placeholder,prompt1:d,prompt2:o,image1:s,image2:c,selected:s?1:c?2:null}),fe.value=30+(i+1)*l}ve.value="Saving generated images...",fe.value=90,E.value&&await Y(String(E.value),t),ve.value="Preparing image review...",fe.value=95,me.value=t,ae.value="image-review",fe.value=100,Ia()}catch(e){U.value=e.message||"Image generation failed"}finally{pe.value=!1}}():await async function(){if(!E.value)return void(U.value="No lesson ID available");const e=me.value.filter(e=>e.selected&&(1===e.selected?e.image1:e.image2)).map(e=>({caption:e.placeholder,fileId:1===e.selected?e.image1:e.image2}));if(0===e.length)return void(U.value="No images selected. Please select at least one image.");pe.value=!0,ve.value="Fetching current content...",fe.value=20;try{if(!b.collection)return U.value="collection is required but was not provided",void(pe.value=!1);const a=await J(String(E.value),b.collection);if(!a)return U.value="Could not fetch lesson content. Make sure Description field has content.",void(pe.value=!1);fe.value=40,ve.value="Marking selected images as accepted...",await Promise.all(e.map(e=>ee(e.fileId))),fe.value=60,ve.value="Applying selected images to content...";const n=K(a,e);fe.value=80;await H(String(E.value),n,b.collection)?(fe.value=100,ve.value="Images applied successfully! Refreshing...",setTimeout(()=>{window.location.reload()},1e3)):U.value="Failed to update lesson content"}catch(e){U.value=e.message||"Failed to apply images"}finally{pe.value=!1}}())}function Sa(e){!async function(e){if(e===se.value)return;if(!ce.value&&!confirm("Warning: Changing the Flow ID will affect all users.\n\nAre you sure you want to continue?"))return;ue.value=!0,await G(e)&&(se.value=e),ue.value=!1}(e.target.value.trim())}function $a(e){e.target.blur()}return k(()=>{$e(),Ia(),pa(),async function(){const[e,a]=await Promise.all([M(),A()]);se.value=e,ce.value=a}()}),i(()=>b.mode,e=>{e&&(ae.value=e)}),i(()=>b.value,()=>{$e()},{deep:!0}),(e,n)=>{const t=r("v-icon");return d(),o("div",Pe,[c(" Processing State "),pe.value?(d(),o("div",je,[u("div",Ue,[v(t,{name:"refresh",class:"spinning"}),u("span",null,f(ve.value),1)]),u("div",Me,[u("div",{class:"widget__progress-fill",style:I({width:fe.value+"%"})},null,4)])])):C(j)&&!ie.value.length?(d(),o(m,{key:1},[c(" Loading State "),u("div",Ge,[v(t,{name:"refresh"}),n[3]||(n[3]=u("span",null,"Loading styles...",-1))])],2112)):C(U)?(d(),o(m,{key:2},[c(" Error State "),u("div",Ae,[v(t,{name:"error"}),u("span",null,f(C(U)),1),u("button",{class:"widget__retry",onClick:pa},"Retry")])],2112)):"style-select"===ae.value?(d(),o(m,{key:3},[c(" Mode 1: Style Selection "),u("div",Oe,[u("div",Te,[u("div",Be,[u("h2",Ne,[v(t,{name:"palette"}),n[4]||(n[4]=h(" Select Image Style ",-1)),u("button",{type:"button",class:"widget__collapse-btn",title:te.value?"Collapse":"Expand",onClick:n[0]||(n[0]=e=>te.value=!te.value)},[v(t,{name:te.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,De)]),n[5]||(n[5]=u("p",{class:"widget__subtitle"}," Choose a style for your generated images ",-1))]),g(u("div",Le,[u("div",Re,[n[6]||(n[6]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:se.value,disabled:ue.value,onBlur:Sa,onKeydown:S($a,["enter"])},null,40,Ve),ue.value?(d(),o("span",qe,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",We,[n[7]||(n[7]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",Ke,[(d(!0),o(m,null,$(C(ze),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":oe.value===e.id}]),onClick:a=>oe.value=e.id},f(e.name),11,He))),128))])])],512),[[p,te.value]])])]),u("div",Xe,[(d(!0),o(m,null,$(ie.value,e=>(d(),x(X,{key:e.id,style:I(e),"is-selected":re.value===e.id,loading:de.value===e.id,"radio-group-name":`style-select-${C(_)}`,"get-thumbnail-url":C(L),"get-original-url":C(R),onSelect:_a,onEdit:a=>function(e){xe.value=e,we.value=null,he.value=`Style: ${e.name}`,ye.value=e.prompt,_e.value=!0}(e),onRegenerate:ba},null,8,["style","is-selected","loading","radio-group-name","get-thumbnail-url","get-original-url","onEdit"]))),128))]),0===ie.value.length?(d(),o("div",Je,[v(t,{name:"palette"}),n[8]||(n[8]=u("p",null,"No styles available",-1)),u("span",null,"Add styles to the "+f(a.stylesCollection)+" collection",1)])):c("v-if",!0)],64)):"image-review"===ae.value?(d(),o(m,{key:4},[c(" Mode 2: Image Review "),u("div",Qe,[u("div",Ye,[u("div",Ze,[u("h2",ea,[v(t,{name:"photo_library"}),n[9]||(n[9]=h(" Review Generated Images ",-1)),u("button",{type:"button",class:"widget__collapse-btn",title:te.value?"Collapse":"Expand",onClick:n[1]||(n[1]=e=>te.value=!te.value)},[v(t,{name:te.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,aa)]),n[10]||(n[10]=u("p",{class:"widget__subtitle"}," Select the best image for each placeholder ",-1))]),g(u("div",na,[u("div",ta,[n[11]||(n[11]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:se.value,disabled:ue.value,onBlur:Sa,onKeydown:S($a,["enter"])},null,40,la),ue.value?(d(),o("span",ia,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",ra,[n[12]||(n[12]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",da,[(d(!0),o(m,null,$(C(ze),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":oe.value===e.id}]),onClick:a=>oe.value=e.id},f(e.name),11,oa))),128))])])],512),[[p,te.value]])])]),u("div",sa,[(d(!0),o(m,null,$(me.value,e=>(d(),x(be,{key:e.placeholder,item:e,loading:ge.value===e.placeholder,"get-thumbnail-url":C(L),"get-original-url":C(R),onSelectImage:ha,onEdit:a=>function(e){xe.value=null,we.value=e,he.value=`Image: ${e.placeholder}`,ye.value=e.prompt1,_e.value=!0}(e),onRegenerate:ya,onDelete:xa},null,8,["item","loading","get-thumbnail-url","get-original-url","onEdit"]))),128))]),0===me.value.length?(d(),o("div",ca,[v(t,{name:"photo_library"}),n[13]||(n[13]=u("p",null,"No images to review",-1)),n[14]||(n[14]=u("span",null,"Generate images first",-1))])):c("v-if",!0)],64)):c("v-if",!0),c(" Footer Buttons "),pe.value?c("v-if",!0):(d(),o("div",ua,[c(" Back button always visible in image-review mode "),"image-review"===ae.value?(d(),o("button",{key:0,class:"widget__back",onClick:va},[v(t,{name:"arrow_back"}),n[15]||(n[15]=u("span",null,"Back",-1))])):c("v-if",!0),c(" View Images and Generate Images - shown when footer expanded "),le.value?(d(),o(m,{key:1},["style-select"===ae.value&&ie.value.length>0?(d(),o("button",{key:0,class:"widget__view-images",onClick:fa},[v(t,{name:"photo_library"}),n[16]||(n[16]=u("span",null,"View Generated Images",-1))])):c("v-if",!0),u("button",{class:"widget__confirm",disabled:!Ie.value,onClick:Ca},[v(t,{name:"style-select"===ae.value?"arrow_forward":"check"},null,8,["name"]),u("span",null,f(Ce.value),1)],8,ma)],64)):c("v-if",!0),c(" Collapse toggle for footer "),u("button",{type:"button",class:"widget__collapse-btn widget__collapse-btn--footer",title:le.value?"Collapse":"Expand",onClick:n[2]||(n[2]=e=>le.value=!le.value)},[v(t,{name:le.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,ga)])),c(" Edit Modal "),v(Fe,{"is-open":_e.value,title:he.value,prompt:ye.value,saving:ke.value,placeholder:"Enter prompt text...",onClose:wa,onSave:ka},null,8,["is-open","title","prompt","saving"])])}}});K("\n.image-style-widget[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.widget__loading[data-v-cb4de60a],\n.widget__error[data-v-cb4de60a],\n.widget__empty[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 40px 20px;\n text-align: center;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__loading v-icon[data-v-cb4de60a],\n.widget__error v-icon[data-v-cb4de60a],\n.widget__empty v-icon[data-v-cb4de60a] {\n font-size: 32px;\n}\n.widget__error[data-v-cb4de60a] {\n color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-cb4de60a] {\n padding: 8px 16px;\n border: 1px solid currentColor;\n border-radius: 4px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.widget__header[data-v-cb4de60a] {\n padding-bottom: 16px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-cb4de60a] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-cb4de60a] {\n flex: 1;\n}\n.widget__header-controls[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n align-items: flex-end;\n}\n.widget__url-input[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-cb4de60a] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n white-space: nowrap;\n}\n.widget__url-field[data-v-cb4de60a] {\n width: 240px;\n padding: 6px 10px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground, #333);\n font-size: 12px;\n font-family: monospace;\n}\n.widget__url-field[data-v-cb4de60a]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-cb4de60a]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.widget__url-saving[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n}\n.widget__model-selector[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n}\n.widget__model-label[data-v-cb4de60a] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-cb4de60a] {\n display: flex;\n gap: 4px;\n background: var(--theme--background-subdued, #f5f5f5);\n padding: 4px;\n border-radius: 6px;\n}\n.widget__model-btn[data-v-cb4de60a] {\n padding: 6px 12px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__model-btn[data-v-cb4de60a]:hover {\n color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-cb4de60a] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.widget__model-btn--active[data-v-cb4de60a]:hover {\n color: #fff;\n}\n.widget__title[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__collapse-btn[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n margin-left: 4px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n cursor: pointer;\n transition: color 0.2s ease, background 0.2s ease;\n}\n.widget__collapse-btn[data-v-cb4de60a]:hover {\n color: var(--theme--foreground, #333);\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__collapse-btn--footer[data-v-cb4de60a] {\n margin-left: auto;\n}\n.widget__subtitle[data-v-cb4de60a] {\n margin: 4px 0 0 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.widget__footer[data-v-cb4de60a] {\n display: flex;\n justify-content: flex-end;\n padding-top: 16px;\n border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__confirm[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 24px;\n border: none;\n border-radius: 6px;\n background: var(--theme--primary, #6644ff);\n color: #fff;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__confirm[data-v-cb4de60a]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-cb4de60a]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__back[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 24px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 6px;\n background: transparent;\n color: var(--theme--foreground, #333);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-right: auto;\n}\n.widget__back[data-v-cb4de60a]:hover {\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n border: 2px solid var(--theme--primary, #6644ff);\n border-radius: 6px;\n background: transparent;\n color: var(--theme--primary, #6644ff);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__view-images[data-v-cb4de60a]:hover {\n background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n padding: 60px 20px;\n text-align: center;\n}\n.widget__progress[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 16px;\n font-weight: 500;\n color: var(--theme--foreground, #333);\n}\n.widget__progress-bar[data-v-cb4de60a] {\n width: 100%;\n max-width: 300px;\n height: 6px;\n background: var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 3px;\n overflow: hidden;\n}\n.widget__progress-fill[data-v-cb4de60a] {\n height: 100%;\n background: var(--theme--primary, #6644ff);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n.spinning[data-v-cb4de60a] {\n animation: spin-cb4de60a 1s linear infinite;\n}\n@keyframes spin-cb4de60a {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-cb4de60a] {\n margin: 0;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-cb4de60a] {\n font-size: 13px;\n}\n",{});var va=a({id:"image-style-widget",name:"Image Style Widget",icon:"palette",description:"Visual style selector and image reviewer",component:H(pa,[["__scopeId","data-v-cb4de60a"],["__file","interface.vue"]]),options:[{field:"mode",name:"Mode",type:"string",meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Style Selection",value:"style-select"},{text:"Image Review",value:"image-review"}]}},schema:{default_value:"style-select"}},{field:"stylesCollection",name:"Styles Collection",type:"string",meta:{width:"half",interface:"input",note:"Collection containing style definitions (default: ImageStyles)"},schema:{default_value:"ImageStyles"}},{field:"defaultCollapsed",name:"Default Collapsed",type:"boolean",meta:{width:"half",interface:"boolean",note:"When true (default), header and footer start collapsed. Set to false for collection fields (e.g. SM_Lessons) where you need Flow ID and AI Model visible."},schema:{default_value:!0}}],types:["json","string"]});export{va as default};
1
+ import{useApi as e,defineInterface as a}from"@directus/extensions-sdk";import{defineComponent as n,ref as t,computed as l,watch as i,resolveComponent as r,openBlock as d,createElementBlock as o,normalizeClass as s,createCommentVNode as c,createElementVNode as u,Fragment as m,withDirectives as g,vShow as p,createVNode as v,toDisplayString as f,nextTick as _,withModifiers as b,createTextVNode as h,vModelText as y,createBlock as x,inject as w,onMounted as k,normalizeStyle as I,unref as C,withKeys as S,renderList as $}from"vue";const F={class:"style-card__images"},z=["src","alt"],E={class:"style-card__placeholder"},P={key:1,class:"style-card__placeholder"},j=["src","alt"],U={class:"style-card__placeholder"},M={key:1,class:"style-card__placeholder"},G=["src"],A={class:"style-card__content"},O={class:"style-card__header"},T={class:"style-card__radio"},B=["checked","name"],N={class:"style-card__name"},D={class:"style-card__prompt"},L={class:"style-card__actions"},R=["disabled"];var V=n({__name:"StyleCard",props:{style:{},isSelected:{type:Boolean},radioGroupName:{},loading:{type:Boolean},getThumbnailUrl:{type:Function},getOriginalUrl:{type:Function}},emits:["select","edit","regenerate"],setup(e){const a=e,n=t(!1),_=t(!1),b=t(!1),h=t(!1),y=t(null),x=l(()=>a.style.example_1?b.value?a.getOriginalUrl(a.style.example_1):a.getThumbnailUrl(a.style.example_1,160):""),w=l(()=>a.style.example_2?h.value?a.getOriginalUrl(a.style.example_2):a.getThumbnailUrl(a.style.example_2,160):"");function k(){b.value?n.value=!0:b.value=!0}function I(){h.value?_.value=!0:h.value=!0}function C(e){y.value=a.getOriginalUrl(e)}function S(){y.value=null}i(()=>[a.style.example_1,a.style.example_2],()=>{n.value=!1,_.value=!1,b.value=!1,h.value=!1});const $=l(()=>a.style.prompt.length<=100?a.style.prompt:a.style.prompt.substring(0,100)+"...");return(a,t)=>{const l=r("v-icon");return d(),o("div",{class:s(["style-card",{"style-card--selected":e.isSelected}])},[c(" Images Section "),u("div",F,[u("div",{class:s(["style-card__image",{"style-card__image--clickable":!!e.style.example_1}]),onClick:t[0]||(t[0]=a=>e.style.example_1&&C(e.style.example_1))},[e.style.example_1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:`${e.style.name} example 1`,loading:"lazy",onError:k},null,40,z),[[p,!n.value]]),g(u("div",E,[v(l,{name:"image"})],512),[[p,n.value]])],64)):(d(),o("div",P,[v(l,{name:"image"})]))],2),u("div",{class:s(["style-card__image",{"style-card__image--clickable":!!e.style.example_2}]),onClick:t[1]||(t[1]=a=>e.style.example_2&&C(e.style.example_2))},[e.style.example_2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:`${e.style.name} example 2`,loading:"lazy",onError:I},null,40,j),[[p,!_.value]]),g(u("div",U,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",M,[v(l,{name:"image"})]))],2)]),c(" Lightbox Modal "),y.value?(d(),o("div",{key:0,class:"style-card__lightbox",onClick:S},[u("img",{src:y.value,alt:"Enlarged image"},null,8,G)])):c("v-if",!0),c(" Content Section "),u("div",A,[c(" Header: Radio + Name "),u("div",O,[u("label",T,[u("input",{type:"radio",checked:e.isSelected,name:e.radioGroupName,onChange:t[2]||(t[2]=n=>a.$emit("select",e.style.id))},null,40,B),t[6]||(t[6]=u("span",{class:"style-card__radio-custom"},null,-1))]),u("h3",N,f(e.style.name),1)]),c(" Prompt Preview "),u("p",D,f($.value),1),c(" Actions "),u("div",L,[c(' Hidden for now - set v-if="true" to restore '),c("v-if",!0),u("button",{class:"style-card__btn style-card__btn--secondary",disabled:e.loading,onClick:t[4]||(t[4]=n=>a.$emit("regenerate",e.style))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Generate an example"),1)],8,R),u("button",{class:s(["style-card__btn",{"style-card__btn--primary":e.isSelected}]),onClick:t[5]||(t[5]=n=>a.$emit("select",e.style.id))},[v(l,{name:e.isSelected?"radio_button_checked":"radio_button_unchecked",small:""},null,8,["name"]),t[8]||(t[8]=u("span",null,"Select",-1))],2)])])],2)}}}),q=[],W=[];function K(e,a){if(e&&"undefined"!=typeof document){var n,t=!0===a.prepend?"prepend":"append",l=!0===a.singleTag,i="string"==typeof a.container?document.querySelector(a.container):document.getElementsByTagName("head")[0];if(l){var r=q.indexOf(i);-1===r&&(r=q.push(i)-1,W[r]={}),n=W[r]&&W[r][t]?W[r][t]:W[r][t]=d()}else n=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),a.attributes)for(var n=Object.keys(a.attributes),l=0;l<n.length;l++)e.setAttribute(n[l],a.attributes[n[l]]);var r="prepend"===t?"afterbegin":"beforeend";return i.insertAdjacentElement(r,e),e}}K("\n.style-card[data-v-30991788] {\n display: flex;\n gap: 20px;\n padding: 16px;\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 8px;\n background: var(--theme--background, #fff);\n transition: all 0.2s ease;\n}\n.style-card[data-v-30991788]:hover {\n border-color: var(--theme--border-color, #ccc);\n}\n.style-card--selected[data-v-30991788] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n}\n.style-card__images[data-v-30991788] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n.style-card__image[data-v-30991788] {\n width: 80px;\n height: 80px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--theme--background-subdued, #f5f5f5);\n}\n.style-card__image img[data-v-30991788] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.style-card__placeholder[data-v-30991788] {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--theme--foreground-subdued, #999);\n}\n.style-card__content[data-v-30991788] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.style-card__header[data-v-30991788] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.style-card__radio[data-v-30991788] {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.style-card__radio input[data-v-30991788] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n.style-card__radio-custom[data-v-30991788] {\n width: 18px;\n height: 18px;\n border: 2px solid var(--theme--border-color, #ccc);\n border-radius: 50%;\n transition: all 0.2s ease;\n}\n.style-card__radio input:checked + .style-card__radio-custom[data-v-30991788] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary, #6644ff);\n box-shadow: inset 0 0 0 3px var(--theme--background, #fff);\n}\n.style-card__name[data-v-30991788] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.style-card__prompt[data-v-30991788] {\n margin: 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n line-height: 1.4;\n flex: 1;\n}\n.style-card__actions[data-v-30991788] {\n display: flex;\n gap: 8px;\n margin-top: auto;\n}\n.style-card__btn[data-v-30991788] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.style-card__btn[data-v-30991788]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.style-card__btn[data-v-30991788]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.style-card__btn--primary[data-v-30991788] {\n background: var(--theme--primary, #6644ff);\n border-color: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.style-card__btn--primary[data-v-30991788]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n border-color: var(--theme--primary-accent, #5533ee);\n color: #fff;\n}\n.style-card__btn--secondary[data-v-30991788] {\n background: transparent;\n}\n.style-card__image--clickable[data-v-30991788] {\n cursor: pointer;\n}\n.style-card__image--clickable[data-v-30991788]:hover {\n opacity: 0.85;\n}\n.style-card__lightbox[data-v-30991788] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n cursor: zoom-out;\n padding: 40px;\n}\n.style-card__lightbox img[data-v-30991788] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n}\n",{});var H=(e,a)=>{const n=e.__vccOpts||e;for(const[e,t]of a)n[e]=t;return n},X=H(V,[["__scopeId","data-v-30991788"],["__file","StyleCard.vue"]]);const J={class:"image-card"},Q={class:"image-card__header"},Y={class:"image-card__placeholder-text"},Z={class:"image-card__body"},ee={class:"image-card__images"},ae=["src"],ne={class:"image-card__image-placeholder"},te={key:1,class:"image-card__image-placeholder"},le=["src"],ie={class:"image-card__image-placeholder"},re={key:1,class:"image-card__image-placeholder"},de={class:"image-card__content"},oe={class:"image-card__prompts-section"},se={class:"image-card__prompt-item"},ce={class:"image-card__prompt"},ue={class:"image-card__actions"},me=["disabled"],ge=["disabled"],pe=["disabled"],ve={class:"image-card__selection"},fe=["src"];var _e=n({__name:"ImageCard",props:{item:{},loading:{type:Boolean},getThumbnailUrl:{type:Function},getOriginalUrl:{type:Function}},emits:["select-image","edit","regenerate","delete"],setup(e){const a=e,n=t(null),_=t(!1),b=t(!1),h=t(!1),y=t(!1),x=l(()=>a.item.image1?h.value?a.getOriginalUrl(a.item.image1):a.getThumbnailUrl(a.item.image1,200):""),w=l(()=>a.item.image2?y.value?a.getOriginalUrl(a.item.image2):a.getThumbnailUrl(a.item.image2,200):"");function k(){h.value?_.value=!0:h.value=!0}function I(){y.value?b.value=!0:y.value=!0}function C(e){n.value=a.getOriginalUrl(e)}function S(){n.value=null}i(()=>[a.item.image1,a.item.image2],()=>{_.value=!1,b.value=!1,h.value=!1,y.value=!1});const $=l(()=>a.item.prompt1.length<=120?a.item.prompt1:a.item.prompt1.substring(0,120)+"...");return(a,t)=>{const l=r("v-icon");return d(),o("div",J,[c(" Placeholder Header "),u("div",Q,[v(l,{name:"image"}),u("span",Y,f(e.item.placeholder),1)]),u("div",Z,[c(" Images Section "),u("div",ee,[u("div",{class:s(["image-card__image",{"image-card__image--selected":1===e.item.selected}]),onClick:t[0]||(t[0]=a=>e.item.image1&&C(e.item.image1))},[e.item.image1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:"Generated image 1",loading:"lazy",onError:k},null,40,ae),[[p,!_.value]]),g(u("div",ne,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",te,[v(l,{name:"image"})])),t[7]||(t[7]=u("div",{class:"image-card__image-badge"},"1",-1))],2),u("div",{class:s(["image-card__image",{"image-card__image--selected":2===e.item.selected}]),onClick:t[1]||(t[1]=a=>e.item.image2&&C(e.item.image2))},[e.item.image2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:"Generated image 2",loading:"lazy",onError:I},null,40,le),[[p,!b.value]]),g(u("div",ie,[v(l,{name:"image"})],512),[[p,b.value]])],64)):(d(),o("div",re,[v(l,{name:"image"})])),t[8]||(t[8]=u("div",{class:"image-card__image-badge"},"2",-1))],2)]),c(" Content Section "),u("div",de,[c(" Prompt Display "),u("div",oe,[u("div",se,[t[9]||(t[9]=u("span",{class:"image-card__prompt-label"},"Prompt:",-1)),u("p",ce,f($.value),1)])]),c(" Actions "),u("div",ue,[u("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[2]||(t[2]=n=>a.$emit("edit",e.item))},[v(l,{name:"edit",small:""}),t[10]||(t[10]=u("span",null,"Edit Prompt",-1))],8,me),u("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[3]||(t[3]=n=>a.$emit("regenerate",e.item))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Regenerate"),1)],8,ge),u("button",{class:"image-card__btn image-card__btn--danger",disabled:e.loading,onClick:t[4]||(t[4]=n=>a.$emit("delete",e.item))},[v(l,{name:"delete",small:""}),t[11]||(t[11]=u("span",null,"Delete",-1))],8,pe)]),c(" Selection Buttons "),u("div",ve,[u("button",{class:s(["image-card__select-btn",{"image-card__select-btn--active":1===e.item.selected}]),onClick:t[5]||(t[5]=n=>a.$emit("select-image",e.item.placeholder,1))},[v(l,{name:1===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[12]||(t[12]=u("span",null,"Select 1",-1))],2),u("button",{class:s(["image-card__select-btn",{"image-card__select-btn--active":2===e.item.selected}]),onClick:t[6]||(t[6]=n=>a.$emit("select-image",e.item.placeholder,2))},[v(l,{name:2===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[13]||(t[13]=u("span",null,"Select 2",-1))],2)])])]),c(" Lightbox Modal "),n.value?(d(),o("div",{key:0,class:"image-card__lightbox",onClick:S},[u("img",{src:n.value,alt:"Enlarged image"},null,8,fe)])):c("v-if",!0)])}}});K("\n.image-card[data-v-fd93f3b3] {\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 8px;\n background: var(--theme--background, #fff);\n overflow: hidden;\n}\n.image-card__header[data-v-fd93f3b3] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--theme--background-subdued, #f5f5f5);\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.image-card__placeholder-text[data-v-fd93f3b3] {\n font-size: 14px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.image-card__body[data-v-fd93f3b3] {\n display: flex;\n gap: 20px;\n padding: 16px;\n}\n.image-card__images[data-v-fd93f3b3] {\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n.image-card__image[data-v-fd93f3b3] {\n position: relative;\n width: 100px;\n height: 100px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--theme--background-subdued, #f5f5f5);\n border: 3px solid transparent;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__image[data-v-fd93f3b3]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__image--selected[data-v-fd93f3b3] {\n border-color: var(--theme--primary, #6644ff);\n}\n.image-card__image img[data-v-fd93f3b3] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.image-card__image-placeholder[data-v-fd93f3b3] {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--theme--foreground-subdued, #999);\n}\n.image-card__image-badge[data-v-fd93f3b3] {\n position: absolute;\n top: 4px;\n right: 4px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.6);\n color: #fff;\n font-size: 11px;\n font-weight: 600;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.image-card__image--selected .image-card__image-badge[data-v-fd93f3b3] {\n background: var(--theme--primary, #6644ff);\n}\n.image-card__content[data-v-fd93f3b3] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 12px;\n min-width: 0;\n}\n.image-card__prompts-section[data-v-fd93f3b3] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.image-card__prompt-item[data-v-fd93f3b3] {\n padding: 8px;\n background: var(--theme--background-subdued, #f9f9f9);\n border-radius: 4px;\n}\n.image-card__prompt-label[data-v-fd93f3b3] {\n font-size: 11px;\n font-weight: 600;\n color: var(--theme--foreground-subdued, #666);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n.image-card__prompt[data-v-fd93f3b3] {\n margin: 4px 0 0 0;\n font-size: 12px;\n color: var(--theme--foreground, #333);\n line-height: 1.4;\n}\n.image-card__actions[data-v-fd93f3b3] {\n display: flex;\n gap: 8px;\n}\n.image-card__btn[data-v-fd93f3b3] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__btn[data-v-fd93f3b3]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.image-card__btn[data-v-fd93f3b3]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.image-card__btn--secondary[data-v-fd93f3b3] {\n background: transparent;\n}\n.image-card__btn--danger[data-v-fd93f3b3] {\n background: transparent;\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__btn--danger[data-v-fd93f3b3]:hover:not(:disabled) {\n background: var(--theme--danger-background, #ffebee);\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__selection[data-v-fd93f3b3] {\n display: flex;\n gap: 8px;\n}\n.image-card__select-btn[data-v-fd93f3b3] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n border: 2px solid var(--theme--border-color, #ccc);\n border-radius: 6px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.image-card__select-btn[data-v-fd93f3b3]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__select-btn--active[data-v-fd93f3b3] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n color: var(--theme--primary, #6644ff);\n}\n\n/* Lightbox Modal */\n.image-card__lightbox[data-v-fd93f3b3] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.85);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n cursor: zoom-out;\n padding: 40px;\n}\n.image-card__lightbox img[data-v-fd93f3b3] {\n max-width: 100%;\n max-height: 100%;\n object-fit: contain;\n border-radius: 8px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n}\n",{});var be=H(_e,[["__scopeId","data-v-fd93f3b3"],["__file","ImageCard.vue"]]);const he={class:"edit-modal"},ye={class:"edit-modal__header"},xe={class:"edit-modal__title"},we={class:"edit-modal__body"},ke={class:"edit-modal__label"},Ie=["placeholder"],Ce={class:"edit-modal__footer"},Se=["disabled"];var $e=n({__name:"EditModal",props:{isOpen:{type:Boolean},title:{},prompt:{},placeholder:{},saving:{type:Boolean}},emits:["close","save"],setup(e,{emit:a}){const n=e,s=a,m=t(n.prompt),p=t(null),w=l(()=>m.value!==n.prompt);function k(){w.value&&s("save",m.value)}return i(()=>n.prompt,e=>{m.value=e}),i(()=>n.isOpen,async e=>{e&&(m.value=n.prompt,await _(),p.value?.focus(),p.value?.select())}),(a,n)=>{const t=r("v-icon");return e.isOpen?(d(),o("div",{key:0,class:"edit-modal__overlay",onClick:n[3]||(n[3]=b(e=>a.$emit("close"),["self"]))},[u("div",he,[u("div",ye,[u("h3",xe,[v(t,{name:"edit"}),n[4]||(n[4]=h(" Edit Prompt ",-1))]),u("button",{class:"edit-modal__close",onClick:n[0]||(n[0]=e=>a.$emit("close"))},[v(t,{name:"close"})])]),u("div",we,[u("label",ke,f(e.title),1),g(u("textarea",{ref_key:"textareaRef",ref:p,"onUpdate:modelValue":n[1]||(n[1]=e=>m.value=e),class:"edit-modal__textarea",rows:"6",placeholder:e.placeholder},null,8,Ie),[[y,m.value]]),n[5]||(n[5]=u("p",{class:"edit-modal__hint"}," Edit the prompt text and click Save to apply changes. ",-1))]),u("div",Ce,[u("button",{class:"edit-modal__btn edit-modal__btn--secondary",onClick:n[2]||(n[2]=e=>a.$emit("close"))}," Cancel "),u("button",{class:"edit-modal__btn edit-modal__btn--primary",disabled:!w.value||e.saving,onClick:k},[e.saving?(d(),x(t,{key:0,name:"refresh",small:""})):c("v-if",!0),u("span",null,f(e.saving?"Saving...":"Save"),1)],8,Se)])])])):c("v-if",!0)}}});K("\n.edit-modal__overlay[data-v-44d552bc] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n}\n.edit-modal[data-v-44d552bc] {\n width: 100%;\n max-width: 600px;\n background: var(--theme--background, #fff);\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n overflow: hidden;\n}\n.edit-modal__header[data-v-44d552bc] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.edit-modal__title[data-v-44d552bc] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.edit-modal__close[data-v-44d552bc] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.edit-modal__close[data-v-44d552bc]:hover {\n background: var(--theme--background-subdued, #f5f5f5);\n color: var(--theme--foreground, #333);\n}\n.edit-modal__body[data-v-44d552bc] {\n padding: 20px;\n}\n.edit-modal__label[data-v-44d552bc] {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.edit-modal__textarea[data-v-44d552bc] {\n width: 100%;\n padding: 12px;\n border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 6px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground, #333);\n font-size: 14px;\n font-family: inherit;\n line-height: 1.5;\n resize: vertical;\n transition: border-color 0.2s ease;\n}\n.edit-modal__textarea[data-v-44d552bc]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.edit-modal__textarea[data-v-44d552bc]::placeholder {\n color: var(--theme--foreground-subdued, #999);\n}\n.edit-modal__hint[data-v-44d552bc] {\n margin: 8px 0 0 0;\n font-size: 12px;\n color: var(--theme--foreground-subdued, #666);\n}\n.edit-modal__footer[data-v-44d552bc] {\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n background: var(--theme--background-subdued, #f9f9f9);\n}\n.edit-modal__btn[data-v-44d552bc] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 10px 20px;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.edit-modal__btn[data-v-44d552bc]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.edit-modal__btn--secondary[data-v-44d552bc] {\n background: var(--theme--background, #fff);\n color: var(--theme--foreground-subdued, #666);\n border: 1px solid var(--theme--border-color, #ccc);\n}\n.edit-modal__btn--secondary[data-v-44d552bc]:hover:not(:disabled) {\n background: var(--theme--background-subdued, #f5f5f5);\n}\n.edit-modal__btn--primary[data-v-44d552bc] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.edit-modal__btn--primary[data-v-44d552bc]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n",{});var Fe=H($e,[["__scopeId","data-v-44d552bc"],["__file","EditModal.vue"]]);const ze=[{id:"flux-kontext-pro",name:"Flux"},{id:"gemini-2.5-flash-image",name:"Nano Banana"}],Ee="24f7273a-d7f6-4ddb-94d3-df4869c9d945";const Pe={class:"image-style-widget"},je={key:0,class:"widget__processing"},Ue={class:"widget__progress"},Me={class:"widget__progress-bar"},Ge={class:"widget__loading"},Ae={class:"widget__error"},Oe={class:"widget__header"},Te={class:"widget__header-row"},Be={class:"widget__header-text"},Ne={class:"widget__title"},De=["title"],Le={class:"widget__header-controls"},Re={class:"widget__url-input"},Ve=["value","disabled"],qe={key:0,class:"widget__url-saving"},We={class:"widget__model-selector"},Ke={class:"widget__model-buttons"},He=["onClick"],Xe={class:"widget__list"},Je={key:0,class:"widget__empty"},Qe={class:"widget__header"},Ye={class:"widget__header-row"},Ze={class:"widget__header-text"},ea={class:"widget__title"},aa=["title"],na={class:"widget__header-controls"},ta={class:"widget__url-input"},la=["value","disabled"],ia={key:0,class:"widget__url-saving"},ra={class:"widget__model-selector"},da={class:"widget__model-buttons"},oa=["onClick"],sa={class:"widget__list"},ca={key:0,class:"widget__empty"},ua={key:5,class:"widget__footer"},ma=["disabled"],ga=["title"];var pa=n({__name:"interface",props:{value:{},mode:{default:"style-select"},stylesCollection:{default:"ImageStyles"},primaryKey:{},collection:{},defaultCollapsed:{type:Boolean,default:!0}},emits:["input"],setup(a,{emit:n}){const _=Math.random().toString(36).substring(2,9),b=a,y=n,F=w("values");function z(){return F?void 0!==F.value?F.value:F:{}}const E=l(()=>{const e=z();return b.primaryKey||e?.id||null}),P=l(()=>{const e=z();return e?.text||e?.Text||""}),{loading:j,error:U,fetchFlowId:M,updateFlowId:G,checkIsAdmin:A,fetchStyles:O,updateStylePrompt:T,regenerateStyleExamples:B,regeneratePlaceholderImages:N,getFileUrl:D,getThumbnailUrl:L,getOriginalUrl:R,extractPlaceholders:V,generateImagePrompts:q,generateSingleImage:W,updateContentWithImages:K,updateLessonContent:H,fetchLessonContent:J,getImageVariants:Q,saveGeneratedImages:Y,deleteImageVariant:Z,acceptContentImage:ee}=function(){const a=e(),n=t(!1),l=t(null);async function i(e,n="gemini-2.5-flash-image",t=Ee,l,i){const r=(await a.post(`/flows/trigger/${t}`,{path:"/api/misc/images/upload",payload:{prompt:e,model:n,format:"png",aspect_ratio:"16:9",...l?{title:l}:{},...i?.length?{reference_images:i}:{}}})).data;return r?.data?.id||r?.id||null}function r(e,a=160){return e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}?width=${a}&height=${a}&fit=cover&quality=75&format=webp`:""}return{loading:n,error:l,fetchFlowId:async function(){try{const e=await a.get("/items/WidgetConfig");return e.data.data?.flow_id||Ee}catch(e){return console.warn("Failed to fetch flow ID, using default:",e.message),Ee}},updateFlowId:async function(e){try{return await a.patch("/items/WidgetConfig",{flow_id:e}),!0}catch(e){return l.value=e.message||"Failed to update flow ID",!1}},checkIsAdmin:async function(){try{const e=await a.get("/users/me",{params:{fields:["role.admin_access"]}});return!0===e.data.data?.role?.admin_access}catch(e){return console.warn("Failed to check admin status:",e.message),!1}},fetchStyles:async function(e="ImageStyles"){n.value=!0,l.value=null;try{return(await a.get(`/items/${e}`,{params:{filter:{is_active:{_eq:!0}},sort:["sort"],fields:["id","name","prompt","example_1","example_2","is_active","sort"]}})).data.data||[]}catch(e){return l.value=e.message||"Failed to fetch styles",[]}finally{n.value=!1}},updateStylePrompt:async function(e,t,i){n.value=!0,l.value=null;try{return await a.patch(`/items/${e}/${t}`,{prompt:i}),!0}catch(e){return l.value=e.message||"Failed to update prompt",!1}finally{n.value=!1}},regenerateStyleExamples:async function(e,t,r="ImageStyles",d="gemini-2.5-flash-image",o=Ee){n.value=!0,l.value=null;try{const[n,s]=await Promise.all([i(t,d,o),i(t,d,o)]);return n&&s?(await a.patch(`/items/${r}/${e}`,{example_1:n,example_2:s}),{example_1:n,example_2:s}):(l.value="Failed to generate images",null)}catch(e){return l.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},regeneratePlaceholderImages:async function(e,a,t="gemini-2.5-flash-image",r=Ee,d,o){n.value=!0,l.value=null;try{const[n,s]=await Promise.all([i(e,t,r,d),i(a,t,r,o)]);return n&&s?{image1:n,image2:s}:(l.value="Failed to generate images",null)}catch(e){return l.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},getFileUrl:function(e){return r(e,200)},getThumbnailUrl:r,getOriginalUrl:function(e){return e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`:""},generateImagePrompts:async function(e,t,i=Ee){n.value=!0,l.value=null;try{const n=(await a.post(`/flows/trigger/${i}`,{path:"/api/misc/prompts",payload:{style:e,description:t,model:"gpt-4o-mini"}})).data;return n?.data||n}catch(e){return l.value=e.message||"Failed to generate image prompts",null}finally{n.value=!1}},getImageVariants:async function(e){n.value=!0,l.value=null;try{return(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e}},fields:["id","title","status","lesson","images.id","images.image","images.prompt","images.status"]}})).data.data||[]}catch(e){return l.value=e.message||"Failed to fetch image variants",[]}finally{n.value=!1}},saveGeneratedImages:async function(e,t){n.value=!0,l.value=null;try{for(const n of t){const t=(await a.post("/items/ImageVariants",{title:n.placeholder,lesson:e,status:"found"})).data.data.id,l=[];n.image1&&l.push({image:n.image1,prompt:n.prompt1,variants:t,status:"generated"}),n.image2&&l.push({image:n.image2,prompt:n.prompt2,variants:t,status:"generated"}),l.length>0&&await a.post("/items/ContentImage",l)}return!0}catch(e){return l.value=e.message||"Failed to save generated images",!1}finally{n.value=!1}},deleteImageVariant:async function(e,t){n.value=!0,l.value=null;try{const n=(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e},title:{_eq:t}},fields:["id","images.id","images.image"]}})).data.data||[];for(const e of n){const n=[];if(e.images&&e.images.length>0)for(const t of e.images)t.image&&n.push(t.image),await a.delete(`/items/ContentImage/${t.id}`);await a.delete(`/items/ImageVariants/${e.id}`);for(const e of n)try{await a.delete(`/files/${e}`)}catch(a){console.warn(`Failed to delete file ${e}:`,a.message)}}return!0}catch(e){return l.value=e.message||"Failed to delete image variant",!1}finally{n.value=!1}},extractPlaceholders:function(e){const a=[],n=/!\[([^\]]+)\](?!\()/g;let t;for(;null!==(t=n.exec(e));)a.push(t[1]);return a},generateSingleImage:i,acceptContentImage:async function(e){try{const n=(await a.get("/items/ContentImage",{params:{filter:{image:{_eq:e}},fields:["id"],limit:1}})).data.data||[];return n.length>0&&await a.patch(`/items/ContentImage/${n[0].id}`,{status:"accepted"}),!0}catch(e){return console.warn("Failed to accept content image:",e.message),!1}},updateContentWithImages:function(e,a){const n="undefined"!=typeof window?window.location.origin:"";let t=e;for(const{caption:e,fileId:l}of a){const a=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),i=new RegExp(`!\\[${a}\\](\\([^)]*\\))?`,"g"),r=`![${e}](${n}/assets/${l})`;t=t.replace(i,r)}return t},updateLessonContent:async function(e,t,i){if(!i)throw new Error("collection is required but was not provided");n.value=!0,l.value=null;try{return await a.patch(`/items/${i}/${e}`,{text:t}),!0}catch(e){return l.value=e.message||"Failed to update lesson content",!1}finally{n.value=!1}},fetchLessonContent:async function(e,n){if(!n)throw new Error("collection is required but was not provided");try{const t=await a.get(`/items/${n}/${e}`,{params:{fields:["text"]}});return t.data.data?.text||t.data.data?.Text||null}catch(e){return console.error("Failed to fetch lesson content:",e),null}}}}(),ae=t(b.mode),ne=["SM_Lessons","NX_Lessons"].includes(b.collection||"")||!1===b.defaultCollapsed,te=t(ne),le=t(ne),ie=t([]),re=t(null),de=t(null),oe=t("gemini-2.5-flash-image"),se=t("90dc5ee7-bb99-4fde-97fb-910f586db5cb"),ce=t(!1),ue=t(!1),me=t([]),ge=t(null),pe=t(!1),ve=t(""),fe=t(0),_e=t(!1),he=t(""),ye=t(""),xe=t(null),we=t(null),ke=t(!1);l(()=>"style-select"===ae.value?ie.value.length>0:me.value.length>0);const Ie=l(()=>"style-select"===ae.value?null!==re.value:me.value.every(e=>e.selected)),Ce=l(()=>"style-select"===ae.value?"Generate Images":"Confirm Selections"),Se=l(()=>te.value?oe.value:"gemini-2.5-flash-image");function $e(){b.value&&"object"==typeof b.value&&(b.value.selectedStyleId&&(re.value=b.value.selectedStyleId),b.value.items&&b.value.items.length>0&&(me.value=b.value.items,ae.value="image-review"),b.value.currentMode&&(ae.value=b.value.currentMode))}async function pa(){ie.value=await O(b.stylesCollection),!re.value&&ie.value.length>0&&(re.value=ie.value[0].id),Ia()}function va(){ae.value="style-select",Ia()}async function fa(){if(E.value){pe.value=!0,ve.value="Loading existing images...",fe.value=10;try{const e=await Q(String(E.value));if(fe.value=50,!e||0===e.length)return U.value="No generated images found for this lesson. Generate images first.",void(pe.value=!1);const a=e.map(e=>{const a=e.images||[],n=a[0],t=a[1];return{placeholder:e.title||"Untitled",prompt1:n?.prompt||"",prompt2:t?.prompt||n?.prompt||"",image1:n?.image||null,image2:t?.image||null,selected:n?.image?1:t?.image?2:null}});fe.value=90,me.value=a,ae.value="image-review",fe.value=100,Ia()}catch(e){U.value=e.message||"Failed to load existing images"}finally{pe.value=!1}}}function _a(e){re.value=e,Ia()}async function ba(e){de.value=e.id;const a=await B(e.id,e.prompt,b.stylesCollection,Se.value,se.value);if(a){const n=ie.value.findIndex(a=>a.id===e.id);n>=0&&(ie.value[n]={...ie.value[n],example_1:a.example_1,example_2:a.example_2})}de.value=null}function ha(e,a){const n=me.value.find(a=>a.placeholder===e);n&&(n.selected=a,Ia())}async function ya(e){ge.value=e.placeholder;const a=await N(e.prompt1,e.prompt2,Se.value,se.value,e.placeholder+"_1",e.placeholder+"_2");if(a){const n=me.value.findIndex(a=>a.placeholder===e.placeholder);n>=0&&(me.value[n]={...me.value[n],image1:a.image1,image2:a.image2,selected:1},Ia())}ge.value=null}async function xa(e){if(!E.value)return;if(!confirm(`Delete "${e.placeholder}" and its images? This cannot be undone.`))return;ge.value=e.placeholder;if(await Z(String(E.value),e.placeholder)){const a=me.value.findIndex(a=>a.placeholder===e.placeholder);a>=0&&(me.value.splice(a,1),Ia())}ge.value=null}function wa(){_e.value=!1,xe.value=null,we.value=null}async function ka(e){if(ke.value=!0,xe.value){if(await T(b.stylesCollection,xe.value.id,e)){const a=ie.value.findIndex(e=>e.id===xe.value.id);a>=0&&(ie.value[a]={...ie.value[a],prompt:e}),wa()}}else if(we.value){const a=me.value.findIndex(e=>e.placeholder===we.value.placeholder);a>=0&&(me.value[a]={...me.value[a],prompt1:e,prompt2:e},Ia(),wa())}ke.value=!1}function Ia(){y("input",{currentMode:ae.value,selectedStyleId:re.value,selectedStyle:ie.value.find(e=>e.id===re.value)||null,items:me.value})}async function Ca(){Ie.value&&("style-select"===ae.value?await async function(){const e=ie.value.find(e=>e.id===re.value);if(!e)return void(U.value="No style selected. Please select an image style first.");if(!P.value)return void(U.value="No content available in the Description field. Add text with [image placeholders] first.");pe.value=!0,fe.value=0;const a=[e.example_1,e.example_2].filter(Boolean);try{ve.value="Generating image prompts with AI...",fe.value=10;const n=await q(e.prompt,P.value,se.value);if(!n||!n.images||0===n.images.length)return U.value="No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.",void(pe.value=!1);fe.value=30,ve.value=`Generating images for ${n.images.length} placeholder(s)...`;const t=[],l=60/n.images.length;for(let i=0;i<n.images.length;i++){const r=n.images[i];ve.value=`Generating images for "${r.placeholder}"... (${i+1}/${n.images.length})`;const d=r.prompts[0]||`${e.prompt}. Subject: ${r.placeholder}`,o=r.prompts[1]||d,[s,c]=await Promise.all([W(d,Se.value,se.value,`${r.placeholder}_1`,a),W(o,Se.value,se.value,`${r.placeholder}_2`,a)]);t.push({placeholder:r.placeholder,prompt1:d,prompt2:o,image1:s,image2:c,selected:s?1:c?2:null}),fe.value=30+(i+1)*l}ve.value="Saving generated images...",fe.value=90,E.value&&await Y(String(E.value),t),ve.value="Preparing image review...",fe.value=95,me.value=t,ae.value="image-review",fe.value=100,Ia()}catch(e){U.value=e.message||"Image generation failed"}finally{pe.value=!1}}():await async function(){if(!E.value)return void(U.value="No lesson ID available");const e=me.value.filter(e=>e.selected&&(1===e.selected?e.image1:e.image2)).map(e=>({caption:e.placeholder,fileId:1===e.selected?e.image1:e.image2}));if(0===e.length)return void(U.value="No images selected. Please select at least one image.");pe.value=!0,ve.value="Fetching current content...",fe.value=20;try{if(!b.collection)return U.value="collection is required but was not provided",void(pe.value=!1);const a=await J(String(E.value),b.collection);if(!a)return U.value="Could not fetch lesson content. Make sure Description field has content.",void(pe.value=!1);fe.value=40,ve.value="Marking selected images as accepted...",await Promise.all(e.map(e=>ee(e.fileId))),fe.value=60,ve.value="Applying selected images to content...";const n=K(a,e);fe.value=80;await H(String(E.value),n,b.collection)?(fe.value=100,ve.value="Images applied successfully! Refreshing...",setTimeout(()=>{window.location.reload()},1e3)):U.value="Failed to update lesson content"}catch(e){U.value=e.message||"Failed to apply images"}finally{pe.value=!1}}())}function Sa(e){!async function(e){if(e===se.value)return;if(!ce.value&&!confirm("Warning: Changing the Flow ID will affect all users.\n\nAre you sure you want to continue?"))return;ue.value=!0,await G(e)&&(se.value=e),ue.value=!1}(e.target.value.trim())}function $a(e){e.target.blur()}return k(()=>{$e(),Ia(),pa(),async function(){const[e,a]=await Promise.all([M(),A()]);se.value=e,ce.value=a}()}),i(()=>b.mode,e=>{e&&(ae.value=e)}),i(()=>b.value,()=>{$e()},{deep:!0}),(e,n)=>{const t=r("v-icon");return d(),o("div",Pe,[c(" Processing State "),pe.value?(d(),o("div",je,[u("div",Ue,[v(t,{name:"refresh",class:"spinning"}),u("span",null,f(ve.value),1)]),u("div",Me,[u("div",{class:"widget__progress-fill",style:I({width:fe.value+"%"})},null,4)])])):C(j)&&!ie.value.length?(d(),o(m,{key:1},[c(" Loading State "),u("div",Ge,[v(t,{name:"refresh"}),n[3]||(n[3]=u("span",null,"Loading styles...",-1))])],2112)):C(U)?(d(),o(m,{key:2},[c(" Error State "),u("div",Ae,[v(t,{name:"error"}),u("span",null,f(C(U)),1),u("button",{class:"widget__retry",onClick:pa},"Retry")])],2112)):"style-select"===ae.value?(d(),o(m,{key:3},[c(" Mode 1: Style Selection "),u("div",Oe,[u("div",Te,[u("div",Be,[u("h2",Ne,[v(t,{name:"palette"}),n[4]||(n[4]=h(" Select Image Style ",-1)),u("button",{type:"button",class:"widget__collapse-btn",title:te.value?"Collapse":"Expand",onClick:n[0]||(n[0]=e=>te.value=!te.value)},[v(t,{name:te.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,De)]),n[5]||(n[5]=u("p",{class:"widget__subtitle"}," Choose a style for your generated images ",-1))]),g(u("div",Le,[u("div",Re,[n[6]||(n[6]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:se.value,disabled:ue.value,onBlur:Sa,onKeydown:S($a,["enter"])},null,40,Ve),ue.value?(d(),o("span",qe,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",We,[n[7]||(n[7]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",Ke,[(d(!0),o(m,null,$(C(ze),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":oe.value===e.id}]),onClick:a=>oe.value=e.id},f(e.name),11,He))),128))])])],512),[[p,te.value]])])]),u("div",Xe,[(d(!0),o(m,null,$(ie.value,e=>(d(),x(X,{key:e.id,style:I(e),"is-selected":re.value===e.id,loading:de.value===e.id,"radio-group-name":`style-select-${C(_)}`,"get-thumbnail-url":C(L),"get-original-url":C(R),onSelect:_a,onEdit:a=>function(e){xe.value=e,we.value=null,he.value=`Style: ${e.name}`,ye.value=e.prompt,_e.value=!0}(e),onRegenerate:ba},null,8,["style","is-selected","loading","radio-group-name","get-thumbnail-url","get-original-url","onEdit"]))),128))]),0===ie.value.length?(d(),o("div",Je,[v(t,{name:"palette"}),n[8]||(n[8]=u("p",null,"No styles available",-1)),u("span",null,"Add styles to the "+f(a.stylesCollection)+" collection",1)])):c("v-if",!0)],64)):"image-review"===ae.value?(d(),o(m,{key:4},[c(" Mode 2: Image Review "),u("div",Qe,[u("div",Ye,[u("div",Ze,[u("h2",ea,[v(t,{name:"photo_library"}),n[9]||(n[9]=h(" Review Generated Images ",-1)),u("button",{type:"button",class:"widget__collapse-btn",title:te.value?"Collapse":"Expand",onClick:n[1]||(n[1]=e=>te.value=!te.value)},[v(t,{name:te.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,aa)]),n[10]||(n[10]=u("p",{class:"widget__subtitle"}," Select the best image for each placeholder ",-1))]),g(u("div",na,[u("div",ta,[n[11]||(n[11]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:se.value,disabled:ue.value,onBlur:Sa,onKeydown:S($a,["enter"])},null,40,la),ue.value?(d(),o("span",ia,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",ra,[n[12]||(n[12]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",da,[(d(!0),o(m,null,$(C(ze),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":oe.value===e.id}]),onClick:a=>oe.value=e.id},f(e.name),11,oa))),128))])])],512),[[p,te.value]])])]),u("div",sa,[(d(!0),o(m,null,$(me.value,e=>(d(),x(be,{key:e.placeholder,item:e,loading:ge.value===e.placeholder,"get-thumbnail-url":C(L),"get-original-url":C(R),onSelectImage:ha,onEdit:a=>function(e){xe.value=null,we.value=e,he.value=`Image: ${e.placeholder}`,ye.value=e.prompt1,_e.value=!0}(e),onRegenerate:ya,onDelete:xa},null,8,["item","loading","get-thumbnail-url","get-original-url","onEdit"]))),128))]),0===me.value.length?(d(),o("div",ca,[v(t,{name:"photo_library"}),n[13]||(n[13]=u("p",null,"No images to review",-1)),n[14]||(n[14]=u("span",null,"Generate images first",-1))])):c("v-if",!0)],64)):c("v-if",!0),c(" Footer Buttons "),pe.value?c("v-if",!0):(d(),o("div",ua,[c(" Back button always visible in image-review mode "),"image-review"===ae.value?(d(),o("button",{key:0,class:"widget__back",onClick:va},[v(t,{name:"arrow_back"}),n[15]||(n[15]=u("span",null,"Back",-1))])):c("v-if",!0),c(" View Images and Generate Images - shown when footer expanded "),le.value?(d(),o(m,{key:1},["style-select"===ae.value&&ie.value.length>0?(d(),o("button",{key:0,class:"widget__view-images",onClick:fa},[v(t,{name:"photo_library"}),n[16]||(n[16]=u("span",null,"View Generated Images",-1))])):c("v-if",!0),u("button",{class:"widget__confirm",disabled:!Ie.value,onClick:Ca},[v(t,{name:"style-select"===ae.value?"arrow_forward":"check"},null,8,["name"]),u("span",null,f(Ce.value),1)],8,ma)],64)):c("v-if",!0),c(" Collapse toggle for footer "),u("button",{type:"button",class:"widget__collapse-btn widget__collapse-btn--footer",title:le.value?"Collapse":"Expand",onClick:n[2]||(n[2]=e=>le.value=!le.value)},[v(t,{name:le.value?"expand_less":"expand_more",small:""},null,8,["name"])],8,ga)])),c(" Edit Modal "),v(Fe,{"is-open":_e.value,title:he.value,prompt:ye.value,saving:ke.value,placeholder:"Enter prompt text...",onClose:wa,onSave:ka},null,8,["is-open","title","prompt","saving"])])}}});K("\n.image-style-widget[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.widget__loading[data-v-cb4de60a],\n.widget__error[data-v-cb4de60a],\n.widget__empty[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 40px 20px;\n text-align: center;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__loading v-icon[data-v-cb4de60a],\n.widget__error v-icon[data-v-cb4de60a],\n.widget__empty v-icon[data-v-cb4de60a] {\n font-size: 32px;\n}\n.widget__error[data-v-cb4de60a] {\n color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-cb4de60a] {\n padding: 8px 16px;\n border: 1px solid currentColor;\n border-radius: 4px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n.widget__header[data-v-cb4de60a] {\n padding-bottom: 16px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-cb4de60a] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-cb4de60a] {\n flex: 1;\n}\n.widget__header-controls[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n align-items: flex-end;\n}\n.widget__url-input[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-cb4de60a] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n white-space: nowrap;\n}\n.widget__url-field[data-v-cb4de60a] {\n width: 240px;\n padding: 6px 10px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 4px;\n background: var(--theme--background, #fff);\n color: var(--theme--foreground, #333);\n font-size: 12px;\n font-family: monospace;\n}\n.widget__url-field[data-v-cb4de60a]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-cb4de60a]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.widget__url-saving[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n}\n.widget__model-selector[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n}\n.widget__model-label[data-v-cb4de60a] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-cb4de60a] {\n display: flex;\n gap: 4px;\n background: var(--theme--background-subdued, #f5f5f5);\n padding: 4px;\n border-radius: 6px;\n}\n.widget__model-btn[data-v-cb4de60a] {\n padding: 6px 12px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__model-btn[data-v-cb4de60a]:hover {\n color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-cb4de60a] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.widget__model-btn--active[data-v-cb4de60a]:hover {\n color: #fff;\n}\n.widget__title[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__collapse-btn[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 4px;\n margin-left: 4px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--theme--foreground-subdued, #666);\n cursor: pointer;\n transition: color 0.2s ease, background 0.2s ease;\n}\n.widget__collapse-btn[data-v-cb4de60a]:hover {\n color: var(--theme--foreground, #333);\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__collapse-btn--footer[data-v-cb4de60a] {\n margin-left: auto;\n}\n.widget__subtitle[data-v-cb4de60a] {\n margin: 4px 0 0 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.widget__footer[data-v-cb4de60a] {\n display: flex;\n justify-content: flex-end;\n padding-top: 16px;\n border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__confirm[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 24px;\n border: none;\n border-radius: 6px;\n background: var(--theme--primary, #6644ff);\n color: #fff;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__confirm[data-v-cb4de60a]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-cb4de60a]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__back[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 24px;\n border: 1px solid var(--theme--border-color, #ccc);\n border-radius: 6px;\n background: transparent;\n color: var(--theme--foreground, #333);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n margin-right: auto;\n}\n.widget__back[data-v-cb4de60a]:hover {\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-cb4de60a] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n border: 2px solid var(--theme--primary, #6644ff);\n border-radius: 6px;\n background: transparent;\n color: var(--theme--primary, #6644ff);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.widget__view-images[data-v-cb4de60a]:hover {\n background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-cb4de60a] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n padding: 60px 20px;\n text-align: center;\n}\n.widget__progress[data-v-cb4de60a] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 16px;\n font-weight: 500;\n color: var(--theme--foreground, #333);\n}\n.widget__progress-bar[data-v-cb4de60a] {\n width: 100%;\n max-width: 300px;\n height: 6px;\n background: var(--theme--border-color-subdued, #e0e0e0);\n border-radius: 3px;\n overflow: hidden;\n}\n.widget__progress-fill[data-v-cb4de60a] {\n height: 100%;\n background: var(--theme--primary, #6644ff);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n.spinning[data-v-cb4de60a] {\n animation: spin-cb4de60a 1s linear infinite;\n}\n@keyframes spin-cb4de60a {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-cb4de60a] {\n margin: 0;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-cb4de60a] {\n font-size: 13px;\n}\n",{});var va=a({id:"image-style-widget",name:"Image Style Widget",icon:"palette",description:"Visual style selector and image reviewer",component:H(pa,[["__scopeId","data-v-cb4de60a"],["__file","interface.vue"]]),options:[{field:"mode",name:"Mode",type:"string",meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Style Selection",value:"style-select"},{text:"Image Review",value:"image-review"}]}},schema:{default_value:"style-select"}},{field:"stylesCollection",name:"Styles Collection",type:"string",meta:{width:"half",interface:"input",note:"Collection containing style definitions (default: ImageStyles)"},schema:{default_value:"ImageStyles"}},{field:"defaultCollapsed",name:"Default Collapsed",type:"boolean",meta:{width:"half",interface:"boolean",note:"When true (default), header and footer start collapsed. Set to false for collection fields (e.g. SM_Lessons) where you need Flow ID and AI Model visible."},schema:{default_value:!0}}],types:["json","string"]});export{va as default};
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@stellartech/image-style-widget-directus",
3
3
  "description": "Visual style selector and image reviewer for Directus",
4
4
  "icon": "image",
5
- "version": "1.0.15",
5
+ "version": "1.0.16",
6
6
  "license": "MIT",
7
7
  "readme": "README.md",
8
8
  "repository": {