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

package/README.md

@@ -0,0 +1,28 @@
+# @stellartech/image-style-widget-directus
+
+Visual style selector and image reviewer interface for Directus.
+
+## Installation
+
+```bash
+npm install @stellartech/image-style-widget-directus
+```
+
+## Features
+
+- Visual style selection with image previews
+- Image review and management capabilities
+- Seamless integration with Directus interfaces
+
+## Requirements
+
+- Directus ^11.0.0
+- Vue ^3.4.0
+
+## Usage
+
+After installation, the interface will be available in your Directus instance as a custom interface type.
+
+## License
+
+MIT

package/dist/index.js

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

package/package.json

@@ -2,8 +2,9 @@
   "name": "@stellartech/image-style-widget-directus",
   "description": "Visual style selector and image reviewer for Directus",
   "icon": "image",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "license": "MIT",
+  "readme": "README.md",
   "repository": {
     "type": "git",
     "url": "https://github.com/StellarTechLab/directus-misc.git",
@@ -20,7 +21,8 @@
     "widget"
   ],
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"