@stellartech/image-style-widget-directus 1.0.2 → 1.0.4

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