@templatical/editor 0.0.1

package/dist/AiChatSidebar-0vx9TP5B.js

@@ -0,0 +1,305 @@
+import { defineComponent as U, inject as f, ref as y, watch as C, openBlock as s, createBlock as B, Transition as J, withCtx as X, createElementBlock as a, createElementVNode as o, createVNode as d, unref as t, toDisplayString as i, createCommentVNode as m, Fragment as b, renderList as H, createTextVNode as R, normalizeClass as q, withDirectives as O, vModelText as Q, nextTick as W } from "vue";
+import { c as F, B as Y, s as Z, S as E, E as tt, X as et, L as lt, C as st, t as at } from "./index-D-iD-7lO.js";
+import { useAiChat as ot } from "@templatical/core/cloud";
+import { L as rt } from "./loader-circle-tM9j2mRh.js";
+import { S as pt } from "./CloudEditor-Wdfv_9xn.js";
+/**
+ * @license lucide-vue-next v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const nt = F("Redo2Icon", [
+  ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
+  ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
+]);
+/**
+ * @license lucide-vue-next v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const it = F("Undo2Icon", [
+  ["path", { d: "M9 14 4 9l5-5", key: "102s5s" }],
+  ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
+]), dt = {
+  key: 0,
+  class: "tpl-ai-sidebar tpl:absolute tpl:top-14 tpl:right-0 tpl:bottom-0 tpl:z-[45] tpl:flex tpl:w-[360px] tpl:flex-col tpl:border-l tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg-elevated)]"
+}, ct = { class: "tpl:flex tpl:items-center tpl:justify-between tpl:border-b tpl:border-[var(--tpl-border)] tpl:px-4 tpl:py-3" }, ut = { class: "tpl:flex tpl:items-center tpl:gap-1.5 tpl:text-sm tpl:font-medium tpl:text-[var(--tpl-primary)]" }, vt = { class: "tpl:flex tpl:items-center tpl:gap-1" }, mt = ["title"], ht = { class: "tpl:relative tpl:flex tpl:min-h-0 tpl:flex-1 tpl:flex-col" }, xt = {
+  key: 0,
+  class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, gt = {
+  class: "tpl:text-sm",
+  style: { color: "var(--tpl-text-muted)" }
+}, ft = {
+  key: 1,
+  class: "tpl:flex tpl:h-full tpl:flex-col tpl:items-center tpl:justify-center tpl:gap-3 tpl:text-center"
+}, yt = {
+  class: "tpl:max-w-[240px] tpl:text-sm",
+  style: { color: "var(--tpl-text-muted)" }
+}, bt = {
+  key: 2,
+  class: "tpl:flex tpl:flex-col tpl:gap-4"
+}, kt = {
+  key: 0,
+  class: "tpl:self-end tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm",
+  style: { "background-color": "var(--tpl-primary-light)", color: "var(--tpl-text)", "max-width": "85%", "box-shadow": "var(--tpl-shadow)" }
+}, _t = {
+  key: 1,
+  class: "tpl:flex tpl:flex-col tpl:gap-2"
+}, wt = {
+  key: 1,
+  class: "tpl:rounded-[var(--tpl-radius-sm)] tpl:px-3.5 tpl:py-2.5 tpl:text-sm tpl:whitespace-pre-wrap",
+  style: { "max-width": "85%", "background-color": "white", color: "var(--tpl-text)", "box-shadow": "var(--tpl-shadow)" }
+}, Ct = {
+  key: 0,
+  class: "tpl:mx-3 tpl:mb-2 tpl:flex tpl:items-start tpl:gap-2 tpl:rounded-lg tpl:px-3 tpl:py-2 tpl:text-xs",
+  style: { "background-color": "var(--tpl-danger-light)", color: "var(--tpl-danger)" }
+}, zt = {
+  key: 1,
+  class: "tpl:absolute tpl:right-0 tpl:bottom-0 tpl:left-0 tpl:z-10 tpl:px-3 tpl:pb-3",
+  style: { "background-color": `color-mix(
+              in srgb,
+              var(--tpl-bg) 50%,
+              transparent
+            )`, "backdrop-filter": "blur(2px)" }
+}, St = { class: "tpl:flex tpl:flex-col tpl:gap-1.5" }, Tt = ["onClick"], At = {
+  class: "tpl:border-t tpl:p-3",
+  style: { "border-color": "var(--tpl-border)" }
+}, Lt = {
+  class: "tpl-ai-input-wrapper tpl:flex tpl:items-end tpl:gap-2 tpl:rounded-[var(--tpl-radius)] tpl:border tpl:px-3 tpl:py-2",
+  style: { "border-color": "var(--tpl-border)", "background-color": "var(--tpl-bg)" }
+}, It = ["placeholder", "disabled"], Mt = ["disabled"], jt = {
+  class: "tpl:m-0 tpl:px-1 tpl:pt-2 tpl:text-center tpl:text-[11px]",
+  style: { color: "var(--tpl-text-dim)" }
+}, Bt = /* @__PURE__ */ U({
+  __name: "AiChatSidebar",
+  props: {
+    visible: { type: Boolean },
+    onApply: { type: Function }
+  },
+  emits: ["close"],
+  setup(z, { emit: G }) {
+    const S = z, P = G, n = f("translations"), h = f("editor"), V = f("authManager"), T = f("mergeTags", []), e = ot({
+      authManager: V,
+      getTemplateId: () => {
+        var l;
+        return ((l = h.state.template) == null ? void 0 : l.id) ?? null;
+      },
+      onApply: S.onApply,
+      onError: void 0
+    }), c = y(""), x = y(null), A = y(!1), u = y(0), { pause: k, resume: N } = Y(
+      () => {
+        var r;
+        const l = ((r = e.suggestions.value) == null ? void 0 : r.length) ?? 0;
+        u.value < l ? u.value++ : k();
+      },
+      150,
+      { immediate: !1 }
+    );
+    C(
+      () => {
+        var l;
+        return ((l = e.suggestions.value) == null ? void 0 : l.length) ?? 0;
+      },
+      (l) => {
+        if (k(), l === 0) {
+          u.value = 0;
+          return;
+        }
+        u.value = 0, Z(() => N(), 100);
+      }
+    );
+    function _() {
+      W(() => {
+        x.value && (x.value.scrollTop = x.value.scrollHeight);
+      });
+    }
+    C(
+      () => {
+        var l;
+        return ((l = e.messages.value) == null ? void 0 : l.length) ?? 0;
+      },
+      () => _()
+    ), C(
+      () => S.visible,
+      async (l) => {
+        var r;
+        l && !A.value && (A.value = !0, await e.loadConversation(), (((r = e.messages.value) == null ? void 0 : r.length) ?? 0) === 0 && h.content.value.blocks.length === 0 && e.loadSuggestions(h.content.value, T));
+      }
+    );
+    async function w() {
+      const l = c.value.trim();
+      !l || e.isGenerating.value || (c.value = "", e.error.value = null, e.failedPrompt.value = null, _(), await e.sendPrompt(l, h.content.value, T), e.failedPrompt.value && (c.value = e.failedPrompt.value), _());
+    }
+    function L(l) {
+      return l.replace(/```json[\s\S]*?```/g, "").replace(/```json[\s\S]*/g, "").trim();
+    }
+    function $(l) {
+      k(), c.value = l, w();
+    }
+    function D(l) {
+      l.key === "Enter" && !l.shiftKey && (l.preventDefault(), w());
+    }
+    return (l, r) => (s(), B(J, {
+      "enter-active-class": "tpl-ai-slide-enter-active",
+      "enter-from-class": "tpl:translate-x-full",
+      "enter-to-class": "tpl:translate-x-0",
+      "leave-active-class": "tpl-ai-slide-leave-active",
+      "leave-from-class": "tpl:translate-x-0",
+      "leave-to-class": "tpl:translate-x-full"
+    }, {
+      default: X(() => {
+        var I, M, j;
+        return [
+          z.visible ? (s(), a("div", dt, [
+            o("div", ct, [
+              o("div", ut, [
+                d(t(E), {
+                  size: 13,
+                  "stroke-width": 2
+                }),
+                o("span", null, i(t(n).aiChat.title), 1)
+              ]),
+              o("div", vt, [
+                (((I = t(e).messages.value) == null ? void 0 : I.length) ?? 0) > 0 ? (s(), a("button", {
+                  key: 0,
+                  class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150",
+                  style: { color: "var(--tpl-text-muted)" },
+                  title: t(n).aiChat.clear,
+                  onClick: r[0] || (r[0] = (p) => t(e).clearChat())
+                }, [
+                  d(t(tt), {
+                    size: 14,
+                    "stroke-width": 2
+                  })
+                ], 8, mt)) : m("", !0),
+                o("button", {
+                  class: "tpl:rounded-md tpl:p-0.5 tpl:transition-colors tpl:duration-150",
+                  style: { color: "var(--tpl-text-muted)" },
+                  onClick: r[1] || (r[1] = (p) => P("close"))
+                }, [
+                  d(t(et), {
+                    size: 14,
+                    "stroke-width": 2
+                  })
+                ])
+              ])
+            ]),
+            o("div", ht, [
+              o("div", {
+                ref_key: "messagesContainer",
+                ref: x,
+                class: "tpl:flex-1 tpl:overflow-y-auto tpl:p-4"
+              }, [
+                t(e).isLoadingHistory.value ? (s(), a("div", xt, [
+                  d(t(rt), {
+                    class: "tpl-spinner",
+                    size: 24,
+                    "stroke-width": 2,
+                    style: { color: "var(--tpl-text-muted)" }
+                  }),
+                  o("p", gt, i(t(n).aiChat.loadingHistory), 1)
+                ])) : (((M = t(e).messages.value) == null ? void 0 : M.length) ?? 0) === 0 ? (s(), a("div", ft, [
+                  d(t(E), {
+                    size: 32,
+                    "stroke-width": 1.5,
+                    style: { color: "var(--tpl-text-dim)" }
+                  }),
+                  o("p", yt, i(t(n).aiChat.placeholder), 1)
+                ])) : (s(), a("div", bt, [
+                  (s(!0), a(b, null, H(t(e).messages.value, (p, g) => {
+                    var v;
+                    return s(), a("div", {
+                      key: p.id,
+                      class: "tpl:flex tpl:flex-col tpl:gap-2"
+                    }, [
+                      p.role === "user" ? (s(), a("div", kt, i(p.content), 1)) : (s(), a("div", _t, [
+                        !L(p.content) && t(e).isGenerating.value && g === (((v = t(e).messages.value) == null ? void 0 : v.length) ?? 0) - 1 ? (s(), B(lt, { key: 0 })) : (s(), a("div", wt, i(L(p.content) || t(n).aiChat.applied), 1)),
+                        p.id === t(e).lastApplyMessageId.value && !t(e).isGenerating.value ? (s(), a("button", {
+                          key: 2,
+                          class: "tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:self-start tpl:rounded-md tpl:border tpl:px-2.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:transition-all tpl:duration-150",
+                          style: { "border-color": "var(--tpl-border)", color: "var(--tpl-text-muted)", "background-color": "transparent" },
+                          onClick: r[2] || (r[2] = (K) => t(e).toggleLastRevert())
+                        }, [
+                          t(e).isLastChangeReverted.value ? (s(), a(b, { key: 0 }, [
+                            d(t(nt), {
+                              size: 12,
+                              "stroke-width": 2
+                            }),
+                            R(" " + i(t(n).aiChat.reapply), 1)
+                          ], 64)) : (s(), a(b, { key: 1 }, [
+                            d(t(it), {
+                              size: 12,
+                              "stroke-width": 2
+                            }),
+                            R(" " + i(t(n).aiChat.revert), 1)
+                          ], 64))
+                        ])) : m("", !0)
+                      ]))
+                    ]);
+                  }), 128))
+                ]))
+              ], 512),
+              t(e).error.value ? (s(), a("div", Ct, [
+                d(t(st), {
+                  size: 14,
+                  "stroke-width": 2,
+                  class: "tpl:mt-0.5 tpl:shrink-0"
+                }),
+                o("span", null, i(t(e).error.value === "ai_apply_failed" ? t(n).aiChat.applyFailed : t(n).aiChat.error), 1)
+              ])) : m("", !0),
+              (((j = t(e).suggestions.value) == null ? void 0 : j.length) ?? 0) > 0 ? (s(), a("div", zt, [
+                o("div", St, [
+                  (s(!0), a(b, null, H(t(e).suggestions.value ?? [], (p, g) => {
+                    var v;
+                    return s(), a("button", {
+                      key: g,
+                      class: q([
+                        "tpl-suggestion-btn tpl:cursor-pointer tpl:rounded-[var(--tpl-radius-sm)] tpl:border tpl:px-3 tpl:py-2 tpl:text-left tpl:text-xs tpl:leading-snug tpl:transition-all tpl:duration-300 tpl:ease-out",
+                        (((v = t(e).suggestions.value) == null ? void 0 : v.length) ?? 0) - 1 - g < u.value ? "tpl:translate-y-0 tpl:opacity-100" : "tpl:pointer-events-none tpl:-translate-y-2 tpl:opacity-0"
+                      ]),
+                      style: { "border-color": "var(--tpl-border)", color: "var(--tpl-primary)", "background-color": "white", "box-shadow": "var(--tpl-shadow)" },
+                      onClick: (K) => $(p)
+                    }, i(p), 11, Tt);
+                  }), 128))
+                ])
+              ])) : m("", !0)
+            ]),
+            o("div", At, [
+              o("div", Lt, [
+                O(o("textarea", {
+                  "onUpdate:modelValue": r[3] || (r[3] = (p) => c.value = p),
+                  class: "tpl:max-h-32 tpl:min-h-[64px] tpl:flex-1 tpl:resize-none tpl:border-none tpl:bg-transparent tpl:font-sans tpl:text-sm tpl:outline-none",
+                  style: { color: "var(--tpl-text)" },
+                  placeholder: t(n).aiChat.inputPlaceholder,
+                  disabled: t(e).isGenerating.value,
+                  rows: "3",
+                  onKeydown: D
+                }, null, 40, It), [
+                  [Q, c.value]
+                ]),
+                o("button", {
+                  class: "tpl-ai-send-btn tpl:flex tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-md tpl:p-1.5 tpl:transition-all tpl:duration-150 tpl:disabled:opacity-40",
+                  style: { color: "var(--tpl-primary)" },
+                  disabled: !c.value.trim() || t(e).isGenerating.value,
+                  onClick: w
+                }, [
+                  d(t(pt), {
+                    size: 16,
+                    "stroke-width": 2
+                  })
+                ], 8, Mt)
+              ]),
+              o("p", jt, i(t(n).aiMenu.disclaimer), 1)
+            ])
+          ])) : m("", !0)
+        ];
+      }),
+      _: 1
+    }));
+  }
+}), Pt = /* @__PURE__ */ at(Bt, [["__scopeId", "data-v-3d9d0cf5"]]);
+export {
+  Pt as default
+};

package/dist/AiFeatureMenu-CI-v74ND.js

@@ -0,0 +1,69 @@
+import { defineComponent as v, inject as y, computed as h, openBlock as l, createElementBlock as a, Fragment as x, renderList as b, normalizeStyle as o, createElementVNode as n, createBlock as _, resolveDynamicComponent as w, toDisplayString as s } from "vue";
+import { u as C, S as F, I as M, t as S } from "./index-D-iD-7lO.js";
+import "@templatical/types";
+import { S as T } from "./shield-check-Ngi9jAQc.js";
+const D = {
+  class: "tpl-ai-feature-menu tpl:w-[280px] tpl:overflow-hidden tpl:rounded-[var(--tpl-radius)] tpl:py-1",
+  style: { "background-color": "var(--tpl-bg-elevated)", border: "1px solid var(--tpl-border)", "box-shadow": "var(--tpl-shadow-lg)", "backdrop-filter": "blur(8px)", "-webkit-backdrop-filter": "blur(8px)" }
+}, A = ["onClick"], I = { class: "tpl:flex tpl:min-w-0 tpl:flex-col tpl:gap-0.5" }, z = {
+  class: "tpl:text-sm tpl:font-medium",
+  style: { color: "var(--tpl-text)" }
+}, B = {
+  class: "tpl:text-xs tpl:leading-snug",
+  style: { color: "var(--tpl-text-muted)" }
+}, E = /* @__PURE__ */ v({
+  __name: "AiFeatureMenu",
+  props: {
+    activeFeature: {}
+  },
+  emits: ["select"],
+  setup(i, { emit: c }) {
+    const p = c, { t: r } = C(), u = y("aiConfig"), d = {
+      "ai-chat": "chat",
+      "design-reference": "designToTemplate",
+      scoring: "scoring"
+    }, m = [
+      { key: "ai-chat", icon: F },
+      { key: "design-reference", icon: M },
+      { key: "scoring", icon: T }
+    ], g = h(
+      () => m.filter((e) => u.isFeatureEnabled(d[e.key]))
+    );
+    function f(e) {
+      return e === "ai-chat" ? r.aiMenu.aiAssistant : e === "design-reference" ? r.aiMenu.designToTemplate : r.aiMenu.templateScore;
+    }
+    function k(e) {
+      return e === "ai-chat" ? r.aiMenu.aiAssistantDesc : e === "design-reference" ? r.aiMenu.designToTemplateDesc : r.aiMenu.templateScoreDesc;
+    }
+    return (e, j) => (l(), a("div", D, [
+      (l(!0), a(x, null, b(g.value, (t) => (l(), a("button", {
+        key: t.key,
+        class: "tpl-ai-feature-menu-item tpl:flex tpl:w-full tpl:cursor-pointer tpl:items-start tpl:gap-3 tpl:border-none tpl:px-3 tpl:py-2.5 tpl:text-left tpl:transition-colors tpl:duration-100",
+        style: o({
+          backgroundColor: i.activeFeature === t.key ? "var(--tpl-primary-light)" : "transparent"
+        }),
+        onClick: (K) => p("select", t.key)
+      }, [
+        n("div", {
+          class: "tpl:mt-0.5 tpl:flex tpl:size-7 tpl:shrink-0 tpl:items-center tpl:justify-center tpl:rounded-[var(--tpl-radius-sm)]",
+          style: o({
+            backgroundColor: i.activeFeature === t.key ? "var(--tpl-primary)" : "var(--tpl-bg-active)",
+            color: i.activeFeature === t.key ? "white" : "var(--tpl-text-muted)"
+          })
+        }, [
+          (l(), _(w(t.icon), {
+            size: 15,
+            "stroke-width": 2
+          }))
+        ], 4),
+        n("div", I, [
+          n("span", z, s(f(t.key)), 1),
+          n("span", B, s(k(t.key)), 1)
+        ])
+      ], 12, A))), 128))
+    ]));
+  }
+}), $ = /* @__PURE__ */ S(E, [["__scopeId", "data-v-5200b3b6"]]);
+export {
+  $ as default
+};