npm - @stellartech/image-style-widget-directus - Versions diffs - 1.0.7 → 1.0.8 - Mend

@stellartech/image-style-widget-directus 1.0.7 → 1.0.8

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

package/dist/index.js +1 -1
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

	@@ -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 h,createTextVNode as b,vModelText as y,createBlock as x,inject as w,onMounted as k,normalizeStyle as I,unref as S,withKeys as C,renderList as $}from"vue";const F={class:"style-card__images"},z={class:"style-card__image"},P=["src","alt"],E={class:"style-card__placeholder"},j={key:1,class:"style-card__placeholder"},G={class:"style-card__image"},M=["src","alt"],A={class:"style-card__placeholder"},D={key:1,class:"style-card__placeholder"},N={class:"style-card__content"},B={class:"style-card__header"},V={class:"style-card__radio"},L=["checked","name"],R={class:"style-card__name"},U={class:"style-card__prompt"},O={class:"style-card__actions"},T=["disabled"];var W=n({__name:"StyleCard",props:{style:{},isSelected:{type:Boolean},radioGroupName:{},loading:{type:Boolean},getFileUrl:{type:Function}},emits:["select","edit","regenerate"],setup(e){const a=e,n=t(!1),_=t(!1),h=t(!1),b=t(!1);function y(e){if(!e)return"";return`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`}const x=l(()=>a.style.example_1?h.value?y(a.style.example_1):a.getFileUrl(a.style.example_1):""),w=l(()=>a.style.example_2?b.value?y(a.style.example_2):a.getFileUrl(a.style.example_2):"");function k(){h.value?n.value=!0:h.value=!0}function I(){b.value?_.value=!0:b.value=!0}i(()=>[a.style.example_1,a.style.example_2],()=>{n.value=!1,_.value=!1,h.value=!1,b.value=!1});const S=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",z,[e.style.example_1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:`${e.style.name} example 1`,onError:k},null,40,P),[[p,!n.value]]),g(u("div",E,[v(l,{name:"image"})],512),[[p,n.value]])],64)):(d(),o("div",j,[v(l,{name:"image"})]))]),u("div",G,[e.style.example_2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:`${e.style.name} example 2`,onError:I},null,40,M),[[p,!_.value]]),g(u("div",A,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",D,[v(l,{name:"image"})]))])]),c(" Content Section "),u("div",N,[c(" Header: Radio + Name "),u("div",B,[u("label",V,[u("input",{type:"radio",checked:e.isSelected,name:e.radioGroupName,onChange:t[0]\|\|(t[0]=n=>a.$emit("select",e.style.id))},null,40,L),t[4]\|\|(t[4]=u("span",{class:"style-card__radio-custom"},null,-1))]),u("h3",R,f(e.style.name),1)]),c(" Prompt Preview "),u("p",U,f(S.value),1),c(" Actions "),u("div",O,[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[2]\|\|(t[2]=n=>a.$emit("regenerate",e.style))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Generate an example"),1)],8,T),u("button",{class:s(["style-card__btn",{"style-card__btn--primary":e.isSelected}]),onClick:t[3]\|\|(t[3]=n=>a.$emit("select",e.style.id))},[v(l,{name:e.isSelected?"radio_button_checked":"radio_button_unchecked",small:""},null,8,["name"]),t[6]\|\|(t[6]=u("span",null,"Select",-1))],2)])])],2)}}}),q=[],K=[];function H(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,K[r]={}),n=K[r]&&K[r][t]?K[r][t]:K[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}}H("\n.style-card[data-v-07529059] {\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-07529059]:hover {\n border-color: var(--theme--border-color, #ccc);\n}\n.style-card--selected[data-v-07529059] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n}\n.style-card__images[data-v-07529059] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n.style-card__image[data-v-07529059] {\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-07529059] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.style-card__placeholder[data-v-07529059] {\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-07529059] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.style-card__header[data-v-07529059] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.style-card__radio[data-v-07529059] {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.style-card__radio input[data-v-07529059] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n.style-card__radio-custom[data-v-07529059] {\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-07529059] {\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-07529059] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.style-card__prompt[data-v-07529059] {\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-07529059] {\n display: flex;\n gap: 8px;\n margin-top: auto;\n}\n.style-card__btn[data-v-07529059] {\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-07529059]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.style-card__btn[data-v-07529059]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.style-card__btn--primary[data-v-07529059] {\n background: var(--theme--primary, #6644ff);\n border-color: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.style-card__btn--primary[data-v-07529059]: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-07529059] {\n background: transparent;\n}\n",{});var J=(e,a)=>{const n=e.__vccOpts\|\|e;for(const[e,t]of a)n[e]=t;return n},Q=J(W,[["__scopeId","data-v-07529059"],["__file","StyleCard.vue"]]);const X={class:"image-card"},Y={class:"image-card__header"},Z={class:"image-card__placeholder-text"},ee={class:"image-card__body"},ae={class:"image-card__images"},ne=["src"],te={class:"image-card__image-placeholder"},le={key:1,class:"image-card__image-placeholder"},ie=["src"],re={class:"image-card__image-placeholder"},de={key:1,class:"image-card__image-placeholder"},oe={class:"image-card__content"},se={class:"image-card__prompts-section"},ce={class:"image-card__prompt-item"},ue={class:"image-card__prompt"},me={class:"image-card__actions"},ge=["disabled"],pe=["disabled"],ve=["disabled"],fe={class:"image-card__selection"},_e=["src"];var he=n({__name:"ImageCard",props:{item:{},loading:{type:Boolean},getFileUrl:{type:Function}},emits:["select-image","edit","regenerate","delete"],setup(e){const a=e,n=t(null),_=t(!1),h=t(!1),b=t(!1),y=t(!1);function x(e){if(!e)return"";return`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`}const w=l(()=>a.item.image1?b.value?x(a.item.image1):a.getFileUrl(a.item.image1):""),k=l(()=>a.item.image2?y.value?x(a.item.image2):a.getFileUrl(a.item.image2):"");function I(){b.value?_.value=!0:b.value=!0}function S(){y.value?h.value=!0:y.value=!0}function C(e){n.value=x(e)}function $(){n.value=null}i(()=>[a.item.image1,a.item.image2],()=>{_.value=!1,h.value=!1,b.value=!1,y.value=!1});const F=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",X,[c(" Placeholder Header "),u("div",Y,[v(l,{name:"image"}),u("span",Z,f(e.item.placeholder),1)]),u("div",ee,[c(" Images Section "),u("div",ae,[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:w.value,alt:"Generated image 1",onError:I},null,40,ne),[[p,!_.value]]),g(u("div",te,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",le,[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:k.value,alt:"Generated image 2",onError:S},null,40,ie),[[p,!h.value]]),g(u("div",re,[v(l,{name:"image"})],512),[[p,h.value]])],64)):(d(),o("div",de,[v(l,{name:"image"})])),t[8]\|\|(t[8]=u("div",{class:"image-card__image-badge"},"2",-1))],2)]),c(" Content Section "),u("div",oe,[c(" Prompt Display "),u("div",se,[u("div",ce,[t[9]\|\|(t[9]=u("span",{class:"image-card__prompt-label"},"Prompt:",-1)),u("p",ue,f(F.value),1)])]),c(" Actions "),u("div",me,[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,ge),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,pe),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,ve)]),c(" Selection Buttons "),u("div",fe,[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:$},[u("img",{src:n.value,alt:"Enlarged image"},null,8,_e)])):c("v-if",!0)])}}});H("\n.image-card[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n font-size: 14px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.image-card__body[data-v-5d5c0f36] {\n display: flex;\n gap: 20px;\n padding: 16px;\n}\n.image-card__images[data-v-5d5c0f36] {\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n.image-card__image[data-v-5d5c0f36] {\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-5d5c0f36]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__image--selected[data-v-5d5c0f36] {\n border-color: var(--theme--primary, #6644ff);\n}\n.image-card__image img[data-v-5d5c0f36] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.image-card__image-placeholder[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n background: var(--theme--primary, #6644ff);\n}\n.image-card__content[data-v-5d5c0f36] {\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-5d5c0f36] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.image-card__prompt-item[data-v-5d5c0f36] {\n padding: 8px;\n background: var(--theme--background-subdued, #f9f9f9);\n border-radius: 4px;\n}\n.image-card__prompt-label[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n display: flex;\n gap: 8px;\n}\n.image-card__btn[data-v-5d5c0f36] {\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-5d5c0f36]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.image-card__btn[data-v-5d5c0f36]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.image-card__btn--secondary[data-v-5d5c0f36] {\n background: transparent;\n}\n.image-card__btn--danger[data-v-5d5c0f36] {\n background: transparent;\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__btn--danger[data-v-5d5c0f36]: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-5d5c0f36] {\n display: flex;\n gap: 8px;\n}\n.image-card__select-btn[data-v-5d5c0f36] {\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-5d5c0f36]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__select-btn--active[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\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=J(he,[["__scopeId","data-v-5d5c0f36"],["__file","ImageCard.vue"]]);const ye={class:"edit-modal"},xe={class:"edit-modal__header"},we={class:"edit-modal__title"},ke={class:"edit-modal__body"},Ie={class:"edit-modal__label"},Se=["placeholder"],Ce={class:"edit-modal__footer"},$e=["disabled"];var Fe=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]=h(e=>a.$emit("close"),["self"]))},[u("div",ye,[u("div",xe,[u("h3",we,[v(t,{name:"edit"}),n[4]\|\|(n[4]=b(" Edit Prompt ",-1))]),u("button",{class:"edit-modal__close",onClick:n[0]\|\|(n[0]=e=>a.$emit("close"))},[v(t,{name:"close"})])]),u("div",ke,[u("label",Ie,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,Se),[[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,$e)])])])):c("v-if",!0)}}});H("\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 ze=J(Fe,[["__scopeId","data-v-44d552bc"],["__file","EditModal.vue"]]);const Pe=[{id:"flux-kontext-pro",name:"Flux"},{id:"gemini-2.5-flash-image",name:"Nano Banana"}],Ee="24f7273a-d7f6-4ddb-94d3-df4869c9d945";const je={class:"image-style-widget"},Ge={key:0,class:"widget__processing"},Me={class:"widget__progress"},Ae={class:"widget__progress-bar"},De={class:"widget__loading"},Ne={class:"widget__error"},Be={class:"widget__header"},Ve={class:"widget__header-row"},Le={class:"widget__header-text"},Re={class:"widget__title"},Ue={class:"widget__header-controls"},Oe={class:"widget__url-input"},Te=["value","disabled"],We={key:0,class:"widget__url-saving"},qe={class:"widget__model-selector"},Ke={class:"widget__model-buttons"},He=["onClick"],Je={class:"widget__list"},Qe={key:0,class:"widget__empty"},Xe={class:"widget__header"},Ye={class:"widget__header-row"},Ze={class:"widget__header-text"},ea={class:"widget__title"},aa={class:"widget__header-controls"},na={class:"widget__url-input"},ta=["value","disabled"],la={key:0,class:"widget__url-saving"},ia={class:"widget__model-selector"},ra={class:"widget__model-buttons"},da=["onClick"],oa={class:"widget__list"},sa={key:0,class:"widget__empty"},ca={key:5,class:"widget__footer"},ua=["disabled"];var ma=n({__name:"interface",props:{value:{},mode:{default:"style-select"},stylesCollection:{default:"ImageStyles"},primaryKey:{},collection:{}},emits:["input"],setup(a,{emit:n}){const g=Math.random().toString(36).substring(2,9),p=a,_=n,h=w("values");function y(){return h?void 0!==h.value?h.value:h:{}}const F=l(()=>{const e=y();return p.primaryKey\|\|e?.id\|\|null}),z=l(()=>{const e=y();return e?.description\|\|e?.Description\|\|""}),{loading:P,error:E,fetchFlowId:j,updateFlowId:G,checkIsAdmin:M,fetchStyles:A,updateStylePrompt:D,regenerateStyleExamples:N,regeneratePlaceholderImages:B,getFileUrl:V,extractPlaceholders:L,generateImagePrompts:R,generateSingleImage:U,updateContentWithImages:O,updateLessonContent:T,fetchLessonContent:W,getImageVariants:q,saveGeneratedImages:K,deleteImageVariant:H}=function(){const a=e(),n=t(!1),l=t(null);async function i(e,n="flux-kontext-pro",t=Ee){const l=(await a.post(`/flows/trigger/${t}`,{path:"/api/misc/images/upload",payload:{prompt:e,model:n,format:"png",aspect_ratio:"16:9"}})).data;return l?.data?.id\|\|l?.id\|\|null}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="flux-kontext-pro",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="flux-kontext-pro",r=Ee){n.value=!0,l.value=null;try{const[n,d]=await Promise.all([i(e,t,r),i(a,t,r)]);return n&&d?{image1:n,image2:d}:(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 e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}?width=200&height=200&fit=cover`:""},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=/\[([^\]]+)\]/g,n=[];let t;for(;null!==(t=a.exec(e));)n.push(t[1]);return n},generateSingleImage:i,updateContentWithImages:function(e,a){let n=e;for(const{caption:e,fileId:t}of a){const a=`[${e}]`,l=`<img src="/assets/${t}" alt="${e}" />`;n=n.replace(a,l)}return n},updateLessonContent:async function(e,t){n.value=!0,l.value=null;try{return await a.patch(`/items/SM_Lessons/${e}`,{description:t}),!0}catch(e){return l.value=e.message\|\|"Failed to update lesson content",!1}finally{n.value=!1}},fetchLessonContent:async function(e){try{const n=await a.get(`/items/SM_Lessons/${e}`,{params:{fields:["description"]}});return n.data.data?.description\|\|n.data.data?.Description\|\|null}catch(e){return console.error("Failed to fetch lesson content:",e),null}}}}(),J=t(p.mode),X=t([]),Y=t(null),Z=t(null),ee=t("flux-kontext-pro"),ae=t("90dc5ee7-bb99-4fde-97fb-910f586db5cb"),ne=t(!1),te=t(!1),le=t([]),ie=t(null),re=t(!1),de=t(""),oe=t(0),se=t(!1),ce=t(""),ue=t(""),me=t(null),ge=t(null),pe=t(!1);l(()=>"style-select"===J.value?X.value.length>0:le.value.length>0);const ve=l(()=>"style-select"===J.value?null!==Y.value:le.value.every(e=>e.selected)),fe=l(()=>"style-select"===J.value?"Generate Images":"Confirm Selections");function _e(){p.value&&"object"==typeof p.value&&(p.value.selectedStyleId&&(Y.value=p.value.selectedStyleId),p.value.items&&p.value.items.length>0&&(le.value=p.value.items,J.value="image-review"),p.value.currentMode&&(J.value=p.value.currentMode))}async function he(){X.value=await A(p.stylesCollection),!Y.value&&X.value.length>0&&(Y.value=X.value[0].id)}function ye(){J.value="style-select",ma()}async function xe(){if(F.value){re.value=!0,de.value="Loading existing images...",oe.value=10;try{const e=await q(String(F.value));if(oe.value=50,!e\|\|0===e.length)return E.value="No generated images found for this lesson. Generate images first.",void(re.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}});oe.value=90,le.value=a,J.value="image-review",oe.value=100,ma()}catch(e){E.value=e.message\|\|"Failed to load existing images"}finally{re.value=!1}}}function we(e){Y.value=e,ma()}async function ke(e){Z.value=e.id;const a=await N(e.id,e.prompt,p.stylesCollection,ee.value,ae.value);if(a){const n=X.value.findIndex(a=>a.id===e.id);n>=0&&(X.value[n]={...X.value[n],example_1:a.example_1,example_2:a.example_2})}Z.value=null}function Ie(e,a){const n=le.value.find(a=>a.placeholder===e);n&&(n.selected=a,ma())}async function Se(e){ie.value=e.placeholder;const a=await B(e.prompt1,e.prompt2,ee.value,ae.value);if(a){const n=le.value.findIndex(a=>a.placeholder===e.placeholder);n>=0&&(le.value[n]={...le.value[n],image1:a.image1,image2:a.image2,selected:1},ma())}ie.value=null}async function Ce(e){if(!F.value)return;if(!confirm(`Delete "${e.placeholder}" and its images? This cannot be undone.`))return;ie.value=e.placeholder;if(await H(String(F.value),e.placeholder)){const a=le.value.findIndex(a=>a.placeholder===e.placeholder);a>=0&&(le.value.splice(a,1),ma())}ie.value=null}function $e(){se.value=!1,me.value=null,ge.value=null}async function Fe(e){if(pe.value=!0,me.value){if(await D(p.stylesCollection,me.value.id,e)){const a=X.value.findIndex(e=>e.id===me.value.id);a>=0&&(X.value[a]={...X.value[a],prompt:e}),$e()}}else if(ge.value){const a=le.value.findIndex(e=>e.placeholder===ge.value.placeholder);a>=0&&(le.value[a]={...le.value[a],prompt1:e},ma(),$e())}pe.value=!1}function ma(){_("input",{currentMode:J.value,selectedStyleId:Y.value,selectedStyle:X.value.find(e=>e.id===Y.value)\|\|null,items:le.value})}async function ga(){ve.value&&("style-select"===J.value?await async function(){const e=X.value.find(e=>e.id===Y.value);if(!e)return void(E.value="No style selected. Please select an image style first.");if(!z.value)return void(E.value="No content available in the Description field. Add text with [image placeholders] first.");re.value=!0,oe.value=0;try{de.value="Generating image prompts with AI...",oe.value=10;const a=await R(e.prompt,z.value,ae.value);if(!a\|\|!a.images\|\|0===a.images.length)return E.value="No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.",void(re.value=!1);oe.value=30,de.value=`Generating images for ${a.images.length} placeholder(s)...`;const n=[],t=60/a.images.length;for(let l=0;l<a.images.length;l++){const i=a.images[l];de.value=`Generating images for "${i.placeholder}"... (${l+1}/${a.images.length})`;const r=i.prompts[0]\|\|`${e.prompt}. Subject: ${i.placeholder}`,d=i.prompts[1]\|\|r,[o,s]=await Promise.all([U(r,ee.value,ae.value),U(d,ee.value,ae.value)]);n.push({placeholder:i.placeholder,prompt1:r,prompt2:d,image1:o,image2:s,selected:o?1:s?2:null}),oe.value=30+(l+1)t}de.value="Saving generated images...",oe.value=90,F.value&&await K(String(F.value),n),de.value="Preparing image review...",oe.value=95,le.value=n,J.value="image-review",oe.value=100,ma()}catch(e){E.value=e.message\|\|"Image generation failed"}finally{re.value=!1}}():await async function(){if(!F.value)return void(E.value="No lesson ID available");const e=le.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(E.value="No images selected. Please select at least one image.");re.value=!0,de.value="Fetching current content...",oe.value=20;try{const a=await W(String(F.value));if(!a)return E.value="Could not fetch lesson content. Make sure Description field has content.",void(re.value=!1);oe.value=40,de.value="Applying selected images to content...";const n=O(a,e);oe.value=80;await T(String(F.value),n)?(oe.value=100,de.value="Images applied successfully! Refreshing...",setTimeout(()=>{window.location.reload()},1e3)):E.value="Failed to update lesson content"}catch(e){E.value=e.message\|\|"Failed to apply images"}finally{re.value=!1}}())}function pa(e){!async function(e){if(e===ae.value)return;if(!ne.value&&!confirm("Warning: Changing the Flow ID will affect all users.\n\nAre you sure you want to continue?"))return;te.value=!0,await G(e)&&(ae.value=e),te.value=!1}(e.target.value.trim())}function va(e){e.target.blur()}return k(()=>{_e(),he(),async function(){const[e,a]=await Promise.all([j(),M()]);ae.value=e,ne.value=a}()}),i(()=>p.mode,e=>{e&&(J.value=e)}),i(()=>p.value,()=>{_e()},{deep:!0}),(e,n)=>{const t=r("v-icon");return d(),o("div",je,[c(" Processing State "),re.value?(d(),o("div",Ge,[u("div",Me,[v(t,{name:"refresh",class:"spinning"}),u("span",null,f(de.value),1)]),u("div",Ae,[u("div",{class:"widget__progress-fill",style:I({width:oe.value+"%"})},null,4)])])):S(P)&&!X.value.length?(d(),o(m,{key:1},[c(" Loading State "),u("div",De,[v(t,{name:"refresh"}),n[0]\|\|(n[0]=u("span",null,"Loading styles...",-1))])],2112)):S(E)?(d(),o(m,{key:2},[c(" Error State "),u("div",Ne,[v(t,{name:"error"}),u("span",null,f(S(E)),1),u("button",{class:"widget__retry",onClick:he},"Retry")])],2112)):"style-select"===J.value?(d(),o(m,{key:3},[c(" Mode 1: Style Selection "),u("div",Be,[u("div",Ve,[u("div",Le,[u("h2",Re,[v(t,{name:"palette"}),n[1]\|\|(n[1]=b(" Select Image Style ",-1))]),n[2]\|\|(n[2]=u("p",{class:"widget__subtitle"}," Choose a style for your generated images ",-1))]),u("div",Ue,[u("div",Oe,[n[3]\|\|(n[3]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:C(va,["enter"])},null,40,Te),te.value?(d(),o("span",We,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",qe,[n[4]\|\|(n[4]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",Ke,[(d(!0),o(m,null,$(S(Pe),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},f(e.name),11,He))),128))])])])])]),u("div",Je,[(d(!0),o(m,null,$(X.value,e=>(d(),x(Q,{key:e.id,style:I(e),"is-selected":Y.value===e.id,loading:Z.value===e.id,"radio-group-name":`style-select-${S(g)}`,"get-file-url":S(V),onSelect:we,onEdit:a=>function(e){me.value=e,ge.value=null,ce.value=`Style: ${e.name}`,ue.value=e.prompt,se.value=!0}(e),onRegenerate:ke},null,8,["style","is-selected","loading","radio-group-name","get-file-url","onEdit"]))),128))]),0===X.value.length?(d(),o("div",Qe,[v(t,{name:"palette"}),n[5]\|\|(n[5]=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"===J.value?(d(),o(m,{key:4},[c(" Mode 2: Image Review "),u("div",Xe,[u("div",Ye,[u("div",Ze,[u("h2",ea,[v(t,{name:"photo_library"}),n[6]\|\|(n[6]=b(" Review Generated Images ",-1))]),n[7]\|\|(n[7]=u("p",{class:"widget__subtitle"}," Select the best image for each placeholder ",-1))]),u("div",aa,[u("div",na,[n[8]\|\|(n[8]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:C(va,["enter"])},null,40,ta),te.value?(d(),o("span",la,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",ia,[n[9]\|\|(n[9]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",ra,[(d(!0),o(m,null,$(S(Pe),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},f(e.name),11,da))),128))])])])])]),u("div",oa,[(d(!0),o(m,null,$(le.value,e=>(d(),x(be,{key:e.placeholder,item:e,loading:ie.value===e.placeholder,"get-file-url":S(V),onSelectImage:Ie,onEdit:a=>function(e){me.value=null,ge.value=e,ce.value=`Image: ${e.placeholder}`,ue.value=e.prompt1,se.value=!0}(e),onRegenerate:Se,onDelete:Ce},null,8,["item","loading","get-file-url","onEdit"]))),128))]),0===le.value.length?(d(),o("div",sa,[v(t,{name:"photo_library"}),n[10]\|\|(n[10]=u("p",null,"No images to review",-1)),n[11]\|\|(n[11]=u("span",null,"Generate images first",-1))])):c("v-if",!0)],64)):c("v-if",!0),c(" Footer Buttons "),re.value?c("v-if",!0):(d(),o("div",ca,[c(" Back button always visible in image-review mode "),"image-review"===J.value?(d(),o("button",{key:0,class:"widget__back",onClick:ye},[v(t,{name:"arrow_back"}),n[12]\|\|(n[12]=u("span",null,"Back",-1))])):c("v-if",!0),c(" View Images button in style-select mode when styles exist "),"style-select"===J.value&&X.value.length>0?(d(),o("button",{key:1,class:"widget__view-images",onClick:xe},[v(t,{name:"photo_library"}),n[13]\|\|(n[13]=u("span",null,"View Generated Images",-1))])):c("v-if",!0),u("button",{class:"widget__confirm",disabled:!ve.value,onClick:ga},[v(t,{name:"style-select"===J.value?"arrow_forward":"check"},null,8,["name"]),u("span",null,f(fe.value),1)],8,ua)])),c(" Edit Modal "),v(ze,{"is-open":se.value,title:ce.value,prompt:ue.value,saving:pe.value,placeholder:"Enter prompt text...",onClose:$e,onSave:Fe},null,8,["is-open","title","prompt","saving"])])}}});H("\n.image-style-widget[data-v-c679c178] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.widget__loading[data-v-c679c178],\n.widget__error[data-v-c679c178],\n.widget__empty[data-v-c679c178] {\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-c679c178],\n.widget__error v-icon[data-v-c679c178],\n.widget__empty v-icon[data-v-c679c178] {\n font-size: 32px;\n}\n.widget__error[data-v-c679c178] {\n color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-c679c178] {\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-c679c178] {\n padding-bottom: 16px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-c679c178] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-c679c178] {\n flex: 1;\n}\n.widget__header-controls[data-v-c679c178] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n align-items: flex-end;\n}\n.widget__url-input[data-v-c679c178] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-c679c178] {\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-c679c178] {\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-c679c178]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-c679c178]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.widget__url-saving[data-v-c679c178] {\n display: flex;\n align-items: center;\n}\n.widget__model-selector[data-v-c679c178] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n}\n.widget__model-label[data-v-c679c178] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-c679c178] {\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-c679c178] {\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-c679c178]:hover {\n color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-c679c178] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.widget__model-btn--active[data-v-c679c178]:hover {\n color: #fff;\n}\n.widget__title[data-v-c679c178] {\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__subtitle[data-v-c679c178] {\n margin: 4px 0 0 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-c679c178] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.widget__footer[data-v-c679c178] {\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-c679c178] {\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-c679c178]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-c679c178]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__back[data-v-c679c178] {\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-c679c178]:hover {\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-c679c178] {\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-c679c178]:hover {\n background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-c679c178] {\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-c679c178] {\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-c679c178] {\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-c679c178] {\n height: 100%;\n background: var(--theme--primary, #6644ff);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n.spinning[data-v-c679c178] {\n animation: spin-c679c178 1s linear infinite;\n}\n@keyframes spin-c679c178 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-c679c178] {\n margin: 0;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-c679c178] {\n font-size: 13px;\n}\n",{});var ga=a({id:"image-style-widget",name:"Image Style Widget",icon:"palette",description:"Visual style selector and image reviewer",component:J(ma,[["__scopeId","data-v-c679c178"],["__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"}}],types:["json","string"]});export{ga 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 S,withKeys as C,renderList as $}from"vue";const F={class:"style-card__images"},z={class:"style-card__image"},P=["src","alt"],E={class:"style-card__placeholder"},j={key:1,class:"style-card__placeholder"},G={class:"style-card__image"},M=["src","alt"],A={class:"style-card__placeholder"},N={key:1,class:"style-card__placeholder"},B={class:"style-card__content"},D={class:"style-card__header"},V={class:"style-card__radio"},L=["checked","name"],R={class:"style-card__name"},U={class:"style-card__prompt"},T={class:"style-card__actions"},O=["disabled"];var W=n({__name:"StyleCard",props:{style:{},isSelected:{type:Boolean},radioGroupName:{},loading:{type:Boolean},getFileUrl:{type:Function}},emits:["select","edit","regenerate"],setup(e){const a=e,n=t(!1),_=t(!1),b=t(!1),h=t(!1);function y(e){if(!e)return"";return`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`}const x=l(()=>a.style.example_1?b.value?y(a.style.example_1):a.getFileUrl(a.style.example_1):""),w=l(()=>a.style.example_2?h.value?y(a.style.example_2):a.getFileUrl(a.style.example_2):"");function k(){b.value?n.value=!0:b.value=!0}function I(){h.value?_.value=!0:h.value=!0}i(()=>[a.style.example_1,a.style.example_2],()=>{n.value=!1,_.value=!1,b.value=!1,h.value=!1});const S=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",z,[e.style.example_1?(d(),o(m,{key:0},[g(u("img",{src:x.value,alt:`${e.style.name} example 1`,onError:k},null,40,P),[[p,!n.value]]),g(u("div",E,[v(l,{name:"image"})],512),[[p,n.value]])],64)):(d(),o("div",j,[v(l,{name:"image"})]))]),u("div",G,[e.style.example_2?(d(),o(m,{key:0},[g(u("img",{src:w.value,alt:`${e.style.name} example 2`,onError:I},null,40,M),[[p,!_.value]]),g(u("div",A,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",N,[v(l,{name:"image"})]))])]),c(" Content Section "),u("div",B,[c(" Header: Radio + Name "),u("div",D,[u("label",V,[u("input",{type:"radio",checked:e.isSelected,name:e.radioGroupName,onChange:t[0]\|\|(t[0]=n=>a.$emit("select",e.style.id))},null,40,L),t[4]\|\|(t[4]=u("span",{class:"style-card__radio-custom"},null,-1))]),u("h3",R,f(e.style.name),1)]),c(" Prompt Preview "),u("p",U,f(S.value),1),c(" Actions "),u("div",T,[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[2]\|\|(t[2]=n=>a.$emit("regenerate",e.style))},[v(l,{name:"refresh",small:""}),u("span",null,f(e.loading?"Generating...":"Generate an example"),1)],8,O),u("button",{class:s(["style-card__btn",{"style-card__btn--primary":e.isSelected}]),onClick:t[3]\|\|(t[3]=n=>a.$emit("select",e.style.id))},[v(l,{name:e.isSelected?"radio_button_checked":"radio_button_unchecked",small:""},null,8,["name"]),t[6]\|\|(t[6]=u("span",null,"Select",-1))],2)])])],2)}}}),q=[],K=[];function H(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,K[r]={}),n=K[r]&&K[r][t]?K[r][t]:K[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}}H("\n.style-card[data-v-07529059] {\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-07529059]:hover {\n border-color: var(--theme--border-color, #ccc);\n}\n.style-card--selected[data-v-07529059] {\n border-color: var(--theme--primary, #6644ff);\n background: var(--theme--primary-background, #f5f3ff);\n}\n.style-card__images[data-v-07529059] {\n display: flex;\n gap: 8px;\n flex-shrink: 0;\n}\n.style-card__image[data-v-07529059] {\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-07529059] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.style-card__placeholder[data-v-07529059] {\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-07529059] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n min-width: 0;\n}\n.style-card__header[data-v-07529059] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.style-card__radio[data-v-07529059] {\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.style-card__radio input[data-v-07529059] {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n.style-card__radio-custom[data-v-07529059] {\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-07529059] {\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-07529059] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.style-card__prompt[data-v-07529059] {\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-07529059] {\n display: flex;\n gap: 8px;\n margin-top: auto;\n}\n.style-card__btn[data-v-07529059] {\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-07529059]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.style-card__btn[data-v-07529059]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.style-card__btn--primary[data-v-07529059] {\n background: var(--theme--primary, #6644ff);\n border-color: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.style-card__btn--primary[data-v-07529059]: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-07529059] {\n background: transparent;\n}\n",{});var J=(e,a)=>{const n=e.__vccOpts\|\|e;for(const[e,t]of a)n[e]=t;return n},Q=J(W,[["__scopeId","data-v-07529059"],["__file","StyleCard.vue"]]);const X={class:"image-card"},Y={class:"image-card__header"},Z={class:"image-card__placeholder-text"},ee={class:"image-card__body"},ae={class:"image-card__images"},ne=["src"],te={class:"image-card__image-placeholder"},le={key:1,class:"image-card__image-placeholder"},ie=["src"],re={class:"image-card__image-placeholder"},de={key:1,class:"image-card__image-placeholder"},oe={class:"image-card__content"},se={class:"image-card__prompts-section"},ce={class:"image-card__prompt-item"},ue={class:"image-card__prompt"},me={class:"image-card__actions"},ge=["disabled"],pe=["disabled"],ve=["disabled"],fe={class:"image-card__selection"},_e=["src"];var be=n({__name:"ImageCard",props:{item:{},loading:{type:Boolean},getFileUrl:{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);function x(e){if(!e)return"";return`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}`}const w=l(()=>a.item.image1?h.value?x(a.item.image1):a.getFileUrl(a.item.image1):""),k=l(()=>a.item.image2?y.value?x(a.item.image2):a.getFileUrl(a.item.image2):"");function I(){h.value?_.value=!0:h.value=!0}function S(){y.value?b.value=!0:y.value=!0}function C(e){n.value=x(e)}function $(){n.value=null}i(()=>[a.item.image1,a.item.image2],()=>{_.value=!1,b.value=!1,h.value=!1,y.value=!1});const F=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",X,[c(" Placeholder Header "),u("div",Y,[v(l,{name:"image"}),u("span",Z,f(e.item.placeholder),1)]),u("div",ee,[c(" Images Section "),u("div",ae,[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:w.value,alt:"Generated image 1",onError:I},null,40,ne),[[p,!_.value]]),g(u("div",te,[v(l,{name:"image"})],512),[[p,_.value]])],64)):(d(),o("div",le,[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:k.value,alt:"Generated image 2",onError:S},null,40,ie),[[p,!b.value]]),g(u("div",re,[v(l,{name:"image"})],512),[[p,b.value]])],64)):(d(),o("div",de,[v(l,{name:"image"})])),t[8]\|\|(t[8]=u("div",{class:"image-card__image-badge"},"2",-1))],2)]),c(" Content Section "),u("div",oe,[c(" Prompt Display "),u("div",se,[u("div",ce,[t[9]\|\|(t[9]=u("span",{class:"image-card__prompt-label"},"Prompt:",-1)),u("p",ue,f(F.value),1)])]),c(" Actions "),u("div",me,[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,ge),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,pe),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,ve)]),c(" Selection Buttons "),u("div",fe,[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:$},[u("img",{src:n.value,alt:"Enlarged image"},null,8,_e)])):c("v-if",!0)])}}});H("\n.image-card[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n font-size: 14px;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.image-card__body[data-v-5d5c0f36] {\n display: flex;\n gap: 20px;\n padding: 16px;\n}\n.image-card__images[data-v-5d5c0f36] {\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n.image-card__image[data-v-5d5c0f36] {\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-5d5c0f36]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__image--selected[data-v-5d5c0f36] {\n border-color: var(--theme--primary, #6644ff);\n}\n.image-card__image img[data-v-5d5c0f36] {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.image-card__image-placeholder[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n background: var(--theme--primary, #6644ff);\n}\n.image-card__content[data-v-5d5c0f36] {\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-5d5c0f36] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.image-card__prompt-item[data-v-5d5c0f36] {\n padding: 8px;\n background: var(--theme--background-subdued, #f9f9f9);\n border-radius: 4px;\n}\n.image-card__prompt-label[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\n display: flex;\n gap: 8px;\n}\n.image-card__btn[data-v-5d5c0f36] {\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-5d5c0f36]:hover:not(:disabled) {\n border-color: var(--theme--primary, #6644ff);\n color: var(--theme--primary, #6644ff);\n}\n.image-card__btn[data-v-5d5c0f36]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.image-card__btn--secondary[data-v-5d5c0f36] {\n background: transparent;\n}\n.image-card__btn--danger[data-v-5d5c0f36] {\n background: transparent;\n border-color: var(--theme--danger, #f44336);\n color: var(--theme--danger, #f44336);\n}\n.image-card__btn--danger[data-v-5d5c0f36]: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-5d5c0f36] {\n display: flex;\n gap: 8px;\n}\n.image-card__select-btn[data-v-5d5c0f36] {\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-5d5c0f36]:hover {\n border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__select-btn--active[data-v-5d5c0f36] {\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-5d5c0f36] {\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-5d5c0f36] {\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 he=J(be,[["__scopeId","data-v-5d5c0f36"],["__file","ImageCard.vue"]]);const ye={class:"edit-modal"},xe={class:"edit-modal__header"},we={class:"edit-modal__title"},ke={class:"edit-modal__body"},Ie={class:"edit-modal__label"},Se=["placeholder"],Ce={class:"edit-modal__footer"},$e=["disabled"];var Fe=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",ye,[u("div",xe,[u("h3",we,[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",ke,[u("label",Ie,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,Se),[[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,$e)])])])):c("v-if",!0)}}});H("\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 ze=J(Fe,[["__scopeId","data-v-44d552bc"],["__file","EditModal.vue"]]);const Pe=[{id:"flux-kontext-pro",name:"Flux"},{id:"gemini-2.5-flash-image",name:"Nano Banana"}],Ee="24f7273a-d7f6-4ddb-94d3-df4869c9d945";const je={class:"image-style-widget"},Ge={key:0,class:"widget__processing"},Me={class:"widget__progress"},Ae={class:"widget__progress-bar"},Ne={class:"widget__loading"},Be={class:"widget__error"},De={class:"widget__header"},Ve={class:"widget__header-row"},Le={class:"widget__header-text"},Re={class:"widget__title"},Ue={class:"widget__header-controls"},Te={class:"widget__url-input"},Oe=["value","disabled"],We={key:0,class:"widget__url-saving"},qe={class:"widget__model-selector"},Ke={class:"widget__model-buttons"},He=["onClick"],Je={class:"widget__list"},Qe={key:0,class:"widget__empty"},Xe={class:"widget__header"},Ye={class:"widget__header-row"},Ze={class:"widget__header-text"},ea={class:"widget__title"},aa={class:"widget__header-controls"},na={class:"widget__url-input"},ta=["value","disabled"],la={key:0,class:"widget__url-saving"},ia={class:"widget__model-selector"},ra={class:"widget__model-buttons"},da=["onClick"],oa={class:"widget__list"},sa={key:0,class:"widget__empty"},ca={key:5,class:"widget__footer"},ua=["disabled"];var ma=n({__name:"interface",props:{value:{},mode:{default:"style-select"},stylesCollection:{default:"ImageStyles"},primaryKey:{},collection:{}},emits:["input"],setup(a,{emit:n}){const g=Math.random().toString(36).substring(2,9),p=a,_=n,b=w("values");function y(){return b?void 0!==b.value?b.value:b:{}}const F=l(()=>{const e=y();return p.primaryKey\|\|e?.id\|\|null}),z=l(()=>{const e=y();return e?.text\|\|e?.Text\|\|""}),{loading:P,error:E,fetchFlowId:j,updateFlowId:G,checkIsAdmin:M,fetchStyles:A,updateStylePrompt:N,regenerateStyleExamples:B,regeneratePlaceholderImages:D,getFileUrl:V,extractPlaceholders:L,generateImagePrompts:R,generateSingleImage:U,updateContentWithImages:T,updateLessonContent:O,fetchLessonContent:W,getImageVariants:q,saveGeneratedImages:K,deleteImageVariant:H}=function(){const a=e(),n=t(!1),l=t(null);async function i(e,n="flux-kontext-pro",t=Ee){const l=(await a.post(`/flows/trigger/${t}`,{path:"/api/misc/images/upload",payload:{prompt:e,model:n,format:"png",aspect_ratio:"16:9"}})).data;return l?.data?.id\|\|l?.id\|\|null}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="flux-kontext-pro",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="flux-kontext-pro",r=Ee){n.value=!0,l.value=null;try{const[n,d]=await Promise.all([i(e,t,r),i(a,t,r)]);return n&&d?{image1:n,image2:d}:(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 e?`${"undefined"!=typeof window?window.location.origin:""}/assets/${e}?width=200&height=200&fit=cover`:""},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,updateContentWithImages:function(e,a){let n=e;for(const{caption:e,fileId:t}of a){const a=`![${e}]`,l=`![${e}](/assets/${t})`;n=n.replace(a,l)}return n},updateLessonContent:async function(e,t){n.value=!0,l.value=null;try{return await a.patch(`/items/SM_Lessons/${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){try{const n=await a.get(`/items/SM_Lessons/${e}`,{params:{fields:["text"]}});return n.data.data?.text\|\|n.data.data?.Text\|\|null}catch(e){return console.error("Failed to fetch lesson content:",e),null}}}}(),J=t(p.mode),X=t([]),Y=t(null),Z=t(null),ee=t("flux-kontext-pro"),ae=t("90dc5ee7-bb99-4fde-97fb-910f586db5cb"),ne=t(!1),te=t(!1),le=t([]),ie=t(null),re=t(!1),de=t(""),oe=t(0),se=t(!1),ce=t(""),ue=t(""),me=t(null),ge=t(null),pe=t(!1);l(()=>"style-select"===J.value?X.value.length>0:le.value.length>0);const ve=l(()=>"style-select"===J.value?null!==Y.value:le.value.every(e=>e.selected)),fe=l(()=>"style-select"===J.value?"Generate Images":"Confirm Selections");function _e(){p.value&&"object"==typeof p.value&&(p.value.selectedStyleId&&(Y.value=p.value.selectedStyleId),p.value.items&&p.value.items.length>0&&(le.value=p.value.items,J.value="image-review"),p.value.currentMode&&(J.value=p.value.currentMode))}async function be(){X.value=await A(p.stylesCollection),!Y.value&&X.value.length>0&&(Y.value=X.value[0].id)}function ye(){J.value="style-select",ma()}async function xe(){if(F.value){re.value=!0,de.value="Loading existing images...",oe.value=10;try{const e=await q(String(F.value));if(oe.value=50,!e\|\|0===e.length)return E.value="No generated images found for this lesson. Generate images first.",void(re.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}});oe.value=90,le.value=a,J.value="image-review",oe.value=100,ma()}catch(e){E.value=e.message\|\|"Failed to load existing images"}finally{re.value=!1}}}function we(e){Y.value=e,ma()}async function ke(e){Z.value=e.id;const a=await B(e.id,e.prompt,p.stylesCollection,ee.value,ae.value);if(a){const n=X.value.findIndex(a=>a.id===e.id);n>=0&&(X.value[n]={...X.value[n],example_1:a.example_1,example_2:a.example_2})}Z.value=null}function Ie(e,a){const n=le.value.find(a=>a.placeholder===e);n&&(n.selected=a,ma())}async function Se(e){ie.value=e.placeholder;const a=await D(e.prompt1,e.prompt2,ee.value,ae.value);if(a){const n=le.value.findIndex(a=>a.placeholder===e.placeholder);n>=0&&(le.value[n]={...le.value[n],image1:a.image1,image2:a.image2,selected:1},ma())}ie.value=null}async function Ce(e){if(!F.value)return;if(!confirm(`Delete "${e.placeholder}" and its images? This cannot be undone.`))return;ie.value=e.placeholder;if(await H(String(F.value),e.placeholder)){const a=le.value.findIndex(a=>a.placeholder===e.placeholder);a>=0&&(le.value.splice(a,1),ma())}ie.value=null}function $e(){se.value=!1,me.value=null,ge.value=null}async function Fe(e){if(pe.value=!0,me.value){if(await N(p.stylesCollection,me.value.id,e)){const a=X.value.findIndex(e=>e.id===me.value.id);a>=0&&(X.value[a]={...X.value[a],prompt:e}),$e()}}else if(ge.value){const a=le.value.findIndex(e=>e.placeholder===ge.value.placeholder);a>=0&&(le.value[a]={...le.value[a],prompt1:e},ma(),$e())}pe.value=!1}function ma(){_("input",{currentMode:J.value,selectedStyleId:Y.value,selectedStyle:X.value.find(e=>e.id===Y.value)\|\|null,items:le.value})}async function ga(){ve.value&&("style-select"===J.value?await async function(){const e=X.value.find(e=>e.id===Y.value);if(!e)return void(E.value="No style selected. Please select an image style first.");if(!z.value)return void(E.value="No content available in the Description field. Add text with [image placeholders] first.");re.value=!0,oe.value=0;try{de.value="Generating image prompts with AI...",oe.value=10;const a=await R(e.prompt,z.value,ae.value);if(!a\|\|!a.images\|\|0===a.images.length)return E.value="No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.",void(re.value=!1);oe.value=30,de.value=`Generating images for ${a.images.length} placeholder(s)...`;const n=[],t=60/a.images.length;for(let l=0;l<a.images.length;l++){const i=a.images[l];de.value=`Generating images for "${i.placeholder}"... (${l+1}/${a.images.length})`;const r=i.prompts[0]\|\|`${e.prompt}. Subject: ${i.placeholder}`,d=i.prompts[1]\|\|r,[o,s]=await Promise.all([U(r,ee.value,ae.value),U(d,ee.value,ae.value)]);n.push({placeholder:i.placeholder,prompt1:r,prompt2:d,image1:o,image2:s,selected:o?1:s?2:null}),oe.value=30+(l+1)t}de.value="Saving generated images...",oe.value=90,F.value&&await K(String(F.value),n),de.value="Preparing image review...",oe.value=95,le.value=n,J.value="image-review",oe.value=100,ma()}catch(e){E.value=e.message\|\|"Image generation failed"}finally{re.value=!1}}():await async function(){if(!F.value)return void(E.value="No lesson ID available");const e=le.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(E.value="No images selected. Please select at least one image.");re.value=!0,de.value="Fetching current content...",oe.value=20;try{const a=await W(String(F.value));if(!a)return E.value="Could not fetch lesson content. Make sure Description field has content.",void(re.value=!1);oe.value=40,de.value="Applying selected images to content...";const n=T(a,e);oe.value=80;await O(String(F.value),n)?(oe.value=100,de.value="Images applied successfully! Refreshing...",setTimeout(()=>{window.location.reload()},1e3)):E.value="Failed to update lesson content"}catch(e){E.value=e.message\|\|"Failed to apply images"}finally{re.value=!1}}())}function pa(e){!async function(e){if(e===ae.value)return;if(!ne.value&&!confirm("Warning: Changing the Flow ID will affect all users.\n\nAre you sure you want to continue?"))return;te.value=!0,await G(e)&&(ae.value=e),te.value=!1}(e.target.value.trim())}function va(e){e.target.blur()}return k(()=>{_e(),be(),async function(){const[e,a]=await Promise.all([j(),M()]);ae.value=e,ne.value=a}()}),i(()=>p.mode,e=>{e&&(J.value=e)}),i(()=>p.value,()=>{_e()},{deep:!0}),(e,n)=>{const t=r("v-icon");return d(),o("div",je,[c(" Processing State "),re.value?(d(),o("div",Ge,[u("div",Me,[v(t,{name:"refresh",class:"spinning"}),u("span",null,f(de.value),1)]),u("div",Ae,[u("div",{class:"widget__progress-fill",style:I({width:oe.value+"%"})},null,4)])])):S(P)&&!X.value.length?(d(),o(m,{key:1},[c(" Loading State "),u("div",Ne,[v(t,{name:"refresh"}),n[0]\|\|(n[0]=u("span",null,"Loading styles...",-1))])],2112)):S(E)?(d(),o(m,{key:2},[c(" Error State "),u("div",Be,[v(t,{name:"error"}),u("span",null,f(S(E)),1),u("button",{class:"widget__retry",onClick:be},"Retry")])],2112)):"style-select"===J.value?(d(),o(m,{key:3},[c(" Mode 1: Style Selection "),u("div",De,[u("div",Ve,[u("div",Le,[u("h2",Re,[v(t,{name:"palette"}),n[1]\|\|(n[1]=h(" Select Image Style ",-1))]),n[2]\|\|(n[2]=u("p",{class:"widget__subtitle"}," Choose a style for your generated images ",-1))]),u("div",Ue,[u("div",Te,[n[3]\|\|(n[3]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:C(va,["enter"])},null,40,Oe),te.value?(d(),o("span",We,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",qe,[n[4]\|\|(n[4]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",Ke,[(d(!0),o(m,null,$(S(Pe),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},f(e.name),11,He))),128))])])])])]),u("div",Je,[(d(!0),o(m,null,$(X.value,e=>(d(),x(Q,{key:e.id,style:I(e),"is-selected":Y.value===e.id,loading:Z.value===e.id,"radio-group-name":`style-select-${S(g)}`,"get-file-url":S(V),onSelect:we,onEdit:a=>function(e){me.value=e,ge.value=null,ce.value=`Style: ${e.name}`,ue.value=e.prompt,se.value=!0}(e),onRegenerate:ke},null,8,["style","is-selected","loading","radio-group-name","get-file-url","onEdit"]))),128))]),0===X.value.length?(d(),o("div",Qe,[v(t,{name:"palette"}),n[5]\|\|(n[5]=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"===J.value?(d(),o(m,{key:4},[c(" Mode 2: Image Review "),u("div",Xe,[u("div",Ye,[u("div",Ze,[u("h2",ea,[v(t,{name:"photo_library"}),n[6]\|\|(n[6]=h(" Review Generated Images ",-1))]),n[7]\|\|(n[7]=u("p",{class:"widget__subtitle"}," Select the best image for each placeholder ",-1))]),u("div",aa,[u("div",na,[n[8]\|\|(n[8]=u("label",{class:"widget__url-label"},"Flow ID:",-1)),u("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:C(va,["enter"])},null,40,ta),te.value?(d(),o("span",la,[v(t,{name:"refresh",class:"spinning",small:""})])):c("v-if",!0)]),u("div",ia,[n[9]\|\|(n[9]=u("label",{class:"widget__model-label"},"AI Model:",-1)),u("div",ra,[(d(!0),o(m,null,$(S(Pe),e=>(d(),o("button",{key:e.id,class:s(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},f(e.name),11,da))),128))])])])])]),u("div",oa,[(d(!0),o(m,null,$(le.value,e=>(d(),x(he,{key:e.placeholder,item:e,loading:ie.value===e.placeholder,"get-file-url":S(V),onSelectImage:Ie,onEdit:a=>function(e){me.value=null,ge.value=e,ce.value=`Image: ${e.placeholder}`,ue.value=e.prompt1,se.value=!0}(e),onRegenerate:Se,onDelete:Ce},null,8,["item","loading","get-file-url","onEdit"]))),128))]),0===le.value.length?(d(),o("div",sa,[v(t,{name:"photo_library"}),n[10]\|\|(n[10]=u("p",null,"No images to review",-1)),n[11]\|\|(n[11]=u("span",null,"Generate images first",-1))])):c("v-if",!0)],64)):c("v-if",!0),c(" Footer Buttons "),re.value?c("v-if",!0):(d(),o("div",ca,[c(" Back button always visible in image-review mode "),"image-review"===J.value?(d(),o("button",{key:0,class:"widget__back",onClick:ye},[v(t,{name:"arrow_back"}),n[12]\|\|(n[12]=u("span",null,"Back",-1))])):c("v-if",!0),c(" View Images button in style-select mode when styles exist "),"style-select"===J.value&&X.value.length>0?(d(),o("button",{key:1,class:"widget__view-images",onClick:xe},[v(t,{name:"photo_library"}),n[13]\|\|(n[13]=u("span",null,"View Generated Images",-1))])):c("v-if",!0),u("button",{class:"widget__confirm",disabled:!ve.value,onClick:ga},[v(t,{name:"style-select"===J.value?"arrow_forward":"check"},null,8,["name"]),u("span",null,f(fe.value),1)],8,ua)])),c(" Edit Modal "),v(ze,{"is-open":se.value,title:ce.value,prompt:ue.value,saving:pe.value,placeholder:"Enter prompt text...",onClose:$e,onSave:Fe},null,8,["is-open","title","prompt","saving"])])}}});H("\n.image-style-widget[data-v-670aa1b9] {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n.widget__loading[data-v-670aa1b9],\n.widget__error[data-v-670aa1b9],\n.widget__empty[data-v-670aa1b9] {\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-670aa1b9],\n.widget__error v-icon[data-v-670aa1b9],\n.widget__empty v-icon[data-v-670aa1b9] {\n font-size: 32px;\n}\n.widget__error[data-v-670aa1b9] {\n color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-670aa1b9] {\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-670aa1b9] {\n padding-bottom: 16px;\n border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-670aa1b9] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 16px;\n}\n.widget__header-text[data-v-670aa1b9] {\n flex: 1;\n}\n.widget__header-controls[data-v-670aa1b9] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n align-items: flex-end;\n}\n.widget__url-input[data-v-670aa1b9] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.widget__url-label[data-v-670aa1b9] {\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-670aa1b9] {\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-670aa1b9]:focus {\n outline: none;\n border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-670aa1b9]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n.widget__url-saving[data-v-670aa1b9] {\n display: flex;\n align-items: center;\n}\n.widget__model-selector[data-v-670aa1b9] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: flex-end;\n}\n.widget__model-label[data-v-670aa1b9] {\n font-size: 12px;\n font-weight: 500;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-670aa1b9] {\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-670aa1b9] {\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-670aa1b9]:hover {\n color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-670aa1b9] {\n background: var(--theme--primary, #6644ff);\n color: #fff;\n}\n.widget__model-btn--active[data-v-670aa1b9]:hover {\n color: #fff;\n}\n.widget__title[data-v-670aa1b9] {\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__subtitle[data-v-670aa1b9] {\n margin: 4px 0 0 0;\n font-size: 13px;\n color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-670aa1b9] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n.widget__footer[data-v-670aa1b9] {\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-670aa1b9] {\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-670aa1b9]:hover:not(:disabled) {\n background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-670aa1b9]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.widget__back[data-v-670aa1b9] {\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-670aa1b9]:hover {\n background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-670aa1b9] {\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-670aa1b9]:hover {\n background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-670aa1b9] {\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-670aa1b9] {\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-670aa1b9] {\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-670aa1b9] {\n height: 100%;\n background: var(--theme--primary, #6644ff);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n.spinning[data-v-670aa1b9] {\n animation: spin-670aa1b9 1s linear infinite;\n}\n@keyframes spin-670aa1b9 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-670aa1b9] {\n margin: 0;\n font-weight: 600;\n color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-670aa1b9] {\n font-size: 13px;\n}\n",{});var ga=a({id:"image-style-widget",name:"Image Style Widget",icon:"palette",description:"Visual style selector and image reviewer",component:J(ma,[["__scopeId","data-v-670aa1b9"],["__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"}}],types:["json","string"]});export{ga as default};

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@stellartech/image-style-widget-directus",
   "description": "Visual style selector and image reviewer for Directus",
   "icon": "image",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "readme": "README.md",
   "repository": {