@stellartech/image-style-widget-directus 1.0.12 → 1.0.13

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