@stellartech/image-style-widget-directus 1.0.3 → 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 (3) hide show
  1. package/dist/index.js +1 -1
  2. package/package.json +1 -1
  3. package/README.md +0 -67
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,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.3",
5
+ "version": "1.0.4",
6
6
  "license": "MIT",
7
7
  "repository": {
8
8
  "type": "git",
package/README.md DELETED
@@ -1,67 +0,0 @@
1
- # @stellartech/image-style-widget-directus
2
-
3
- A Directus interface extension that provides a visual style selector and image reviewer for AI-generated content workflows.
4
-
5
- ## Features
6
-
7
- - **Style Selection**: Browse and select from predefined styles with example images and prompts
8
- - **Image Review**: Compare and select between generated image variants
9
- - **Lightbox View**: Click images to view them in full-size overlay
10
- - **Prompt Display**: View truncated prompts with full text available
11
- - **Generation Controls**: Regenerate images and edit prompts directly from the interface
12
-
13
- ## Installation
14
-
15
- ```bash
16
- npm install @stellartech/image-style-widget-directus
17
- ```
18
-
19
- Or add to your Directus extensions folder and build:
20
-
21
- ```bash
22
- cd extensions/image-style-widget
23
- npm install
24
- npm run build
25
- ```
26
-
27
- ## Usage
28
-
29
- Once installed, the interface will be available in Directus when configuring fields. Select "Image Style Widget" as the interface type for your field.
30
-
31
- ### Style Selection Mode
32
-
33
- Displays style cards with:
34
- - Two example images per style
35
- - Style name and prompt preview
36
- - Radio selection for choosing a style
37
- - Option to generate new example images
38
-
39
- ### Image Review Mode
40
-
41
- Displays image cards with:
42
- - Two generated image variants side by side
43
- - Image badges for identification
44
- - Selection buttons to choose preferred image
45
- - Actions to edit prompt, regenerate, or delete
46
-
47
- ## Development
48
-
49
- ```bash
50
- # Install dependencies
51
- npm install
52
-
53
- # Build the extension
54
- npm run build
55
-
56
- # Watch mode for development
57
- npm run dev
58
- ```
59
-
60
- ## Requirements
61
-
62
- - Directus 11.0.0 or higher
63
- - Vue 3.4.0 or higher
64
-
65
- ## License
66
-
67
- MIT