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

package/dist/index.js

@@ -1,1809 +1 @@
-import { useApi, defineInterface } from '@directus/extensions-sdk';
-import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, createVNode, toDisplayString, ref, watch, nextTick, withModifiers, createTextVNode, withDirectives, vModelText, createBlock, inject, onMounted, normalizeStyle, unref, Fragment, withKeys, renderList } from 'vue';
-
-const _hoisted_1$3 = { class: "style-card__images" };
-const _hoisted_2$3 = { class: "style-card__image" };
-const _hoisted_3$3 = ["src", "alt"];
-const _hoisted_4$3 = {
-  key: 1,
-  class: "style-card__placeholder"
-};
-const _hoisted_5$3 = { class: "style-card__image" };
-const _hoisted_6$3 = ["src", "alt"];
-const _hoisted_7$3 = {
-  key: 1,
-  class: "style-card__placeholder"
-};
-const _hoisted_8$3 = { class: "style-card__content" };
-const _hoisted_9$2 = { class: "style-card__header" };
-const _hoisted_10$2 = { class: "style-card__radio" };
-const _hoisted_11$2 = ["checked", "name"];
-const _hoisted_12$2 = { class: "style-card__name" };
-const _hoisted_13$2 = { class: "style-card__prompt" };
-const _hoisted_14$2 = { class: "style-card__actions" };
-const _hoisted_16$2 = ["disabled"];
-var _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  __name: "StyleCard",
-  props: {
-    style: {},
-    isSelected: { type: Boolean },
-    radioGroupName: {},
-    loading: { type: Boolean },
-    getFileUrl: { type: Function }
-  },
-  emits: ["select", "edit", "regenerate"],
-  setup(__props) {
-    const props = __props;
-    const truncatedPrompt = computed(() => {
-      const maxLength = 100;
-      if (props.style.prompt.length <= maxLength)
-        return props.style.prompt;
-      return props.style.prompt.substring(0, maxLength) + "...";
-    });
-    return (_ctx, _cache) => {
-      const _component_v_icon = resolveComponent("v-icon");
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["style-card", { "style-card--selected": __props.isSelected }])
-        },
-        [
-          createCommentVNode(" Images Section "),
-          createElementVNode("div", _hoisted_1$3, [
-            createElementVNode("div", _hoisted_2$3, [
-              __props.style.example_1 ? (openBlock(), createElementBlock("img", {
-                key: 0,
-                src: __props.getFileUrl(__props.style.example_1),
-                alt: `${__props.style.name} example 1`
-              }, null, 8, _hoisted_3$3)) : (openBlock(), createElementBlock("div", _hoisted_4$3, [
-                createVNode(_component_v_icon, { name: "image" })
-              ]))
-            ]),
-            createElementVNode("div", _hoisted_5$3, [
-              __props.style.example_2 ? (openBlock(), createElementBlock("img", {
-                key: 0,
-                src: __props.getFileUrl(__props.style.example_2),
-                alt: `${__props.style.name} example 2`
-              }, null, 8, _hoisted_6$3)) : (openBlock(), createElementBlock("div", _hoisted_7$3, [
-                createVNode(_component_v_icon, { name: "image" })
-              ]))
-            ])
-          ]),
-          createCommentVNode(" Content Section "),
-          createElementVNode("div", _hoisted_8$3, [
-            createCommentVNode(" Header: Radio + Name "),
-            createElementVNode("div", _hoisted_9$2, [
-              createElementVNode("label", _hoisted_10$2, [
-                createElementVNode("input", {
-                  type: "radio",
-                  checked: __props.isSelected,
-                  name: __props.radioGroupName,
-                  onChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("select", __props.style.id))
-                }, null, 40, _hoisted_11$2),
-                _cache[4] || (_cache[4] = createElementVNode(
-                  "span",
-                  { class: "style-card__radio-custom" },
-                  null,
-                  -1
-                  /* CACHED */
-                ))
-              ]),
-              createElementVNode(
-                "h3",
-                _hoisted_12$2,
-                toDisplayString(__props.style.name),
-                1
-                /* TEXT */
-              )
-            ]),
-            createCommentVNode(" Prompt Preview "),
-            createElementVNode(
-              "p",
-              _hoisted_13$2,
-              toDisplayString(truncatedPrompt.value),
-              1
-              /* TEXT */
-            ),
-            createCommentVNode(" Actions "),
-            createElementVNode("div", _hoisted_14$2, [
-              createCommentVNode(' Hidden for now - set v-if="true" to restore '),
-              createCommentVNode("v-if", true),
-              createElementVNode("button", {
-                class: "style-card__btn style-card__btn--secondary",
-                disabled: __props.loading,
-                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("regenerate", __props.style))
-              }, [
-                createVNode(_component_v_icon, {
-                  name: "refresh",
-                  small: ""
-                }),
-                createElementVNode(
-                  "span",
-                  null,
-                  toDisplayString(__props.loading ? "Generating..." : "Generate an example"),
-                  1
-                  /* TEXT */
-                )
-              ], 8, _hoisted_16$2),
-              createElementVNode(
-                "button",
-                {
-                  class: normalizeClass(["style-card__btn", { "style-card__btn--primary": __props.isSelected }]),
-                  onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("select", __props.style.id))
-                },
-                [
-                  createVNode(_component_v_icon, {
-                    name: __props.isSelected ? "radio_button_checked" : "radio_button_unchecked",
-                    small: ""
-                  }, null, 8, ["name"]),
-                  _cache[6] || (_cache[6] = createElementVNode(
-                    "span",
-                    null,
-                    "Select",
-                    -1
-                    /* CACHED */
-                  ))
-                ],
-                2
-                /* CLASS */
-              )
-            ])
-          ])
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$3 = "\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";
-n(css$3,{});
-
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-
-var StyleCard = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-99b31e92"], ["__file", "StyleCard.vue"]]);
-
-const _hoisted_1$2 = { class: "image-card" };
-const _hoisted_2$2 = { class: "image-card__header" };
-const _hoisted_3$2 = { class: "image-card__placeholder-text" };
-const _hoisted_4$2 = { class: "image-card__body" };
-const _hoisted_5$2 = { class: "image-card__images" };
-const _hoisted_6$2 = ["src"];
-const _hoisted_7$2 = {
-  key: 1,
-  class: "image-card__image-placeholder"
-};
-const _hoisted_8$2 = ["src"];
-const _hoisted_9$1 = {
-  key: 1,
-  class: "image-card__image-placeholder"
-};
-const _hoisted_10$1 = { class: "image-card__content" };
-const _hoisted_11$1 = { class: "image-card__prompts-section" };
-const _hoisted_12$1 = { class: "image-card__prompt-item" };
-const _hoisted_13$1 = { class: "image-card__prompt" };
-const _hoisted_14$1 = { class: "image-card__actions" };
-const _hoisted_15$1 = ["disabled"];
-const _hoisted_16$1 = ["disabled"];
-const _hoisted_17$1 = ["disabled"];
-const _hoisted_18$1 = { class: "image-card__selection" };
-const _hoisted_19$1 = ["src"];
-var _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  __name: "ImageCard",
-  props: {
-    item: {},
-    loading: { type: Boolean },
-    getFileUrl: { type: Function }
-  },
-  emits: ["select-image", "edit", "regenerate", "delete"],
-  setup(__props) {
-    const props = __props;
-    const enlargedImage = ref(null);
-    function getOriginalFileUrl(fileId) {
-      if (!fileId)
-        return "";
-      return `/assets/${fileId}`;
-    }
-    function openLightbox(fileId) {
-      enlargedImage.value = getOriginalFileUrl(fileId);
-    }
-    function closeLightbox() {
-      enlargedImage.value = null;
-    }
-    const truncatedPrompt1 = computed(() => {
-      const maxLength = 120;
-      if (props.item.prompt1.length <= maxLength)
-        return props.item.prompt1;
-      return props.item.prompt1.substring(0, maxLength) + "...";
-    });
-    return (_ctx, _cache) => {
-      const _component_v_icon = resolveComponent("v-icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createCommentVNode(" Placeholder Header "),
-        createElementVNode("div", _hoisted_2$2, [
-          createVNode(_component_v_icon, { name: "image" }),
-          createElementVNode(
-            "span",
-            _hoisted_3$2,
-            toDisplayString(__props.item.placeholder),
-            1
-            /* TEXT */
-          )
-        ]),
-        createElementVNode("div", _hoisted_4$2, [
-          createCommentVNode(" Images Section "),
-          createElementVNode("div", _hoisted_5$2, [
-            createElementVNode(
-              "div",
-              {
-                class: normalizeClass(["image-card__image", { "image-card__image--selected": __props.item.selected === 1 }]),
-                onClick: _cache[0] || (_cache[0] = ($event) => __props.item.image1 && openLightbox(__props.item.image1))
-              },
-              [
-                __props.item.image1 ? (openBlock(), createElementBlock("img", {
-                  key: 0,
-                  src: __props.getFileUrl(__props.item.image1),
-                  alt: "Generated image 1"
-                }, null, 8, _hoisted_6$2)) : (openBlock(), createElementBlock("div", _hoisted_7$2, [
-                  createVNode(_component_v_icon, { name: "image" })
-                ])),
-                _cache[7] || (_cache[7] = createElementVNode(
-                  "div",
-                  { class: "image-card__image-badge" },
-                  "1",
-                  -1
-                  /* CACHED */
-                ))
-              ],
-              2
-              /* CLASS */
-            ),
-            createElementVNode(
-              "div",
-              {
-                class: normalizeClass(["image-card__image", { "image-card__image--selected": __props.item.selected === 2 }]),
-                onClick: _cache[1] || (_cache[1] = ($event) => __props.item.image2 && openLightbox(__props.item.image2))
-              },
-              [
-                __props.item.image2 ? (openBlock(), createElementBlock("img", {
-                  key: 0,
-                  src: __props.getFileUrl(__props.item.image2),
-                  alt: "Generated image 2"
-                }, null, 8, _hoisted_8$2)) : (openBlock(), createElementBlock("div", _hoisted_9$1, [
-                  createVNode(_component_v_icon, { name: "image" })
-                ])),
-                _cache[8] || (_cache[8] = createElementVNode(
-                  "div",
-                  { class: "image-card__image-badge" },
-                  "2",
-                  -1
-                  /* CACHED */
-                ))
-              ],
-              2
-              /* CLASS */
-            )
-          ]),
-          createCommentVNode(" Content Section "),
-          createElementVNode("div", _hoisted_10$1, [
-            createCommentVNode(" Prompt Display "),
-            createElementVNode("div", _hoisted_11$1, [
-              createElementVNode("div", _hoisted_12$1, [
-                _cache[9] || (_cache[9] = createElementVNode(
-                  "span",
-                  { class: "image-card__prompt-label" },
-                  "Prompt:",
-                  -1
-                  /* CACHED */
-                )),
-                createElementVNode(
-                  "p",
-                  _hoisted_13$1,
-                  toDisplayString(truncatedPrompt1.value),
-                  1
-                  /* TEXT */
-                )
-              ])
-            ]),
-            createCommentVNode(" Actions "),
-            createElementVNode("div", _hoisted_14$1, [
-              createElementVNode("button", {
-                class: "image-card__btn image-card__btn--secondary",
-                disabled: __props.loading,
-                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("edit", __props.item))
-              }, [
-                createVNode(_component_v_icon, {
-                  name: "edit",
-                  small: ""
-                }),
-                _cache[10] || (_cache[10] = createElementVNode(
-                  "span",
-                  null,
-                  "Edit Prompt",
-                  -1
-                  /* CACHED */
-                ))
-              ], 8, _hoisted_15$1),
-              createElementVNode("button", {
-                class: "image-card__btn image-card__btn--secondary",
-                disabled: __props.loading,
-                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("regenerate", __props.item))
-              }, [
-                createVNode(_component_v_icon, {
-                  name: "refresh",
-                  small: ""
-                }),
-                createElementVNode(
-                  "span",
-                  null,
-                  toDisplayString(__props.loading ? "Generating..." : "Regenerate"),
-                  1
-                  /* TEXT */
-                )
-              ], 8, _hoisted_16$1),
-              createElementVNode("button", {
-                class: "image-card__btn image-card__btn--danger",
-                disabled: __props.loading,
-                onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("delete", __props.item))
-              }, [
-                createVNode(_component_v_icon, {
-                  name: "delete",
-                  small: ""
-                }),
-                _cache[11] || (_cache[11] = createElementVNode(
-                  "span",
-                  null,
-                  "Delete",
-                  -1
-                  /* CACHED */
-                ))
-              ], 8, _hoisted_17$1)
-            ]),
-            createCommentVNode(" Selection Buttons "),
-            createElementVNode("div", _hoisted_18$1, [
-              createElementVNode(
-                "button",
-                {
-                  class: normalizeClass(["image-card__select-btn", { "image-card__select-btn--active": __props.item.selected === 1 }]),
-                  onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("select-image", __props.item.placeholder, 1))
-                },
-                [
-                  createVNode(_component_v_icon, {
-                    name: __props.item.selected === 1 ? "check_box" : "check_box_outline_blank",
-                    small: ""
-                  }, null, 8, ["name"]),
-                  _cache[12] || (_cache[12] = createElementVNode(
-                    "span",
-                    null,
-                    "Select 1",
-                    -1
-                    /* CACHED */
-                  ))
-                ],
-                2
-                /* CLASS */
-              ),
-              createElementVNode(
-                "button",
-                {
-                  class: normalizeClass(["image-card__select-btn", { "image-card__select-btn--active": __props.item.selected === 2 }]),
-                  onClick: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("select-image", __props.item.placeholder, 2))
-                },
-                [
-                  createVNode(_component_v_icon, {
-                    name: __props.item.selected === 2 ? "check_box" : "check_box_outline_blank",
-                    small: ""
-                  }, null, 8, ["name"]),
-                  _cache[13] || (_cache[13] = createElementVNode(
-                    "span",
-                    null,
-                    "Select 2",
-                    -1
-                    /* CACHED */
-                  ))
-                ],
-                2
-                /* CLASS */
-              )
-            ])
-          ])
-        ]),
-        createCommentVNode(" Lightbox Modal "),
-        enlargedImage.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "image-card__lightbox",
-          onClick: closeLightbox
-        }, [
-          createElementVNode("img", {
-            src: enlargedImage.value,
-            alt: "Enlarged image"
-          }, null, 8, _hoisted_19$1)
-        ])) : createCommentVNode("v-if", true)
-      ]);
-    };
-  }
-});
-
-var css$2 = "\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";
-n(css$2,{});
-
-var ImageCard = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-20b0594f"], ["__file", "ImageCard.vue"]]);
-
-const _hoisted_1$1 = { class: "edit-modal" };
-const _hoisted_2$1 = { class: "edit-modal__header" };
-const _hoisted_3$1 = { class: "edit-modal__title" };
-const _hoisted_4$1 = { class: "edit-modal__body" };
-const _hoisted_5$1 = { class: "edit-modal__label" };
-const _hoisted_6$1 = ["placeholder"];
-const _hoisted_7$1 = { class: "edit-modal__footer" };
-const _hoisted_8$1 = ["disabled"];
-var _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  __name: "EditModal",
-  props: {
-    isOpen: { type: Boolean },
-    title: {},
-    prompt: {},
-    placeholder: {},
-    saving: { type: Boolean }
-  },
-  emits: ["close", "save"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const localPrompt = ref(props.prompt);
-    const textareaRef = ref(null);
-    const hasChanges = computed(() => localPrompt.value !== props.prompt);
-    watch(() => props.prompt, (newPrompt) => {
-      localPrompt.value = newPrompt;
-    });
-    watch(() => props.isOpen, async (isOpen) => {
-      if (isOpen) {
-        localPrompt.value = props.prompt;
-        await nextTick();
-        textareaRef.value?.focus();
-        textareaRef.value?.select();
-      }
-    });
-    function handleSave() {
-      if (hasChanges.value) {
-        emit("save", localPrompt.value);
-      }
-    }
-    return (_ctx, _cache) => {
-      const _component_v_icon = resolveComponent("v-icon");
-      return __props.isOpen ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: "edit-modal__overlay",
-        onClick: _cache[3] || (_cache[3] = withModifiers(($event) => _ctx.$emit("close"), ["self"]))
-      }, [
-        createElementVNode("div", _hoisted_1$1, [
-          createElementVNode("div", _hoisted_2$1, [
-            createElementVNode("h3", _hoisted_3$1, [
-              createVNode(_component_v_icon, { name: "edit" }),
-              _cache[4] || (_cache[4] = createTextVNode(
-                " Edit Prompt ",
-                -1
-                /* CACHED */
-              ))
-            ]),
-            createElementVNode("button", {
-              class: "edit-modal__close",
-              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-            }, [
-              createVNode(_component_v_icon, { name: "close" })
-            ])
-          ]),
-          createElementVNode("div", _hoisted_4$1, [
-            createElementVNode(
-              "label",
-              _hoisted_5$1,
-              toDisplayString(__props.title),
-              1
-              /* TEXT */
-            ),
-            withDirectives(createElementVNode("textarea", {
-              ref_key: "textareaRef",
-              ref: textareaRef,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => localPrompt.value = $event),
-              class: "edit-modal__textarea",
-              rows: "6",
-              placeholder: __props.placeholder
-            }, null, 8, _hoisted_6$1), [
-              [vModelText, localPrompt.value]
-            ]),
-            _cache[5] || (_cache[5] = createElementVNode(
-              "p",
-              { class: "edit-modal__hint" },
-              " Edit the prompt text and click Save to apply changes. ",
-              -1
-              /* CACHED */
-            ))
-          ]),
-          createElementVNode("div", _hoisted_7$1, [
-            createElementVNode("button", {
-              class: "edit-modal__btn edit-modal__btn--secondary",
-              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
-            }, " Cancel "),
-            createElementVNode("button", {
-              class: "edit-modal__btn edit-modal__btn--primary",
-              disabled: !hasChanges.value || __props.saving,
-              onClick: handleSave
-            }, [
-              __props.saving ? (openBlock(), createBlock(_component_v_icon, {
-                key: 0,
-                name: "refresh",
-                small: ""
-              })) : createCommentVNode("v-if", true),
-              createElementVNode(
-                "span",
-                null,
-                toDisplayString(__props.saving ? "Saving..." : "Save"),
-                1
-                /* TEXT */
-              )
-            ], 8, _hoisted_8$1)
-          ])
-        ])
-      ])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-
-var css$1 = "\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";
-n(css$1,{});
-
-var EditModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-44d552bc"], ["__file", "EditModal.vue"]]);
-
-const IMAGE_MODELS = [
-  { id: "flux-kontext-pro", name: "Flux" },
-  { id: "gemini-2.5-flash-image", name: "Nano Banana" }
-];
-const DEFAULT_SERVICE_URL = "http://localhost:8004";
-function useDirectusApi() {
-  const api = useApi();
-  const loading = ref(false);
-  const error = ref(null);
-  async function fetchServiceUrl() {
-    try {
-      const response = await api.get("/items/WidgetConfig");
-      return response.data.data?.service_url || DEFAULT_SERVICE_URL;
-    } catch (e) {
-      console.warn("Failed to fetch service URL, using default:", e.message);
-      return DEFAULT_SERVICE_URL;
-    }
-  }
-  async function updateServiceUrl(url) {
-    try {
-      await api.patch("/items/WidgetConfig", {
-        service_url: url
-      });
-      return true;
-    } catch (e) {
-      error.value = e.message || "Failed to update service URL";
-      return false;
-    }
-  }
-  async function checkIsAdmin() {
-    try {
-      const response = await api.get("/users/me", {
-        params: {
-          fields: ["role.admin_access"]
-        }
-      });
-      return response.data.data?.role?.admin_access === true;
-    } catch (e) {
-      console.warn("Failed to check admin status:", e.message);
-      return false;
-    }
-  }
-  async function fetchStyles(collection = "ImageStyles") {
-    loading.value = true;
-    error.value = null;
-    try {
-      const response = await api.get(`/items/${collection}`, {
-        params: {
-          filter: { is_active: { _eq: true } },
-          sort: ["sort"],
-          fields: ["id", "name", "prompt", "example_1", "example_2", "is_active", "sort"]
-        }
-      });
-      return response.data.data || [];
-    } catch (e) {
-      error.value = e.message || "Failed to fetch styles";
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function updateStylePrompt(collection, styleId, newPrompt) {
-    loading.value = true;
-    error.value = null;
-    try {
-      await api.patch(`/items/${collection}/${styleId}`, {
-        prompt: newPrompt
-      });
-      return true;
-    } catch (e) {
-      error.value = e.message || "Failed to update prompt";
-      return false;
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function generateSingleImage(prompt, model = "flux-kontext-pro", serviceUrl = DEFAULT_SERVICE_URL) {
-    const miscServiceUrl = `${serviceUrl}/api/misc/images/upload`;
-    const response = await fetch(miscServiceUrl, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({
-        prompt,
-        model,
-        format: "png",
-        aspect_ratio: "16:9"
-      })
-    });
-    if (!response.ok) {
-      throw new Error(`Image generation failed: ${response.status}`);
-    }
-    const data = await response.json();
-    return data?.id || null;
-  }
-  async function regenerateStyleExamples(styleId, prompt, collection = "ImageStyles", model = "flux-kontext-pro", serviceUrl = DEFAULT_SERVICE_URL) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const [example_1, example_2] = await Promise.all([
-        generateSingleImage(prompt, model, serviceUrl),
-        generateSingleImage(prompt, model, serviceUrl)
-      ]);
-      if (example_1 && example_2) {
-        await api.patch(`/items/${collection}/${styleId}`, {
-          example_1,
-          example_2
-        });
-        return { example_1, example_2 };
-      }
-      error.value = "Failed to generate images";
-      return null;
-    } catch (e) {
-      error.value = e.message || "Failed to regenerate images";
-      return null;
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function regeneratePlaceholderImages(prompt1, prompt2, model = "flux-kontext-pro", serviceUrl = DEFAULT_SERVICE_URL) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const [image1, image2] = await Promise.all([
-        generateSingleImage(prompt1, model, serviceUrl),
-        generateSingleImage(prompt2, model, serviceUrl)
-      ]);
-      if (image1 && image2) {
-        return { image1, image2 };
-      }
-      error.value = "Failed to generate images";
-      return null;
-    } catch (e) {
-      error.value = e.message || "Failed to regenerate images";
-      return null;
-    } finally {
-      loading.value = false;
-    }
-  }
-  function getFileUrl(fileId) {
-    if (!fileId)
-      return "";
-    return `/assets/${fileId}?width=200&height=200&fit=cover`;
-  }
-  async function generateImagePrompts(style, description, serviceUrl = DEFAULT_SERVICE_URL) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const miscServiceUrl = `${serviceUrl}/api/misc/prompts`;
-      const response = await fetch(miscServiceUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          style,
-          description,
-          model: "gpt-4o-mini"
-        })
-      });
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({ detail: response.statusText }));
-        throw new Error(errorData.detail || `HTTP ${response.status}`);
-      }
-      return await response.json();
-    } catch (e) {
-      error.value = e.message || "Failed to generate image prompts";
-      return null;
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function getImageVariants(lessonId) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const response = await api.get("/items/ImageVariants", {
-        params: {
-          filter: { lesson: { _eq: lessonId } },
-          fields: ["id", "title", "status", "lesson", "images.id", "images.image", "images.prompt", "images.status"]
-        }
-      });
-      return response.data.data || [];
-    } catch (e) {
-      error.value = e.message || "Failed to fetch image variants";
-      return [];
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function saveGeneratedImages(lessonId, items) {
-    loading.value = true;
-    error.value = null;
-    try {
-      for (const item of items) {
-        const variantResponse = await api.post("/items/ImageVariants", {
-          title: item.placeholder,
-          lesson: lessonId,
-          status: "found"
-        });
-        const variantId = variantResponse.data.data.id;
-        const contentImages = [];
-        if (item.image1) {
-          contentImages.push({
-            image: item.image1,
-            prompt: item.prompt1,
-            variants: variantId,
-            status: "generated"
-          });
-        }
-        if (item.image2) {
-          contentImages.push({
-            image: item.image2,
-            prompt: item.prompt2,
-            variants: variantId,
-            status: "generated"
-          });
-        }
-        if (contentImages.length > 0) {
-          await api.post("/items/ContentImage", contentImages);
-        }
-      }
-      return true;
-    } catch (e) {
-      error.value = e.message || "Failed to save generated images";
-      return false;
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function deleteImageVariant(lessonId, placeholder) {
-    loading.value = true;
-    error.value = null;
-    try {
-      const response = await api.get("/items/ImageVariants", {
-        params: {
-          filter: {
-            lesson: { _eq: lessonId },
-            title: { _eq: placeholder }
-          },
-          fields: ["id", "images.id", "images.image"]
-        }
-      });
-      const variants = response.data.data || [];
-      for (const variant of variants) {
-        const fileIdsToDelete = [];
-        if (variant.images && variant.images.length > 0) {
-          for (const img of variant.images) {
-            if (img.image) {
-              fileIdsToDelete.push(img.image);
-            }
-            await api.delete(`/items/ContentImage/${img.id}`);
-          }
-        }
-        await api.delete(`/items/ImageVariants/${variant.id}`);
-        for (const fileId of fileIdsToDelete) {
-          try {
-            await api.delete(`/files/${fileId}`);
-          } catch (fileError) {
-            console.warn(`Failed to delete file ${fileId}:`, fileError.message);
-          }
-        }
-      }
-      return true;
-    } catch (e) {
-      error.value = e.message || "Failed to delete image variant";
-      return false;
-    } finally {
-      loading.value = false;
-    }
-  }
-  function extractPlaceholders(content) {
-    const regex = /\[([^\]]+)\]/g;
-    const matches = [];
-    let match;
-    while ((match = regex.exec(content)) !== null) {
-      matches.push(match[1]);
-    }
-    return matches;
-  }
-  function updateContentWithImages(content, selections) {
-    let updated = content;
-    for (const { caption, fileId } of selections) {
-      const placeholder = `[${caption}]`;
-      const html = `<img src="/assets/${fileId}" alt="${caption}" />`;
-      updated = updated.replace(placeholder, html);
-    }
-    return updated;
-  }
-  async function updateLessonContent(lessonId, content) {
-    loading.value = true;
-    error.value = null;
-    try {
-      await api.patch(`/items/SM_Lessons/${lessonId}`, {
-        description: content
-      });
-      return true;
-    } catch (e) {
-      error.value = e.message || "Failed to update lesson content";
-      return false;
-    } finally {
-      loading.value = false;
-    }
-  }
-  async function fetchLessonContent(lessonId) {
-    try {
-      const response = await api.get(`/items/SM_Lessons/${lessonId}`, {
-        params: {
-          fields: ["description"]
-        }
-      });
-      return response.data.data?.description || response.data.data?.Description || null;
-    } catch (e) {
-      console.error("Failed to fetch lesson content:", e);
-      return null;
-    }
-  }
-  return {
-    loading,
-    error,
-    fetchServiceUrl,
-    updateServiceUrl,
-    checkIsAdmin,
-    fetchStyles,
-    updateStylePrompt,
-    regenerateStyleExamples,
-    regeneratePlaceholderImages,
-    getFileUrl,
-    generateImagePrompts,
-    getImageVariants,
-    saveGeneratedImages,
-    deleteImageVariant,
-    extractPlaceholders,
-    generateSingleImage,
-    updateContentWithImages,
-    updateLessonContent,
-    fetchLessonContent
-  };
-}
-
-const _hoisted_1 = { class: "image-style-widget" };
-const _hoisted_2 = {
-  key: 0,
-  class: "widget__processing"
-};
-const _hoisted_3 = { class: "widget__progress" };
-const _hoisted_4 = { class: "widget__progress-bar" };
-const _hoisted_5 = { class: "widget__loading" };
-const _hoisted_6 = { class: "widget__error" };
-const _hoisted_7 = { class: "widget__header" };
-const _hoisted_8 = { class: "widget__header-row" };
-const _hoisted_9 = { class: "widget__header-text" };
-const _hoisted_10 = { class: "widget__title" };
-const _hoisted_11 = { class: "widget__header-controls" };
-const _hoisted_12 = { class: "widget__url-input" };
-const _hoisted_13 = ["value", "disabled"];
-const _hoisted_14 = {
-  key: 0,
-  class: "widget__url-saving"
-};
-const _hoisted_15 = { class: "widget__model-selector" };
-const _hoisted_16 = { class: "widget__model-buttons" };
-const _hoisted_17 = ["onClick"];
-const _hoisted_18 = { class: "widget__list" };
-const _hoisted_19 = {
-  key: 0,
-  class: "widget__empty"
-};
-const _hoisted_20 = { class: "widget__header" };
-const _hoisted_21 = { class: "widget__header-row" };
-const _hoisted_22 = { class: "widget__header-text" };
-const _hoisted_23 = { class: "widget__title" };
-const _hoisted_24 = { class: "widget__header-controls" };
-const _hoisted_25 = { class: "widget__url-input" };
-const _hoisted_26 = ["value", "disabled"];
-const _hoisted_27 = {
-  key: 0,
-  class: "widget__url-saving"
-};
-const _hoisted_28 = { class: "widget__model-selector" };
-const _hoisted_29 = { class: "widget__model-buttons" };
-const _hoisted_30 = ["onClick"];
-const _hoisted_31 = { class: "widget__list" };
-const _hoisted_32 = {
-  key: 0,
-  class: "widget__empty"
-};
-const _hoisted_33 = {
-  key: 5,
-  class: "widget__footer"
-};
-const _hoisted_34 = ["disabled"];
-var _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "interface",
-  props: {
-    value: {},
-    mode: { default: "style-select" },
-    stylesCollection: { default: "ImageStyles" },
-    primaryKey: {},
-    collection: {}
-  },
-  emits: ["input"],
-  setup(__props, { emit: __emit }) {
-    const uid = Math.random().toString(36).substring(2, 9);
-    const props = __props;
-    const emit = __emit;
-    const injectedValuesRef = inject("values");
-    function getValues() {
-      if (!injectedValuesRef)
-        return {};
-      if (injectedValuesRef.value !== void 0) {
-        return injectedValuesRef.value;
-      }
-      return injectedValuesRef;
-    }
-    const lessonId = computed(() => {
-      const vals = getValues();
-      return props.primaryKey || vals?.id || null;
-    });
-    const lessonContent = computed(() => {
-      const vals = getValues();
-      const desc = vals?.description || vals?.Description || "";
-      return desc;
-    });
-    const {
-      loading,
-      error,
-      fetchServiceUrl,
-      updateServiceUrl,
-      checkIsAdmin,
-      fetchStyles,
-      updateStylePrompt,
-      regenerateStyleExamples,
-      regeneratePlaceholderImages,
-      getFileUrl,
-      extractPlaceholders,
-      generateImagePrompts,
-      generateSingleImage,
-      updateContentWithImages,
-      updateLessonContent,
-      fetchLessonContent,
-      getImageVariants,
-      saveGeneratedImages,
-      deleteImageVariant
-    } = useDirectusApi();
-    const currentMode = ref(props.mode);
-    const styles = ref([]);
-    const selectedStyleId = ref(null);
-    const regeneratingStyleId = ref(null);
-    const selectedModel = ref("flux-kontext-pro");
-    const serviceUrl = ref("http://localhost:8004");
-    const isAdmin = ref(false);
-    const savingUrl = ref(false);
-    const imageItems = ref([]);
-    const regeneratingPlaceholder = ref(null);
-    const processing = ref(false);
-    const processingMessage = ref("");
-    const progressPercent = ref(0);
-    const editModalOpen = ref(false);
-    const editModalTitle = ref("");
-    const editModalPrompt = ref("");
-    const editingStyle = ref(null);
-    const editingImageItem = ref(null);
-    const savingPrompt = ref(false);
-    computed(() => {
-      if (currentMode.value === "style-select") {
-        return styles.value.length > 0;
-      }
-      return imageItems.value.length > 0;
-    });
-    const isValid = computed(() => {
-      if (currentMode.value === "style-select") {
-        return selectedStyleId.value !== null;
-      }
-      return imageItems.value.every((item) => item.selected);
-    });
-    const confirmButtonText = computed(() => {
-      if (currentMode.value === "style-select") {
-        return "Generate Images";
-      }
-      return "Confirm Selections";
-    });
-    function initFromValue() {
-      if (!props.value)
-        return;
-      if (typeof props.value === "object") {
-        if (props.value.selectedStyleId) {
-          selectedStyleId.value = props.value.selectedStyleId;
-        }
-        if (props.value.items && props.value.items.length > 0) {
-          imageItems.value = props.value.items;
-          currentMode.value = "image-review";
-        }
-        if (props.value.currentMode) {
-          currentMode.value = props.value.currentMode;
-        }
-      }
-    }
-    async function loadStyles() {
-      styles.value = await fetchStyles(props.stylesCollection);
-      if (!selectedStyleId.value && styles.value.length > 0) {
-        selectedStyleId.value = styles.value[0].id;
-      }
-    }
-    function goBackToStyleSelect() {
-      currentMode.value = "style-select";
-      emitValue();
-    }
-    async function viewGeneratedImages() {
-      if (!lessonId.value)
-        return;
-      processing.value = true;
-      processingMessage.value = "Loading existing images...";
-      progressPercent.value = 10;
-      try {
-        const variants = await getImageVariants(String(lessonId.value));
-        progressPercent.value = 50;
-        if (!variants || variants.length === 0) {
-          error.value = "No generated images found for this lesson. Generate images first.";
-          processing.value = false;
-          return;
-        }
-        const existingItems = variants.map((variant) => {
-          const images = variant.images || [];
-          const img1 = images[0];
-          const img2 = images[1];
-          return {
-            placeholder: variant.title || "Untitled",
-            prompt1: img1?.prompt || "",
-            prompt2: img2?.prompt || img1?.prompt || "",
-            image1: img1?.image || null,
-            image2: img2?.image || null,
-            selected: img1?.image ? 1 : img2?.image ? 2 : null
-          };
-        });
-        progressPercent.value = 90;
-        imageItems.value = existingItems;
-        currentMode.value = "image-review";
-        progressPercent.value = 100;
-        emitValue();
-      } catch (e) {
-        error.value = e.message || "Failed to load existing images";
-      } finally {
-        processing.value = false;
-      }
-    }
-    function handleStyleSelect(styleId) {
-      selectedStyleId.value = styleId;
-      emitValue();
-    }
-    async function handleStyleRegenerate(style) {
-      regeneratingStyleId.value = style.id;
-      const result = await regenerateStyleExamples(style.id, style.prompt, props.stylesCollection, selectedModel.value, serviceUrl.value);
-      if (result) {
-        const index = styles.value.findIndex((s) => s.id === style.id);
-        if (index >= 0) {
-          styles.value[index] = {
-            ...styles.value[index],
-            example_1: result.example_1,
-            example_2: result.example_2
-          };
-        }
-      }
-      regeneratingStyleId.value = null;
-    }
-    function handleImageSelect(placeholder, imageNum) {
-      const item = imageItems.value.find((i) => i.placeholder === placeholder);
-      if (item) {
-        item.selected = imageNum;
-        emitValue();
-      }
-    }
-    async function handleImageRegenerate(item) {
-      regeneratingPlaceholder.value = item.placeholder;
-      const result = await regeneratePlaceholderImages(item.prompt1, item.prompt2, selectedModel.value, serviceUrl.value);
-      if (result) {
-        const index = imageItems.value.findIndex((i) => i.placeholder === item.placeholder);
-        if (index >= 0) {
-          imageItems.value[index] = {
-            ...imageItems.value[index],
-            image1: result.image1,
-            image2: result.image2,
-            selected: 1
-            // Reset selection to first image
-          };
-          emitValue();
-        }
-      }
-      regeneratingPlaceholder.value = null;
-    }
-    async function handleImageDelete(item) {
-      if (!lessonId.value)
-        return;
-      if (!confirm(`Delete "${item.placeholder}" and its images? This cannot be undone.`)) {
-        return;
-      }
-      regeneratingPlaceholder.value = item.placeholder;
-      const success = await deleteImageVariant(String(lessonId.value), item.placeholder);
-      if (success) {
-        const index = imageItems.value.findIndex((i) => i.placeholder === item.placeholder);
-        if (index >= 0) {
-          imageItems.value.splice(index, 1);
-          emitValue();
-        }
-      }
-      regeneratingPlaceholder.value = null;
-    }
-    function openEditModal(style) {
-      editingStyle.value = style;
-      editingImageItem.value = null;
-      editModalTitle.value = `Style: ${style.name}`;
-      editModalPrompt.value = style.prompt;
-      editModalOpen.value = true;
-    }
-    function openImageEditModal(item) {
-      editingStyle.value = null;
-      editingImageItem.value = item;
-      editModalTitle.value = `Image: ${item.placeholder}`;
-      editModalPrompt.value = item.prompt1;
-      editModalOpen.value = true;
-    }
-    function closeEditModal() {
-      editModalOpen.value = false;
-      editingStyle.value = null;
-      editingImageItem.value = null;
-    }
-    async function handleSavePrompt(newPrompt) {
-      savingPrompt.value = true;
-      if (editingStyle.value) {
-        const success = await updateStylePrompt(
-          props.stylesCollection,
-          editingStyle.value.id,
-          newPrompt
-        );
-        if (success) {
-          const index = styles.value.findIndex((s) => s.id === editingStyle.value.id);
-          if (index >= 0) {
-            styles.value[index] = {
-              ...styles.value[index],
-              prompt: newPrompt
-            };
-          }
-          closeEditModal();
-        }
-      } else if (editingImageItem.value) {
-        const index = imageItems.value.findIndex(
-          (i) => i.placeholder === editingImageItem.value.placeholder
-        );
-        if (index >= 0) {
-          imageItems.value[index] = {
-            ...imageItems.value[index],
-            prompt1: newPrompt
-          };
-          emitValue();
-          closeEditModal();
-        }
-      }
-      savingPrompt.value = false;
-    }
-    function emitValue() {
-      emit("input", {
-        currentMode: currentMode.value,
-        selectedStyleId: selectedStyleId.value,
-        selectedStyle: styles.value.find((s) => s.id === selectedStyleId.value) || null,
-        items: imageItems.value
-      });
-    }
-    async function handleConfirm() {
-      if (!isValid.value)
-        return;
-      if (currentMode.value === "style-select") {
-        await runImageGenerationFlow();
-      } else {
-        await applySelectedImages();
-      }
-    }
-    async function runImageGenerationFlow() {
-      const selectedStyle = styles.value.find((s) => s.id === selectedStyleId.value);
-      if (!selectedStyle) {
-        error.value = "No style selected. Please select an image style first.";
-        return;
-      }
-      if (!lessonContent.value) {
-        error.value = "No content available in the Description field. Add text with [image placeholders] first.";
-        return;
-      }
-      processing.value = true;
-      progressPercent.value = 0;
-      try {
-        processingMessage.value = "Generating image prompts with AI...";
-        progressPercent.value = 10;
-        const promptResponse = await generateImagePrompts(selectedStyle.prompt, lessonContent.value, serviceUrl.value);
-        if (!promptResponse || !promptResponse.images || promptResponse.images.length === 0) {
-          error.value = "No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.";
-          processing.value = false;
-          return;
-        }
-        progressPercent.value = 30;
-        processingMessage.value = `Generating images for ${promptResponse.images.length} placeholder(s)...`;
-        const newImageItems = [];
-        const progressPerItem = 60 / promptResponse.images.length;
-        for (let i = 0; i < promptResponse.images.length; i++) {
-          const imagePrompt = promptResponse.images[i];
-          processingMessage.value = `Generating images for "${imagePrompt.placeholder}"... (${i + 1}/${promptResponse.images.length})`;
-          const prompt1 = imagePrompt.prompts[0] || `${selectedStyle.prompt}. Subject: ${imagePrompt.placeholder}`;
-          const prompt2 = imagePrompt.prompts[1] || prompt1;
-          const [img1Result, img2Result] = await Promise.all([
-            generateSingleImage(prompt1, selectedModel.value, serviceUrl.value),
-            generateSingleImage(prompt2, selectedModel.value, serviceUrl.value)
-          ]);
-          newImageItems.push({
-            placeholder: imagePrompt.placeholder,
-            prompt1,
-            prompt2,
-            image1: img1Result,
-            image2: img2Result,
-            selected: img1Result ? 1 : img2Result ? 2 : null
-            // Default select first available image
-          });
-          progressPercent.value = 30 + (i + 1) * progressPerItem;
-        }
-        processingMessage.value = "Saving generated images...";
-        progressPercent.value = 90;
-        if (lessonId.value) {
-          await saveGeneratedImages(String(lessonId.value), newImageItems);
-        }
-        processingMessage.value = "Preparing image review...";
-        progressPercent.value = 95;
-        imageItems.value = newImageItems;
-        currentMode.value = "image-review";
-        progressPercent.value = 100;
-        emitValue();
-      } catch (e) {
-        error.value = e.message || "Image generation failed";
-      } finally {
-        processing.value = false;
-      }
-    }
-    async function applySelectedImages() {
-      if (!lessonId.value) {
-        error.value = "No lesson ID available";
-        return;
-      }
-      const selections = imageItems.value.filter((item) => item.selected && (item.selected === 1 ? item.image1 : item.image2)).map((item) => ({
-        caption: item.placeholder,
-        fileId: item.selected === 1 ? item.image1 : item.image2
-      }));
-      if (selections.length === 0) {
-        error.value = "No images selected. Please select at least one image.";
-        return;
-      }
-      processing.value = true;
-      processingMessage.value = "Fetching current content...";
-      progressPercent.value = 20;
-      try {
-        const currentContent = await fetchLessonContent(String(lessonId.value));
-        if (!currentContent) {
-          error.value = "Could not fetch lesson content. Make sure Description field has content.";
-          processing.value = false;
-          return;
-        }
-        progressPercent.value = 40;
-        processingMessage.value = "Applying selected images to content...";
-        const updatedContent = updateContentWithImages(currentContent, selections);
-        progressPercent.value = 80;
-        const success = await updateLessonContent(String(lessonId.value), updatedContent);
-        if (success) {
-          progressPercent.value = 100;
-          processingMessage.value = "Images applied successfully! Refreshing...";
-          setTimeout(() => {
-            window.location.reload();
-          }, 1e3);
-        } else {
-          error.value = "Failed to update lesson content";
-        }
-      } catch (e) {
-        error.value = e.message || "Failed to apply images";
-      } finally {
-        processing.value = false;
-      }
-    }
-    async function loadSettings() {
-      const [url, admin] = await Promise.all([
-        fetchServiceUrl(),
-        checkIsAdmin()
-      ]);
-      serviceUrl.value = url;
-      isAdmin.value = admin;
-    }
-    async function handleServiceUrlChange(newUrl) {
-      if (newUrl === serviceUrl.value)
-        return;
-      if (!isAdmin.value) {
-        const confirmed = confirm(
-          "Warning: Changing the service URL will affect all users.\n\nAre you sure you want to continue?"
-        );
-        if (!confirmed)
-          return;
-      }
-      savingUrl.value = true;
-      const success = await updateServiceUrl(newUrl);
-      if (success) {
-        serviceUrl.value = newUrl;
-      }
-      savingUrl.value = false;
-    }
-    function handleUrlBlur(event) {
-      const input = event.target;
-      handleServiceUrlChange(input.value.trim());
-    }
-    function handleUrlEnter(event) {
-      const input = event.target;
-      input.blur();
-    }
-    onMounted(() => {
-      initFromValue();
-      loadStyles();
-      loadSettings();
-    });
-    watch(() => props.mode, (newMode) => {
-      if (newMode) {
-        currentMode.value = newMode;
-      }
-    });
-    watch(() => props.value, () => {
-      initFromValue();
-    }, { deep: true });
-    return (_ctx, _cache) => {
-      const _component_v_icon = resolveComponent("v-icon");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createCommentVNode(" Processing State "),
-        processing.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createElementVNode("div", _hoisted_3, [
-            createVNode(_component_v_icon, {
-              name: "refresh",
-              class: "spinning"
-            }),
-            createElementVNode(
-              "span",
-              null,
-              toDisplayString(processingMessage.value),
-              1
-              /* TEXT */
-            )
-          ]),
-          createElementVNode("div", _hoisted_4, [
-            createElementVNode(
-              "div",
-              {
-                class: "widget__progress-fill",
-                style: normalizeStyle({ width: progressPercent.value + "%" })
-              },
-              null,
-              4
-              /* STYLE */
-            )
-          ])
-        ])) : unref(loading) && !styles.value.length ? (openBlock(), createElementBlock(
-          Fragment,
-          { key: 1 },
-          [
-            createCommentVNode(" Loading State "),
-            createElementVNode("div", _hoisted_5, [
-              createVNode(_component_v_icon, { name: "refresh" }),
-              _cache[0] || (_cache[0] = createElementVNode(
-                "span",
-                null,
-                "Loading styles...",
-                -1
-                /* CACHED */
-              ))
-            ])
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : unref(error) ? (openBlock(), createElementBlock(
-          Fragment,
-          { key: 2 },
-          [
-            createCommentVNode(" Error State "),
-            createElementVNode("div", _hoisted_6, [
-              createVNode(_component_v_icon, { name: "error" }),
-              createElementVNode(
-                "span",
-                null,
-                toDisplayString(unref(error)),
-                1
-                /* TEXT */
-              ),
-              createElementVNode("button", {
-                class: "widget__retry",
-                onClick: loadStyles
-              }, "Retry")
-            ])
-          ],
-          2112
-          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-        )) : currentMode.value === "style-select" ? (openBlock(), createElementBlock(
-          Fragment,
-          { key: 3 },
-          [
-            createCommentVNode(" Mode 1: Style Selection "),
-            createElementVNode("div", _hoisted_7, [
-              createElementVNode("div", _hoisted_8, [
-                createElementVNode("div", _hoisted_9, [
-                  createElementVNode("h2", _hoisted_10, [
-                    createVNode(_component_v_icon, { name: "palette" }),
-                    _cache[1] || (_cache[1] = createTextVNode(
-                      " Select Image Style ",
-                      -1
-                      /* CACHED */
-                    ))
-                  ]),
-                  _cache[2] || (_cache[2] = createElementVNode(
-                    "p",
-                    { class: "widget__subtitle" },
-                    " Choose a style for your generated images ",
-                    -1
-                    /* CACHED */
-                  ))
-                ]),
-                createElementVNode("div", _hoisted_11, [
-                  createElementVNode("div", _hoisted_12, [
-                    _cache[3] || (_cache[3] = createElementVNode(
-                      "label",
-                      { class: "widget__url-label" },
-                      "Service URL:",
-                      -1
-                      /* CACHED */
-                    )),
-                    createElementVNode("input", {
-                      type: "text",
-                      class: "widget__url-field",
-                      value: serviceUrl.value,
-                      disabled: savingUrl.value,
-                      onBlur: handleUrlBlur,
-                      onKeydown: withKeys(handleUrlEnter, ["enter"])
-                    }, null, 40, _hoisted_13),
-                    savingUrl.value ? (openBlock(), createElementBlock("span", _hoisted_14, [
-                      createVNode(_component_v_icon, {
-                        name: "refresh",
-                        class: "spinning",
-                        small: ""
-                      })
-                    ])) : createCommentVNode("v-if", true)
-                  ]),
-                  createElementVNode("div", _hoisted_15, [
-                    _cache[4] || (_cache[4] = createElementVNode(
-                      "label",
-                      { class: "widget__model-label" },
-                      "AI Model:",
-                      -1
-                      /* CACHED */
-                    )),
-                    createElementVNode("div", _hoisted_16, [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(unref(IMAGE_MODELS), (model) => {
-                          return openBlock(), createElementBlock("button", {
-                            key: model.id,
-                            class: normalizeClass(["widget__model-btn", { "widget__model-btn--active": selectedModel.value === model.id }]),
-                            onClick: ($event) => selectedModel.value = model.id
-                          }, toDisplayString(model.name), 11, _hoisted_17);
-                        }),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ])
-                  ])
-                ])
-              ])
-            ]),
-            createElementVNode("div", _hoisted_18, [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(styles.value, (style) => {
-                  return openBlock(), createBlock(StyleCard, {
-                    key: style.id,
-                    style: normalizeStyle(style),
-                    "is-selected": selectedStyleId.value === style.id,
-                    loading: regeneratingStyleId.value === style.id,
-                    "radio-group-name": `style-select-${unref(uid)}`,
-                    "get-file-url": unref(getFileUrl),
-                    onSelect: handleStyleSelect,
-                    onEdit: ($event) => openEditModal(style),
-                    onRegenerate: handleStyleRegenerate
-                  }, null, 8, ["style", "is-selected", "loading", "radio-group-name", "get-file-url", "onEdit"]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            styles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_19, [
-              createVNode(_component_v_icon, { name: "palette" }),
-              _cache[5] || (_cache[5] = createElementVNode(
-                "p",
-                null,
-                "No styles available",
-                -1
-                /* CACHED */
-              )),
-              createElementVNode(
-                "span",
-                null,
-                "Add styles to the " + toDisplayString(__props.stylesCollection) + " collection",
-                1
-                /* TEXT */
-              )
-            ])) : createCommentVNode("v-if", true)
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        )) : currentMode.value === "image-review" ? (openBlock(), createElementBlock(
-          Fragment,
-          { key: 4 },
-          [
-            createCommentVNode(" Mode 2: Image Review "),
-            createElementVNode("div", _hoisted_20, [
-              createElementVNode("div", _hoisted_21, [
-                createElementVNode("div", _hoisted_22, [
-                  createElementVNode("h2", _hoisted_23, [
-                    createVNode(_component_v_icon, { name: "photo_library" }),
-                    _cache[6] || (_cache[6] = createTextVNode(
-                      " Review Generated Images ",
-                      -1
-                      /* CACHED */
-                    ))
-                  ]),
-                  _cache[7] || (_cache[7] = createElementVNode(
-                    "p",
-                    { class: "widget__subtitle" },
-                    " Select the best image for each placeholder ",
-                    -1
-                    /* CACHED */
-                  ))
-                ]),
-                createElementVNode("div", _hoisted_24, [
-                  createElementVNode("div", _hoisted_25, [
-                    _cache[8] || (_cache[8] = createElementVNode(
-                      "label",
-                      { class: "widget__url-label" },
-                      "Service URL:",
-                      -1
-                      /* CACHED */
-                    )),
-                    createElementVNode("input", {
-                      type: "text",
-                      class: "widget__url-field",
-                      value: serviceUrl.value,
-                      disabled: savingUrl.value,
-                      onBlur: handleUrlBlur,
-                      onKeydown: withKeys(handleUrlEnter, ["enter"])
-                    }, null, 40, _hoisted_26),
-                    savingUrl.value ? (openBlock(), createElementBlock("span", _hoisted_27, [
-                      createVNode(_component_v_icon, {
-                        name: "refresh",
-                        class: "spinning",
-                        small: ""
-                      })
-                    ])) : createCommentVNode("v-if", true)
-                  ]),
-                  createElementVNode("div", _hoisted_28, [
-                    _cache[9] || (_cache[9] = createElementVNode(
-                      "label",
-                      { class: "widget__model-label" },
-                      "AI Model:",
-                      -1
-                      /* CACHED */
-                    )),
-                    createElementVNode("div", _hoisted_29, [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(unref(IMAGE_MODELS), (model) => {
-                          return openBlock(), createElementBlock("button", {
-                            key: model.id,
-                            class: normalizeClass(["widget__model-btn", { "widget__model-btn--active": selectedModel.value === model.id }]),
-                            onClick: ($event) => selectedModel.value = model.id
-                          }, toDisplayString(model.name), 11, _hoisted_30);
-                        }),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ])
-                  ])
-                ])
-              ])
-            ]),
-            createElementVNode("div", _hoisted_31, [
-              (openBlock(true), createElementBlock(
-                Fragment,
-                null,
-                renderList(imageItems.value, (item) => {
-                  return openBlock(), createBlock(ImageCard, {
-                    key: item.placeholder,
-                    item,
-                    loading: regeneratingPlaceholder.value === item.placeholder,
-                    "get-file-url": unref(getFileUrl),
-                    onSelectImage: handleImageSelect,
-                    onEdit: ($event) => openImageEditModal(item),
-                    onRegenerate: handleImageRegenerate,
-                    onDelete: handleImageDelete
-                  }, null, 8, ["item", "loading", "get-file-url", "onEdit"]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            imageItems.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_32, [
-              createVNode(_component_v_icon, { name: "photo_library" }),
-              _cache[10] || (_cache[10] = createElementVNode(
-                "p",
-                null,
-                "No images to review",
-                -1
-                /* CACHED */
-              )),
-              _cache[11] || (_cache[11] = createElementVNode(
-                "span",
-                null,
-                "Generate images first",
-                -1
-                /* CACHED */
-              ))
-            ])) : createCommentVNode("v-if", true)
-          ],
-          64
-          /* STABLE_FRAGMENT */
-        )) : createCommentVNode("v-if", true),
-        createCommentVNode(" Footer Buttons "),
-        !processing.value ? (openBlock(), createElementBlock("div", _hoisted_33, [
-          createCommentVNode(" Back button always visible in image-review mode "),
-          currentMode.value === "image-review" ? (openBlock(), createElementBlock("button", {
-            key: 0,
-            class: "widget__back",
-            onClick: goBackToStyleSelect
-          }, [
-            createVNode(_component_v_icon, { name: "arrow_back" }),
-            _cache[12] || (_cache[12] = createElementVNode(
-              "span",
-              null,
-              "Back",
-              -1
-              /* CACHED */
-            ))
-          ])) : createCommentVNode("v-if", true),
-          createCommentVNode(" View Images button in style-select mode when styles exist "),
-          currentMode.value === "style-select" && styles.value.length > 0 ? (openBlock(), createElementBlock("button", {
-            key: 1,
-            class: "widget__view-images",
-            onClick: viewGeneratedImages
-          }, [
-            createVNode(_component_v_icon, { name: "photo_library" }),
-            _cache[13] || (_cache[13] = createElementVNode(
-              "span",
-              null,
-              "View Generated Images",
-              -1
-              /* CACHED */
-            ))
-          ])) : createCommentVNode("v-if", true),
-          createElementVNode("button", {
-            class: "widget__confirm",
-            disabled: !isValid.value,
-            onClick: handleConfirm
-          }, [
-            createVNode(_component_v_icon, {
-              name: currentMode.value === "style-select" ? "arrow_forward" : "check"
-            }, null, 8, ["name"]),
-            createElementVNode(
-              "span",
-              null,
-              toDisplayString(confirmButtonText.value),
-              1
-              /* TEXT */
-            )
-          ], 8, _hoisted_34)
-        ])) : createCommentVNode("v-if", true),
-        createCommentVNode(" Edit Modal "),
-        createVNode(EditModal, {
-          "is-open": editModalOpen.value,
-          title: editModalTitle.value,
-          prompt: editModalPrompt.value,
-          saving: savingPrompt.value,
-          placeholder: "Enter prompt text...",
-          onClose: closeEditModal,
-          onSave: handleSavePrompt
-        }, null, 8, ["is-open", "title", "prompt", "saving"])
-      ]);
-    };
-  }
-});
-
-var css = "\n.image-style-widget[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n.widget__loading[data-v-0995de25],\n.widget__error[data-v-0995de25],\n.widget__empty[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__loading v-icon[data-v-0995de25],\n.widget__error v-icon[data-v-0995de25],\n.widget__empty v-icon[data-v-0995de25] {\n  font-size: 32px;\n}\n.widget__error[data-v-0995de25] {\n  color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-0995de25] {\n  padding: 8px 16px;\n  border: 1px solid currentColor;\n  border-radius: 4px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.widget__header[data-v-0995de25] {\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-0995de25] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-0995de25] {\n  flex: 1;\n}\n.widget__header-controls[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: flex-end;\n}\n.widget__url-input[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.widget__url-label[data-v-0995de25] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued, #666);\n  white-space: nowrap;\n}\n.widget__url-field[data-v-0995de25] {\n  width: 240px;\n  padding: 6px 10px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 4px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground, #333);\n  font-size: 12px;\n  font-family: monospace;\n}\n.widget__url-field[data-v-0995de25]:focus {\n  outline: none;\n  border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-0995de25]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.widget__url-saving[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n}\n.widget__model-selector[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: flex-end;\n}\n.widget__model-label[data-v-0995de25] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-0995de25] {\n  display: flex;\n  gap: 4px;\n  background: var(--theme--background-subdued, #f5f5f5);\n  padding: 4px;\n  border-radius: 6px;\n}\n.widget__model-btn[data-v-0995de25] {\n  padding: 6px 12px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--theme--foreground-subdued, #666);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__model-btn[data-v-0995de25]:hover {\n  color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-0995de25] {\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n}\n.widget__model-btn--active[data-v-0995de25]:hover {\n  color: #fff;\n}\n.widget__title[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.widget__subtitle[data-v-0995de25] {\n  margin: 4px 0 0 0;\n  font-size: 13px;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.widget__footer[data-v-0995de25] {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__confirm[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 6px;\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__confirm[data-v-0995de25]:hover:not(:disabled) {\n  background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-0995de25]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__back[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--theme--foreground, #333);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  margin-right: auto;\n}\n.widget__back[data-v-0995de25]:hover {\n  background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  border: 2px solid var(--theme--primary, #6644ff);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--theme--primary, #6644ff);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__view-images[data-v-0995de25]:hover {\n  background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 60px 20px;\n  text-align: center;\n}\n.widget__progress[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--theme--foreground, #333);\n}\n.widget__progress-bar[data-v-0995de25] {\n  width: 100%;\n  max-width: 300px;\n  height: 6px;\n  background: var(--theme--border-color-subdued, #e0e0e0);\n  border-radius: 3px;\n  overflow: hidden;\n}\n.widget__progress-fill[data-v-0995de25] {\n  height: 100%;\n  background: var(--theme--primary, #6644ff);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n.spinning[data-v-0995de25] {\n  animation: spin-0995de25 1s linear infinite;\n}\n@keyframes spin-0995de25 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-0995de25] {\n  margin: 0;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-0995de25] {\n  font-size: 13px;\n}\n";
-n(css,{});
-
-var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0995de25"], ["__file", "interface.vue"]]);
-
-var index = defineInterface({
-  id: "image-style-widget",
-  name: "Image Style Widget",
-  icon: "palette",
-  description: "Visual style selector and image reviewer",
-  component: InterfaceComponent,
-  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 { index as default };
+import{useApi as e,defineInterface as a}from"@directus/extensions-sdk";import{defineComponent as n,computed as t,resolveComponent as l,openBlock as i,createElementBlock as r,normalizeClass as d,createCommentVNode as o,createElementVNode as s,createVNode as c,toDisplayString as u,ref as m,watch as g,nextTick as p,withModifiers as v,createTextVNode as f,withDirectives as _,vModelText as b,createBlock as h,inject as y,onMounted as x,normalizeStyle as w,unref as k,Fragment as S,withKeys as I,renderList as C}from"vue";const $={class:"style-card__images"},F={class:"style-card__image"},z=["src","alt"],P={key:1,class:"style-card__placeholder"},j={class:"style-card__image"},E=["src","alt"],U={key:1,class:"style-card__placeholder"},G={class:"style-card__content"},M={class:"style-card__header"},A={class:"style-card__radio"},L=["checked","name"],N={class:"style-card__name"},R={class:"style-card__prompt"},B={class:"style-card__actions"},T=["disabled"];var V=n({__name:"StyleCard",props:{style:{},isSelected:{type:Boolean},radioGroupName:{},loading:{type:Boolean},getFileUrl:{type:Function}},emits:["select","edit","regenerate"],setup(e){const a=e,n=t(()=>a.style.prompt.length<=100?a.style.prompt:a.style.prompt.substring(0,100)+"...");return(a,t)=>{const m=l("v-icon");return i(),r("div",{class:d(["style-card",{"style-card--selected":e.isSelected}])},[o(" Images Section "),s("div",$,[s("div",F,[e.style.example_1?(i(),r("img",{key:0,src:e.getFileUrl(e.style.example_1),alt:`${e.style.name} example 1`},null,8,z)):(i(),r("div",P,[c(m,{name:"image"})]))]),s("div",j,[e.style.example_2?(i(),r("img",{key:0,src:e.getFileUrl(e.style.example_2),alt:`${e.style.name} example 2`},null,8,E)):(i(),r("div",U,[c(m,{name:"image"})]))])]),o(" Content Section "),s("div",G,[o(" Header: Radio + Name "),s("div",M,[s("label",A,[s("input",{type:"radio",checked:e.isSelected,name:e.radioGroupName,onChange:t[0]||(t[0]=n=>a.$emit("select",e.style.id))},null,40,L),t[4]||(t[4]=s("span",{class:"style-card__radio-custom"},null,-1))]),s("h3",N,u(e.style.name),1)]),o(" Prompt Preview "),s("p",R,u(n.value),1),o(" Actions "),s("div",B,[o(' Hidden for now - set v-if="true" to restore '),o("v-if",!0),s("button",{class:"style-card__btn style-card__btn--secondary",disabled:e.loading,onClick:t[2]||(t[2]=n=>a.$emit("regenerate",e.style))},[c(m,{name:"refresh",small:""}),s("span",null,u(e.loading?"Generating...":"Generate an example"),1)],8,T),s("button",{class:d(["style-card__btn",{"style-card__btn--primary":e.isSelected}]),onClick:t[3]||(t[3]=n=>a.$emit("select",e.style.id))},[c(m,{name:e.isSelected?"radio_button_checked":"radio_button_unchecked",small:""},null,8,["name"]),t[6]||(t[6]=s("span",null,"Select",-1))],2)])])],2)}}}),O=[],D=[];function W(e,a){if(e&&"undefined"!=typeof document){var n,t=!0===a.prepend?"prepend":"append",l=!0===a.singleTag,i="string"==typeof a.container?document.querySelector(a.container):document.getElementsByTagName("head")[0];if(l){var r=O.indexOf(i);-1===r&&(r=O.push(i)-1,D[r]={}),n=D[r]&&D[r][t]?D[r][t]:D[r][t]=d()}else n=d();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function d(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),a.attributes)for(var n=Object.keys(a.attributes),l=0;l<n.length;l++)e.setAttribute(n[l],a.attributes[n[l]]);var r="prepend"===t?"afterbegin":"beforeend";return i.insertAdjacentElement(r,e),e}}W("\n.style-card[data-v-99b31e92] {\n  display: flex;\n  gap: 20px;\n  padding: 16px;\n  border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n  border-radius: 8px;\n  background: var(--theme--background, #fff);\n  transition: all 0.2s ease;\n}\n.style-card[data-v-99b31e92]:hover {\n  border-color: var(--theme--border-color, #ccc);\n}\n.style-card--selected[data-v-99b31e92] {\n  border-color: var(--theme--primary, #6644ff);\n  background: var(--theme--primary-background, #f5f3ff);\n}\n.style-card__images[data-v-99b31e92] {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n.style-card__image[data-v-99b31e92] {\n  width: 80px;\n  height: 80px;\n  border-radius: 6px;\n  overflow: hidden;\n  background: var(--theme--background-subdued, #f5f5f5);\n}\n.style-card__image img[data-v-99b31e92] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.style-card__placeholder[data-v-99b31e92] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--theme--foreground-subdued, #999);\n}\n.style-card__content[data-v-99b31e92] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-width: 0;\n}\n.style-card__header[data-v-99b31e92] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.style-card__radio[data-v-99b31e92] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.style-card__radio input[data-v-99b31e92] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n.style-card__radio-custom[data-v-99b31e92] {\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--theme--border-color, #ccc);\n  border-radius: 50%;\n  transition: all 0.2s ease;\n}\n.style-card__radio input:checked + .style-card__radio-custom[data-v-99b31e92] {\n  border-color: var(--theme--primary, #6644ff);\n  background: var(--theme--primary, #6644ff);\n  box-shadow: inset 0 0 0 3px var(--theme--background, #fff);\n}\n.style-card__name[data-v-99b31e92] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.style-card__prompt[data-v-99b31e92] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--theme--foreground-subdued, #666);\n  line-height: 1.4;\n  flex: 1;\n}\n.style-card__actions[data-v-99b31e92] {\n  display: flex;\n  gap: 8px;\n  margin-top: auto;\n}\n.style-card__btn[data-v-99b31e92] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 4px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground-subdued, #666);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.style-card__btn[data-v-99b31e92]:hover:not(:disabled) {\n  border-color: var(--theme--primary, #6644ff);\n  color: var(--theme--primary, #6644ff);\n}\n.style-card__btn[data-v-99b31e92]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.style-card__btn--primary[data-v-99b31e92] {\n  background: var(--theme--primary, #6644ff);\n  border-color: var(--theme--primary, #6644ff);\n  color: #fff;\n}\n.style-card__btn--primary[data-v-99b31e92]:hover:not(:disabled) {\n  background: var(--theme--primary-accent, #5533ee);\n  border-color: var(--theme--primary-accent, #5533ee);\n  color: #fff;\n}\n.style-card__btn--secondary[data-v-99b31e92] {\n  background: transparent;\n}\n",{});var q=(e,a)=>{const n=e.__vccOpts||e;for(const[e,t]of a)n[e]=t;return n},H=q(V,[["__scopeId","data-v-99b31e92"],["__file","StyleCard.vue"]]);const K={class:"image-card"},J={class:"image-card__header"},Q={class:"image-card__placeholder-text"},X={class:"image-card__body"},Y={class:"image-card__images"},Z=["src"],ee={key:1,class:"image-card__image-placeholder"},ae=["src"],ne={key:1,class:"image-card__image-placeholder"},te={class:"image-card__content"},le={class:"image-card__prompts-section"},ie={class:"image-card__prompt-item"},re={class:"image-card__prompt"},de={class:"image-card__actions"},oe=["disabled"],se=["disabled"],ce=["disabled"],ue={class:"image-card__selection"},me=["src"];var ge=n({__name:"ImageCard",props:{item:{},loading:{type:Boolean},getFileUrl:{type:Function}},emits:["select-image","edit","regenerate","delete"],setup(e){const a=e,n=m(null);function g(e){n.value=function(e){return e?`/assets/${e}`:""}(e)}function p(){n.value=null}const v=t(()=>a.item.prompt1.length<=120?a.item.prompt1:a.item.prompt1.substring(0,120)+"...");return(a,t)=>{const m=l("v-icon");return i(),r("div",K,[o(" Placeholder Header "),s("div",J,[c(m,{name:"image"}),s("span",Q,u(e.item.placeholder),1)]),s("div",X,[o(" Images Section "),s("div",Y,[s("div",{class:d(["image-card__image",{"image-card__image--selected":1===e.item.selected}]),onClick:t[0]||(t[0]=a=>e.item.image1&&g(e.item.image1))},[e.item.image1?(i(),r("img",{key:0,src:e.getFileUrl(e.item.image1),alt:"Generated image 1"},null,8,Z)):(i(),r("div",ee,[c(m,{name:"image"})])),t[7]||(t[7]=s("div",{class:"image-card__image-badge"},"1",-1))],2),s("div",{class:d(["image-card__image",{"image-card__image--selected":2===e.item.selected}]),onClick:t[1]||(t[1]=a=>e.item.image2&&g(e.item.image2))},[e.item.image2?(i(),r("img",{key:0,src:e.getFileUrl(e.item.image2),alt:"Generated image 2"},null,8,ae)):(i(),r("div",ne,[c(m,{name:"image"})])),t[8]||(t[8]=s("div",{class:"image-card__image-badge"},"2",-1))],2)]),o(" Content Section "),s("div",te,[o(" Prompt Display "),s("div",le,[s("div",ie,[t[9]||(t[9]=s("span",{class:"image-card__prompt-label"},"Prompt:",-1)),s("p",re,u(v.value),1)])]),o(" Actions "),s("div",de,[s("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[2]||(t[2]=n=>a.$emit("edit",e.item))},[c(m,{name:"edit",small:""}),t[10]||(t[10]=s("span",null,"Edit Prompt",-1))],8,oe),s("button",{class:"image-card__btn image-card__btn--secondary",disabled:e.loading,onClick:t[3]||(t[3]=n=>a.$emit("regenerate",e.item))},[c(m,{name:"refresh",small:""}),s("span",null,u(e.loading?"Generating...":"Regenerate"),1)],8,se),s("button",{class:"image-card__btn image-card__btn--danger",disabled:e.loading,onClick:t[4]||(t[4]=n=>a.$emit("delete",e.item))},[c(m,{name:"delete",small:""}),t[11]||(t[11]=s("span",null,"Delete",-1))],8,ce)]),o(" Selection Buttons "),s("div",ue,[s("button",{class:d(["image-card__select-btn",{"image-card__select-btn--active":1===e.item.selected}]),onClick:t[5]||(t[5]=n=>a.$emit("select-image",e.item.placeholder,1))},[c(m,{name:1===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[12]||(t[12]=s("span",null,"Select 1",-1))],2),s("button",{class:d(["image-card__select-btn",{"image-card__select-btn--active":2===e.item.selected}]),onClick:t[6]||(t[6]=n=>a.$emit("select-image",e.item.placeholder,2))},[c(m,{name:2===e.item.selected?"check_box":"check_box_outline_blank",small:""},null,8,["name"]),t[13]||(t[13]=s("span",null,"Select 2",-1))],2)])])]),o(" Lightbox Modal "),n.value?(i(),r("div",{key:0,class:"image-card__lightbox",onClick:p},[s("img",{src:n.value,alt:"Enlarged image"},null,8,me)])):o("v-if",!0)])}}});W("\n.image-card[data-v-20b0594f] {\n  border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n  border-radius: 8px;\n  background: var(--theme--background, #fff);\n  overflow: hidden;\n}\n.image-card__header[data-v-20b0594f] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 16px;\n  background: var(--theme--background-subdued, #f5f5f5);\n  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.image-card__placeholder-text[data-v-20b0594f] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.image-card__body[data-v-20b0594f] {\n  display: flex;\n  gap: 20px;\n  padding: 16px;\n}\n.image-card__images[data-v-20b0594f] {\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n.image-card__image[data-v-20b0594f] {\n  position: relative;\n  width: 100px;\n  height: 100px;\n  border-radius: 6px;\n  overflow: hidden;\n  background: var(--theme--background-subdued, #f5f5f5);\n  border: 3px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.image-card__image[data-v-20b0594f]:hover {\n  border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__image--selected[data-v-20b0594f] {\n  border-color: var(--theme--primary, #6644ff);\n}\n.image-card__image img[data-v-20b0594f] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.image-card__image-placeholder[data-v-20b0594f] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--theme--foreground-subdued, #999);\n}\n.image-card__image-badge[data-v-20b0594f] {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: rgba(0, 0, 0, 0.6);\n  color: #fff;\n  font-size: 11px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.image-card__image--selected .image-card__image-badge[data-v-20b0594f] {\n  background: var(--theme--primary, #6644ff);\n}\n.image-card__content[data-v-20b0594f] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n}\n.image-card__prompts-section[data-v-20b0594f] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.image-card__prompt-item[data-v-20b0594f] {\n  padding: 8px;\n  background: var(--theme--background-subdued, #f9f9f9);\n  border-radius: 4px;\n}\n.image-card__prompt-label[data-v-20b0594f] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--theme--foreground-subdued, #666);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n.image-card__prompt[data-v-20b0594f] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: var(--theme--foreground, #333);\n  line-height: 1.4;\n}\n.image-card__actions[data-v-20b0594f] {\n  display: flex;\n  gap: 8px;\n}\n.image-card__btn[data-v-20b0594f] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 4px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground-subdued, #666);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.image-card__btn[data-v-20b0594f]:hover:not(:disabled) {\n  border-color: var(--theme--primary, #6644ff);\n  color: var(--theme--primary, #6644ff);\n}\n.image-card__btn[data-v-20b0594f]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.image-card__btn--secondary[data-v-20b0594f] {\n  background: transparent;\n}\n.image-card__btn--danger[data-v-20b0594f] {\n  background: transparent;\n  border-color: var(--theme--danger, #f44336);\n  color: var(--theme--danger, #f44336);\n}\n.image-card__btn--danger[data-v-20b0594f]:hover:not(:disabled) {\n  background: var(--theme--danger-background, #ffebee);\n  border-color: var(--theme--danger, #f44336);\n  color: var(--theme--danger, #f44336);\n}\n.image-card__selection[data-v-20b0594f] {\n  display: flex;\n  gap: 8px;\n}\n.image-card__select-btn[data-v-20b0594f] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  border: 2px solid var(--theme--border-color, #ccc);\n  border-radius: 6px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground-subdued, #666);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.image-card__select-btn[data-v-20b0594f]:hover {\n  border-color: var(--theme--primary-subdued, #c4b8ff);\n}\n.image-card__select-btn--active[data-v-20b0594f] {\n  border-color: var(--theme--primary, #6644ff);\n  background: var(--theme--primary-background, #f5f3ff);\n  color: var(--theme--primary, #6644ff);\n}\n\n/* Lightbox Modal */\n.image-card__lightbox[data-v-20b0594f] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.85);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  cursor: zoom-out;\n  padding: 40px;\n}\n.image-card__lightbox img[data-v-20b0594f] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: 8px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n}\n",{});var pe=q(ge,[["__scopeId","data-v-20b0594f"],["__file","ImageCard.vue"]]);const ve={class:"edit-modal"},fe={class:"edit-modal__header"},_e={class:"edit-modal__title"},be={class:"edit-modal__body"},he={class:"edit-modal__label"},ye=["placeholder"],xe={class:"edit-modal__footer"},we=["disabled"];var ke=n({__name:"EditModal",props:{isOpen:{type:Boolean},title:{},prompt:{},placeholder:{},saving:{type:Boolean}},emits:["close","save"],setup(e,{emit:a}){const n=e,d=a,y=m(n.prompt),x=m(null),w=t(()=>y.value!==n.prompt);function k(){w.value&&d("save",y.value)}return g(()=>n.prompt,e=>{y.value=e}),g(()=>n.isOpen,async e=>{e&&(y.value=n.prompt,await p(),x.value?.focus(),x.value?.select())}),(a,n)=>{const t=l("v-icon");return e.isOpen?(i(),r("div",{key:0,class:"edit-modal__overlay",onClick:n[3]||(n[3]=v(e=>a.$emit("close"),["self"]))},[s("div",ve,[s("div",fe,[s("h3",_e,[c(t,{name:"edit"}),n[4]||(n[4]=f(" Edit Prompt ",-1))]),s("button",{class:"edit-modal__close",onClick:n[0]||(n[0]=e=>a.$emit("close"))},[c(t,{name:"close"})])]),s("div",be,[s("label",he,u(e.title),1),_(s("textarea",{ref_key:"textareaRef",ref:x,"onUpdate:modelValue":n[1]||(n[1]=e=>y.value=e),class:"edit-modal__textarea",rows:"6",placeholder:e.placeholder},null,8,ye),[[b,y.value]]),n[5]||(n[5]=s("p",{class:"edit-modal__hint"}," Edit the prompt text and click Save to apply changes. ",-1))]),s("div",xe,[s("button",{class:"edit-modal__btn edit-modal__btn--secondary",onClick:n[2]||(n[2]=e=>a.$emit("close"))}," Cancel "),s("button",{class:"edit-modal__btn edit-modal__btn--primary",disabled:!w.value||e.saving,onClick:k},[e.saving?(i(),h(t,{key:0,name:"refresh",small:""})):o("v-if",!0),s("span",null,u(e.saving?"Saving...":"Save"),1)],8,we)])])])):o("v-if",!0)}}});W("\n.edit-modal__overlay[data-v-44d552bc] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 20px;\n}\n.edit-modal[data-v-44d552bc] {\n  width: 100%;\n  max-width: 600px;\n  background: var(--theme--background, #fff);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n  overflow: hidden;\n}\n.edit-modal__header[data-v-44d552bc] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.edit-modal__title[data-v-44d552bc] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.edit-modal__close[data-v-44d552bc] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--theme--foreground-subdued, #666);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.edit-modal__close[data-v-44d552bc]:hover {\n  background: var(--theme--background-subdued, #f5f5f5);\n  color: var(--theme--foreground, #333);\n}\n.edit-modal__body[data-v-44d552bc] {\n  padding: 20px;\n}\n.edit-modal__label[data-v-44d552bc] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.edit-modal__textarea[data-v-44d552bc] {\n  width: 100%;\n  padding: 12px;\n  border: 2px solid var(--theme--border-color-subdued, #e0e0e0);\n  border-radius: 6px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground, #333);\n  font-size: 14px;\n  font-family: inherit;\n  line-height: 1.5;\n  resize: vertical;\n  transition: border-color 0.2s ease;\n}\n.edit-modal__textarea[data-v-44d552bc]:focus {\n  outline: none;\n  border-color: var(--theme--primary, #6644ff);\n}\n.edit-modal__textarea[data-v-44d552bc]::placeholder {\n  color: var(--theme--foreground-subdued, #999);\n}\n.edit-modal__hint[data-v-44d552bc] {\n  margin: 8px 0 0 0;\n  font-size: 12px;\n  color: var(--theme--foreground-subdued, #666);\n}\n.edit-modal__footer[data-v-44d552bc] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n  background: var(--theme--background-subdued, #f9f9f9);\n}\n.edit-modal__btn[data-v-44d552bc] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 20px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.edit-modal__btn[data-v-44d552bc]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.edit-modal__btn--secondary[data-v-44d552bc] {\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground-subdued, #666);\n  border: 1px solid var(--theme--border-color, #ccc);\n}\n.edit-modal__btn--secondary[data-v-44d552bc]:hover:not(:disabled) {\n  background: var(--theme--background-subdued, #f5f5f5);\n}\n.edit-modal__btn--primary[data-v-44d552bc] {\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n}\n.edit-modal__btn--primary[data-v-44d552bc]:hover:not(:disabled) {\n  background: var(--theme--primary-accent, #5533ee);\n}\n",{});var Se=q(ke,[["__scopeId","data-v-44d552bc"],["__file","EditModal.vue"]]);const Ie=[{id:"flux-kontext-pro",name:"Flux"},{id:"gemini-2.5-flash-image",name:"Nano Banana"}],Ce="http://localhost:8004";const $e={class:"image-style-widget"},Fe={key:0,class:"widget__processing"},ze={class:"widget__progress"},Pe={class:"widget__progress-bar"},je={class:"widget__loading"},Ee={class:"widget__error"},Ue={class:"widget__header"},Ge={class:"widget__header-row"},Me={class:"widget__header-text"},Ae={class:"widget__title"},Le={class:"widget__header-controls"},Ne={class:"widget__url-input"},Re=["value","disabled"],Be={key:0,class:"widget__url-saving"},Te={class:"widget__model-selector"},Ve={class:"widget__model-buttons"},Oe=["onClick"],De={class:"widget__list"},We={key:0,class:"widget__empty"},qe={class:"widget__header"},He={class:"widget__header-row"},Ke={class:"widget__header-text"},Je={class:"widget__title"},Qe={class:"widget__header-controls"},Xe={class:"widget__url-input"},Ye=["value","disabled"],Ze={key:0,class:"widget__url-saving"},ea={class:"widget__model-selector"},aa={class:"widget__model-buttons"},na=["onClick"],ta={class:"widget__list"},la={key:0,class:"widget__empty"},ia={key:5,class:"widget__footer"},ra=["disabled"];var da=n({__name:"interface",props:{value:{},mode:{default:"style-select"},stylesCollection:{default:"ImageStyles"},primaryKey:{},collection:{}},emits:["input"],setup(a,{emit:n}){const p=Math.random().toString(36).substring(2,9),v=a,_=n,b=y("values");function $(){return b?void 0!==b.value?b.value:b:{}}const F=t(()=>{const e=$();return v.primaryKey||e?.id||null}),z=t(()=>{const e=$();return e?.description||e?.Description||""}),{loading:P,error:j,fetchServiceUrl:E,updateServiceUrl:U,checkIsAdmin:G,fetchStyles:M,updateStylePrompt:A,regenerateStyleExamples:L,regeneratePlaceholderImages:N,getFileUrl:R,extractPlaceholders:B,generateImagePrompts:T,generateSingleImage:V,updateContentWithImages:O,updateLessonContent:D,fetchLessonContent:W,getImageVariants:q,saveGeneratedImages:K,deleteImageVariant:J}=function(){const a=e(),n=m(!1),t=m(null);async function l(e,a="flux-kontext-pro",n=Ce){const t=`${n}/api/misc/images/upload`,l=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({prompt:e,model:a,format:"png",aspect_ratio:"16:9"})});if(!l.ok)throw new Error(`Image generation failed: ${l.status}`);const i=await l.json();return i?.id||null}return{loading:n,error:t,fetchServiceUrl:async function(){try{const e=await a.get("/items/WidgetConfig");return e.data.data?.service_url||Ce}catch(e){return console.warn("Failed to fetch service URL, using default:",e.message),Ce}},updateServiceUrl:async function(e){try{return await a.patch("/items/WidgetConfig",{service_url:e}),!0}catch(e){return t.value=e.message||"Failed to update service URL",!1}},checkIsAdmin:async function(){try{const e=await a.get("/users/me",{params:{fields:["role.admin_access"]}});return!0===e.data.data?.role?.admin_access}catch(e){return console.warn("Failed to check admin status:",e.message),!1}},fetchStyles:async function(e="ImageStyles"){n.value=!0,t.value=null;try{return(await a.get(`/items/${e}`,{params:{filter:{is_active:{_eq:!0}},sort:["sort"],fields:["id","name","prompt","example_1","example_2","is_active","sort"]}})).data.data||[]}catch(e){return t.value=e.message||"Failed to fetch styles",[]}finally{n.value=!1}},updateStylePrompt:async function(e,l,i){n.value=!0,t.value=null;try{return await a.patch(`/items/${e}/${l}`,{prompt:i}),!0}catch(e){return t.value=e.message||"Failed to update prompt",!1}finally{n.value=!1}},regenerateStyleExamples:async function(e,i,r="ImageStyles",d="flux-kontext-pro",o=Ce){n.value=!0,t.value=null;try{const[n,s]=await Promise.all([l(i,d,o),l(i,d,o)]);return n&&s?(await a.patch(`/items/${r}/${e}`,{example_1:n,example_2:s}),{example_1:n,example_2:s}):(t.value="Failed to generate images",null)}catch(e){return t.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},regeneratePlaceholderImages:async function(e,a,i="flux-kontext-pro",r=Ce){n.value=!0,t.value=null;try{const[n,d]=await Promise.all([l(e,i,r),l(a,i,r)]);return n&&d?{image1:n,image2:d}:(t.value="Failed to generate images",null)}catch(e){return t.value=e.message||"Failed to regenerate images",null}finally{n.value=!1}},getFileUrl:function(e){return e?`/assets/${e}?width=200&height=200&fit=cover`:""},generateImagePrompts:async function(e,a,l=Ce){n.value=!0,t.value=null;try{const n=`${l}/api/misc/prompts`,t=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({style:e,description:a,model:"gpt-4o-mini"})});if(!t.ok){const e=await t.json().catch(()=>({detail:t.statusText}));throw new Error(e.detail||`HTTP ${t.status}`)}return await t.json()}catch(e){return t.value=e.message||"Failed to generate image prompts",null}finally{n.value=!1}},getImageVariants:async function(e){n.value=!0,t.value=null;try{return(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e}},fields:["id","title","status","lesson","images.id","images.image","images.prompt","images.status"]}})).data.data||[]}catch(e){return t.value=e.message||"Failed to fetch image variants",[]}finally{n.value=!1}},saveGeneratedImages:async function(e,l){n.value=!0,t.value=null;try{for(const n of l){const t=(await a.post("/items/ImageVariants",{title:n.placeholder,lesson:e,status:"found"})).data.data.id,l=[];n.image1&&l.push({image:n.image1,prompt:n.prompt1,variants:t,status:"generated"}),n.image2&&l.push({image:n.image2,prompt:n.prompt2,variants:t,status:"generated"}),l.length>0&&await a.post("/items/ContentImage",l)}return!0}catch(e){return t.value=e.message||"Failed to save generated images",!1}finally{n.value=!1}},deleteImageVariant:async function(e,l){n.value=!0,t.value=null;try{const n=(await a.get("/items/ImageVariants",{params:{filter:{lesson:{_eq:e},title:{_eq:l}},fields:["id","images.id","images.image"]}})).data.data||[];for(const e of n){const n=[];if(e.images&&e.images.length>0)for(const t of e.images)t.image&&n.push(t.image),await a.delete(`/items/ContentImage/${t.id}`);await a.delete(`/items/ImageVariants/${e.id}`);for(const e of n)try{await a.delete(`/files/${e}`)}catch(a){console.warn(`Failed to delete file ${e}:`,a.message)}}return!0}catch(e){return t.value=e.message||"Failed to delete image variant",!1}finally{n.value=!1}},extractPlaceholders:function(e){const a=/\[([^\]]+)\]/g,n=[];let t;for(;null!==(t=a.exec(e));)n.push(t[1]);return n},generateSingleImage:l,updateContentWithImages:function(e,a){let n=e;for(const{caption:e,fileId:t}of a){const a=`[${e}]`,l=`<img src="/assets/${t}" alt="${e}" />`;n=n.replace(a,l)}return n},updateLessonContent:async function(e,l){n.value=!0,t.value=null;try{return await a.patch(`/items/SM_Lessons/${e}`,{description:l}),!0}catch(e){return t.value=e.message||"Failed to update lesson content",!1}finally{n.value=!1}},fetchLessonContent:async function(e){try{const n=await a.get(`/items/SM_Lessons/${e}`,{params:{fields:["description"]}});return n.data.data?.description||n.data.data?.Description||null}catch(e){return console.error("Failed to fetch lesson content:",e),null}}}}(),Q=m(v.mode),X=m([]),Y=m(null),Z=m(null),ee=m("flux-kontext-pro"),ae=m("http://localhost:8004"),ne=m(!1),te=m(!1),le=m([]),ie=m(null),re=m(!1),de=m(""),oe=m(0),se=m(!1),ce=m(""),ue=m(""),me=m(null),ge=m(null),ve=m(!1);t(()=>"style-select"===Q.value?X.value.length>0:le.value.length>0);const fe=t(()=>"style-select"===Q.value?null!==Y.value:le.value.every(e=>e.selected)),_e=t(()=>"style-select"===Q.value?"Generate Images":"Confirm Selections");function be(){v.value&&"object"==typeof v.value&&(v.value.selectedStyleId&&(Y.value=v.value.selectedStyleId),v.value.items&&v.value.items.length>0&&(le.value=v.value.items,Q.value="image-review"),v.value.currentMode&&(Q.value=v.value.currentMode))}async function he(){X.value=await M(v.stylesCollection),!Y.value&&X.value.length>0&&(Y.value=X.value[0].id)}function ye(){Q.value="style-select",ma()}async function xe(){if(F.value){re.value=!0,de.value="Loading existing images...",oe.value=10;try{const e=await q(String(F.value));if(oe.value=50,!e||0===e.length)return j.value="No generated images found for this lesson. Generate images first.",void(re.value=!1);const a=e.map(e=>{const a=e.images||[],n=a[0],t=a[1];return{placeholder:e.title||"Untitled",prompt1:n?.prompt||"",prompt2:t?.prompt||n?.prompt||"",image1:n?.image||null,image2:t?.image||null,selected:n?.image?1:t?.image?2:null}});oe.value=90,le.value=a,Q.value="image-review",oe.value=100,ma()}catch(e){j.value=e.message||"Failed to load existing images"}finally{re.value=!1}}}function we(e){Y.value=e,ma()}async function ke(e){Z.value=e.id;const a=await L(e.id,e.prompt,v.stylesCollection,ee.value,ae.value);if(a){const n=X.value.findIndex(a=>a.id===e.id);n>=0&&(X.value[n]={...X.value[n],example_1:a.example_1,example_2:a.example_2})}Z.value=null}function da(e,a){const n=le.value.find(a=>a.placeholder===e);n&&(n.selected=a,ma())}async function oa(e){ie.value=e.placeholder;const a=await N(e.prompt1,e.prompt2,ee.value,ae.value);if(a){const n=le.value.findIndex(a=>a.placeholder===e.placeholder);n>=0&&(le.value[n]={...le.value[n],image1:a.image1,image2:a.image2,selected:1},ma())}ie.value=null}async function sa(e){if(!F.value)return;if(!confirm(`Delete "${e.placeholder}" and its images? This cannot be undone.`))return;ie.value=e.placeholder;if(await J(String(F.value),e.placeholder)){const a=le.value.findIndex(a=>a.placeholder===e.placeholder);a>=0&&(le.value.splice(a,1),ma())}ie.value=null}function ca(){se.value=!1,me.value=null,ge.value=null}async function ua(e){if(ve.value=!0,me.value){if(await A(v.stylesCollection,me.value.id,e)){const a=X.value.findIndex(e=>e.id===me.value.id);a>=0&&(X.value[a]={...X.value[a],prompt:e}),ca()}}else if(ge.value){const a=le.value.findIndex(e=>e.placeholder===ge.value.placeholder);a>=0&&(le.value[a]={...le.value[a],prompt1:e},ma(),ca())}ve.value=!1}function ma(){_("input",{currentMode:Q.value,selectedStyleId:Y.value,selectedStyle:X.value.find(e=>e.id===Y.value)||null,items:le.value})}async function ga(){fe.value&&("style-select"===Q.value?await async function(){const e=X.value.find(e=>e.id===Y.value);if(!e)return void(j.value="No style selected. Please select an image style first.");if(!z.value)return void(j.value="No content available in the Description field. Add text with [image placeholders] first.");re.value=!0,oe.value=0;try{de.value="Generating image prompts with AI...",oe.value=10;const a=await T(e.prompt,z.value,ae.value);if(!a||!a.images||0===a.images.length)return j.value="No [image placeholders] found in content. Add placeholders like [Rabbit image] to generate images.",void(re.value=!1);oe.value=30,de.value=`Generating images for ${a.images.length} placeholder(s)...`;const n=[],t=60/a.images.length;for(let l=0;l<a.images.length;l++){const i=a.images[l];de.value=`Generating images for "${i.placeholder}"... (${l+1}/${a.images.length})`;const r=i.prompts[0]||`${e.prompt}. Subject: ${i.placeholder}`,d=i.prompts[1]||r,[o,s]=await Promise.all([V(r,ee.value,ae.value),V(d,ee.value,ae.value)]);n.push({placeholder:i.placeholder,prompt1:r,prompt2:d,image1:o,image2:s,selected:o?1:s?2:null}),oe.value=30+(l+1)*t}de.value="Saving generated images...",oe.value=90,F.value&&await K(String(F.value),n),de.value="Preparing image review...",oe.value=95,le.value=n,Q.value="image-review",oe.value=100,ma()}catch(e){j.value=e.message||"Image generation failed"}finally{re.value=!1}}():await async function(){if(!F.value)return void(j.value="No lesson ID available");const e=le.value.filter(e=>e.selected&&(1===e.selected?e.image1:e.image2)).map(e=>({caption:e.placeholder,fileId:1===e.selected?e.image1:e.image2}));if(0===e.length)return void(j.value="No images selected. Please select at least one image.");re.value=!0,de.value="Fetching current content...",oe.value=20;try{const a=await W(String(F.value));if(!a)return j.value="Could not fetch lesson content. Make sure Description field has content.",void(re.value=!1);oe.value=40,de.value="Applying selected images to content...";const n=O(a,e);oe.value=80;await D(String(F.value),n)?(oe.value=100,de.value="Images applied successfully! Refreshing...",setTimeout(()=>{window.location.reload()},1e3)):j.value="Failed to update lesson content"}catch(e){j.value=e.message||"Failed to apply images"}finally{re.value=!1}}())}function pa(e){!async function(e){if(e===ae.value)return;if(!ne.value&&!confirm("Warning: Changing the service URL will affect all users.\n\nAre you sure you want to continue?"))return;te.value=!0,await U(e)&&(ae.value=e),te.value=!1}(e.target.value.trim())}function va(e){e.target.blur()}return x(()=>{be(),he(),async function(){const[e,a]=await Promise.all([E(),G()]);ae.value=e,ne.value=a}()}),g(()=>v.mode,e=>{e&&(Q.value=e)}),g(()=>v.value,()=>{be()},{deep:!0}),(e,n)=>{const t=l("v-icon");return i(),r("div",$e,[o(" Processing State "),re.value?(i(),r("div",Fe,[s("div",ze,[c(t,{name:"refresh",class:"spinning"}),s("span",null,u(de.value),1)]),s("div",Pe,[s("div",{class:"widget__progress-fill",style:w({width:oe.value+"%"})},null,4)])])):k(P)&&!X.value.length?(i(),r(S,{key:1},[o(" Loading State "),s("div",je,[c(t,{name:"refresh"}),n[0]||(n[0]=s("span",null,"Loading styles...",-1))])],2112)):k(j)?(i(),r(S,{key:2},[o(" Error State "),s("div",Ee,[c(t,{name:"error"}),s("span",null,u(k(j)),1),s("button",{class:"widget__retry",onClick:he},"Retry")])],2112)):"style-select"===Q.value?(i(),r(S,{key:3},[o(" Mode 1: Style Selection "),s("div",Ue,[s("div",Ge,[s("div",Me,[s("h2",Ae,[c(t,{name:"palette"}),n[1]||(n[1]=f(" Select Image Style ",-1))]),n[2]||(n[2]=s("p",{class:"widget__subtitle"}," Choose a style for your generated images ",-1))]),s("div",Le,[s("div",Ne,[n[3]||(n[3]=s("label",{class:"widget__url-label"},"Service URL:",-1)),s("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:I(va,["enter"])},null,40,Re),te.value?(i(),r("span",Be,[c(t,{name:"refresh",class:"spinning",small:""})])):o("v-if",!0)]),s("div",Te,[n[4]||(n[4]=s("label",{class:"widget__model-label"},"AI Model:",-1)),s("div",Ve,[(i(!0),r(S,null,C(k(Ie),e=>(i(),r("button",{key:e.id,class:d(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},u(e.name),11,Oe))),128))])])])])]),s("div",De,[(i(!0),r(S,null,C(X.value,e=>(i(),h(H,{key:e.id,style:w(e),"is-selected":Y.value===e.id,loading:Z.value===e.id,"radio-group-name":`style-select-${k(p)}`,"get-file-url":k(R),onSelect:we,onEdit:a=>function(e){me.value=e,ge.value=null,ce.value=`Style: ${e.name}`,ue.value=e.prompt,se.value=!0}(e),onRegenerate:ke},null,8,["style","is-selected","loading","radio-group-name","get-file-url","onEdit"]))),128))]),0===X.value.length?(i(),r("div",We,[c(t,{name:"palette"}),n[5]||(n[5]=s("p",null,"No styles available",-1)),s("span",null,"Add styles to the "+u(a.stylesCollection)+" collection",1)])):o("v-if",!0)],64)):"image-review"===Q.value?(i(),r(S,{key:4},[o(" Mode 2: Image Review "),s("div",qe,[s("div",He,[s("div",Ke,[s("h2",Je,[c(t,{name:"photo_library"}),n[6]||(n[6]=f(" Review Generated Images ",-1))]),n[7]||(n[7]=s("p",{class:"widget__subtitle"}," Select the best image for each placeholder ",-1))]),s("div",Qe,[s("div",Xe,[n[8]||(n[8]=s("label",{class:"widget__url-label"},"Service URL:",-1)),s("input",{type:"text",class:"widget__url-field",value:ae.value,disabled:te.value,onBlur:pa,onKeydown:I(va,["enter"])},null,40,Ye),te.value?(i(),r("span",Ze,[c(t,{name:"refresh",class:"spinning",small:""})])):o("v-if",!0)]),s("div",ea,[n[9]||(n[9]=s("label",{class:"widget__model-label"},"AI Model:",-1)),s("div",aa,[(i(!0),r(S,null,C(k(Ie),e=>(i(),r("button",{key:e.id,class:d(["widget__model-btn",{"widget__model-btn--active":ee.value===e.id}]),onClick:a=>ee.value=e.id},u(e.name),11,na))),128))])])])])]),s("div",ta,[(i(!0),r(S,null,C(le.value,e=>(i(),h(pe,{key:e.placeholder,item:e,loading:ie.value===e.placeholder,"get-file-url":k(R),onSelectImage:da,onEdit:a=>function(e){me.value=null,ge.value=e,ce.value=`Image: ${e.placeholder}`,ue.value=e.prompt1,se.value=!0}(e),onRegenerate:oa,onDelete:sa},null,8,["item","loading","get-file-url","onEdit"]))),128))]),0===le.value.length?(i(),r("div",la,[c(t,{name:"photo_library"}),n[10]||(n[10]=s("p",null,"No images to review",-1)),n[11]||(n[11]=s("span",null,"Generate images first",-1))])):o("v-if",!0)],64)):o("v-if",!0),o(" Footer Buttons "),re.value?o("v-if",!0):(i(),r("div",ia,[o(" Back button always visible in image-review mode "),"image-review"===Q.value?(i(),r("button",{key:0,class:"widget__back",onClick:ye},[c(t,{name:"arrow_back"}),n[12]||(n[12]=s("span",null,"Back",-1))])):o("v-if",!0),o(" View Images button in style-select mode when styles exist "),"style-select"===Q.value&&X.value.length>0?(i(),r("button",{key:1,class:"widget__view-images",onClick:xe},[c(t,{name:"photo_library"}),n[13]||(n[13]=s("span",null,"View Generated Images",-1))])):o("v-if",!0),s("button",{class:"widget__confirm",disabled:!fe.value,onClick:ga},[c(t,{name:"style-select"===Q.value?"arrow_forward":"check"},null,8,["name"]),s("span",null,u(_e.value),1)],8,ra)])),o(" Edit Modal "),c(Se,{"is-open":se.value,title:ce.value,prompt:ue.value,saving:ve.value,placeholder:"Enter prompt text...",onClose:ca,onSave:ua},null,8,["is-open","title","prompt","saving"])])}}});W("\n.image-style-widget[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n.widget__loading[data-v-0995de25],\n.widget__error[data-v-0995de25],\n.widget__empty[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  text-align: center;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__loading v-icon[data-v-0995de25],\n.widget__error v-icon[data-v-0995de25],\n.widget__empty v-icon[data-v-0995de25] {\n  font-size: 32px;\n}\n.widget__error[data-v-0995de25] {\n  color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-0995de25] {\n  padding: 8px 16px;\n  border: 1px solid currentColor;\n  border-radius: 4px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n}\n.widget__header[data-v-0995de25] {\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-0995de25] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-0995de25] {\n  flex: 1;\n}\n.widget__header-controls[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: flex-end;\n}\n.widget__url-input[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.widget__url-label[data-v-0995de25] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued, #666);\n  white-space: nowrap;\n}\n.widget__url-field[data-v-0995de25] {\n  width: 240px;\n  padding: 6px 10px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 4px;\n  background: var(--theme--background, #fff);\n  color: var(--theme--foreground, #333);\n  font-size: 12px;\n  font-family: monospace;\n}\n.widget__url-field[data-v-0995de25]:focus {\n  outline: none;\n  border-color: var(--theme--primary, #6644ff);\n}\n.widget__url-field[data-v-0995de25]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.widget__url-saving[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n}\n.widget__model-selector[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: flex-end;\n}\n.widget__model-label[data-v-0995de25] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-0995de25] {\n  display: flex;\n  gap: 4px;\n  background: var(--theme--background-subdued, #f5f5f5);\n  padding: 4px;\n  border-radius: 6px;\n}\n.widget__model-btn[data-v-0995de25] {\n  padding: 6px 12px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--theme--foreground-subdued, #666);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__model-btn[data-v-0995de25]:hover {\n  color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-0995de25] {\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n}\n.widget__model-btn--active[data-v-0995de25]:hover {\n  color: #fff;\n}\n.widget__title[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.widget__subtitle[data-v-0995de25] {\n  margin: 4px 0 0 0;\n  font-size: 13px;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.widget__footer[data-v-0995de25] {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 16px;\n  border-top: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__confirm[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: none;\n  border-radius: 6px;\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__confirm[data-v-0995de25]:hover:not(:disabled) {\n  background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-0995de25]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__back[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 24px;\n  border: 1px solid var(--theme--border-color, #ccc);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--theme--foreground, #333);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  margin-right: auto;\n}\n.widget__back[data-v-0995de25]:hover {\n  background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-0995de25] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 20px;\n  border: 2px solid var(--theme--primary, #6644ff);\n  border-radius: 6px;\n  background: transparent;\n  color: var(--theme--primary, #6644ff);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n.widget__view-images[data-v-0995de25]:hover {\n  background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-0995de25] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  padding: 60px 20px;\n  text-align: center;\n}\n.widget__progress[data-v-0995de25] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--theme--foreground, #333);\n}\n.widget__progress-bar[data-v-0995de25] {\n  width: 100%;\n  max-width: 300px;\n  height: 6px;\n  background: var(--theme--border-color-subdued, #e0e0e0);\n  border-radius: 3px;\n  overflow: hidden;\n}\n.widget__progress-fill[data-v-0995de25] {\n  height: 100%;\n  background: var(--theme--primary, #6644ff);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n.spinning[data-v-0995de25] {\n  animation: spin-0995de25 1s linear infinite;\n}\n@keyframes spin-0995de25 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-0995de25] {\n  margin: 0;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-0995de25] {\n  font-size: 13px;\n}\n",{});var oa=a({id:"image-style-widget",name:"Image Style Widget",icon:"palette",description:"Visual style selector and image reviewer",component:q(da,[["__scopeId","data-v-0995de25"],["__file","interface.vue"]]),options:[{field:"mode",name:"Mode",type:"string",meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Style Selection",value:"style-select"},{text:"Image Review",value:"image-review"}]}},schema:{default_value:"style-select"}},{field:"stylesCollection",name:"Styles Collection",type:"string",meta:{width:"half",interface:"input",note:"Collection containing style definitions (default: ImageStyles)"},schema:{default_value:"ImageStyles"}}],types:["json","string"]});export{oa as default};