@stellartech/image-style-widget-directus 1.0.0

package/dist/index.js

@@ -0,0 +1,1667 @@
+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, 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 MISC_SERVICE_URL = "http://localhost:8004";
+function useDirectusApi() {
+  const api = useApi();
+  const loading = ref(false);
+  const error = ref(null);
+  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") {
+    const miscServiceUrl = `${MISC_SERVICE_URL}/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") {
+    loading.value = true;
+    error.value = null;
+    try {
+      const [example_1, example_2] = await Promise.all([
+        generateSingleImage(prompt, model),
+        generateSingleImage(prompt, model)
+      ]);
+      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") {
+    loading.value = true;
+    error.value = null;
+    try {
+      const [image1, image2] = await Promise.all([
+        generateSingleImage(prompt1, model),
+        generateSingleImage(prompt2, model)
+      ]);
+      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) {
+    loading.value = true;
+    error.value = null;
+    try {
+      const miscServiceUrl = `${MISC_SERVICE_URL}/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,
+    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__model-selector" };
+const _hoisted_12 = { class: "widget__model-buttons" };
+const _hoisted_13 = ["onClick"];
+const _hoisted_14 = { class: "widget__list" };
+const _hoisted_15 = {
+  key: 0,
+  class: "widget__empty"
+};
+const _hoisted_16 = { class: "widget__header" };
+const _hoisted_17 = { class: "widget__header-row" };
+const _hoisted_18 = { class: "widget__header-text" };
+const _hoisted_19 = { class: "widget__title" };
+const _hoisted_20 = { class: "widget__model-selector" };
+const _hoisted_21 = { class: "widget__model-buttons" };
+const _hoisted_22 = ["onClick"];
+const _hoisted_23 = { class: "widget__list" };
+const _hoisted_24 = {
+  key: 0,
+  class: "widget__empty"
+};
+const _hoisted_25 = {
+  key: 5,
+  class: "widget__footer"
+};
+const _hoisted_26 = ["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,
+      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 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);
+      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);
+      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);
+        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),
+            generateSingleImage(prompt2, selectedModel.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;
+      }
+    }
+    onMounted(() => {
+      initFromValue();
+      loadStyles();
+    });
+    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, [
+                  _cache[3] || (_cache[3] = createElementVNode(
+                    "label",
+                    { class: "widget__model-label" },
+                    "AI Model:",
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("div", _hoisted_12, [
+                    (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_13);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ])
+                ])
+              ])
+            ]),
+            createElementVNode("div", _hoisted_14, [
+              (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_15, [
+              createVNode(_component_v_icon, { name: "palette" }),
+              _cache[4] || (_cache[4] = 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_16, [
+              createElementVNode("div", _hoisted_17, [
+                createElementVNode("div", _hoisted_18, [
+                  createElementVNode("h2", _hoisted_19, [
+                    createVNode(_component_v_icon, { name: "photo_library" }),
+                    _cache[5] || (_cache[5] = createTextVNode(
+                      " Review Generated Images ",
+                      -1
+                      /* CACHED */
+                    ))
+                  ]),
+                  _cache[6] || (_cache[6] = createElementVNode(
+                    "p",
+                    { class: "widget__subtitle" },
+                    " Select the best image for each placeholder ",
+                    -1
+                    /* CACHED */
+                  ))
+                ]),
+                createElementVNode("div", _hoisted_20, [
+                  _cache[7] || (_cache[7] = createElementVNode(
+                    "label",
+                    { class: "widget__model-label" },
+                    "AI Model:",
+                    -1
+                    /* CACHED */
+                  )),
+                  createElementVNode("div", _hoisted_21, [
+                    (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_22);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ])
+                ])
+              ])
+            ]),
+            createElementVNode("div", _hoisted_23, [
+              (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_24, [
+              createVNode(_component_v_icon, { name: "photo_library" }),
+              _cache[8] || (_cache[8] = createElementVNode(
+                "p",
+                null,
+                "No images to review",
+                -1
+                /* CACHED */
+              )),
+              _cache[9] || (_cache[9] = 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_25, [
+          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[10] || (_cache[10] = 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[11] || (_cache[11] = 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_26)
+        ])) : 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-ddc35274] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n.widget__loading[data-v-ddc35274],\n.widget__error[data-v-ddc35274],\n.widget__empty[data-v-ddc35274] {\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-ddc35274],\n.widget__error v-icon[data-v-ddc35274],\n.widget__empty v-icon[data-v-ddc35274] {\n  font-size: 32px;\n}\n.widget__error[data-v-ddc35274] {\n  color: var(--theme--danger, #f44336);\n}\n.widget__retry[data-v-ddc35274] {\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-ddc35274] {\n  padding-bottom: 16px;\n  border-bottom: 1px solid var(--theme--border-color-subdued, #e0e0e0);\n}\n.widget__header-row[data-v-ddc35274] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 16px;\n}\n.widget__header-text[data-v-ddc35274] {\n  flex: 1;\n}\n.widget__model-selector[data-v-ddc35274] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  align-items: flex-end;\n}\n.widget__model-label[data-v-ddc35274] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__model-buttons[data-v-ddc35274] {\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-ddc35274] {\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-ddc35274]:hover {\n  color: var(--theme--foreground, #333);\n}\n.widget__model-btn--active[data-v-ddc35274] {\n  background: var(--theme--primary, #6644ff);\n  color: #fff;\n}\n.widget__model-btn--active[data-v-ddc35274]:hover {\n  color: #fff;\n}\n.widget__title[data-v-ddc35274] {\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-ddc35274] {\n  margin: 4px 0 0 0;\n  font-size: 13px;\n  color: var(--theme--foreground-subdued, #666);\n}\n.widget__list[data-v-ddc35274] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.widget__footer[data-v-ddc35274] {\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-ddc35274] {\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-ddc35274]:hover:not(:disabled) {\n  background: var(--theme--primary-accent, #5533ee);\n}\n.widget__confirm[data-v-ddc35274]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.widget__back[data-v-ddc35274] {\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-ddc35274]:hover {\n  background: var(--theme--background-subdued, #f0f0f0);\n}\n.widget__view-images[data-v-ddc35274] {\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-ddc35274]:hover {\n  background: var(--theme--primary-background, #f5f3ff);\n}\n.widget__processing[data-v-ddc35274] {\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-ddc35274] {\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-ddc35274] {\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-ddc35274] {\n  height: 100%;\n  background: var(--theme--primary, #6644ff);\n  border-radius: 3px;\n  transition: width 0.3s ease;\n}\n.spinning[data-v-ddc35274] {\n  animation: spin-ddc35274 1s linear infinite;\n}\n@keyframes spin-ddc35274 {\nfrom { transform: rotate(0deg);\n}\nto { transform: rotate(360deg);\n}\n}\n.widget__empty p[data-v-ddc35274] {\n  margin: 0;\n  font-weight: 600;\n  color: var(--theme--foreground, #333);\n}\n.widget__empty span[data-v-ddc35274] {\n  font-size: 13px;\n}\n";
+n(css,{});
+
+var InterfaceComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ddc35274"], ["__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 };