sillytavern-utils-lib 1.0.60 → 1.0.62

package/dist/components/react/STFancyDropdown.js

@@ -0,0 +1,176 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import j, { useState as x, useRef as D, useEffect as k, useMemo as m } from "react";
+import F from "fuse.js";
+import { STInput as H } from "./STInput.js";
+const z = ({
+  items: e,
+  value: o,
+  onChange: p,
+  placeholder: s = "Select items...",
+  closeOnSelect: l = !1,
+  multiple: I = !0,
+  disabled: f = !1,
+  onBeforeSelection: y,
+  enableSearch: a = !1,
+  searchPlaceholder: N = "Search...",
+  searchNoResultsText: T = "No results found",
+  searchFuseOptions: h,
+  inputClasses: E,
+  containerClasses: L
+}) => {
+  const [i, u] = x(!1), [c, b] = x(""), v = D(null);
+  k(() => {
+    const r = (t) => {
+      v.current && !v.current.contains(t.target) && u(!1);
+    };
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, []), k(() => {
+    i || b("");
+  }, [i]);
+  const g = m(() => {
+    if (!a) return null;
+    const r = {
+      includeScore: !1,
+      threshold: 0.4,
+      keys: ["label", "value"],
+      ...h
+    };
+    return new F(e, r);
+  }, [e, a, h]), w = m(() => !a || !c.trim() || !g ? e : g.search(c.trim()).map((r) => r.item), [e, c, a, g]), R = async (r) => {
+    let t;
+    I ? t = o.includes(r) ? o.filter((C) => C !== r) : [...o, r] : t = o.includes(r) ? [] : [r], !(y && !await Promise.resolve(y(o, t))) && (p(t), l && u(!1));
+  }, S = m(() => {
+    var r;
+    return o.length === 0 ? s : o.length === 1 ? ((r = e.find((t) => t.value === o[0])) == null ? void 0 : r.label) ?? o[0] : `${o.length} items selected`;
+  }, [o, e, s]);
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: v,
+      className: `fancy-dropdown-container ${L ?? ""}`,
+      style: {
+        position: "relative",
+        userSelect: "none",
+        opacity: f ? 0.6 : 1,
+        pointerEvents: f ? "none" : "auto"
+      },
+      children: [
+        /* @__PURE__ */ d(
+          "div",
+          {
+            className: "fancy-dropdown-trigger",
+            onClick: () => !f && u(!i),
+            style: {
+              padding: "8px 12px",
+              border: "1px solid var(--border-color)",
+              backgroundColor: "var(--bg-color)",
+              color: "var(--text-color)",
+              borderRadius: "4px",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ n("span", { className: "fancy-dropdown-trigger-text", children: S }),
+              /* @__PURE__ */ n("i", { className: `fas ${i ? "fa-chevron-up" : "fa-chevron-down"}`, style: { marginLeft: "8px" } })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ d(
+          "div",
+          {
+            className: "fancy-dropdown-list",
+            style: {
+              position: "absolute",
+              top: "100%",
+              left: "0",
+              right: "0",
+              maxHeight: "300px",
+              zIndex: 1050,
+              border: "1px solid var(--border-color)",
+              borderTop: "none",
+              backgroundColor: "var(--bg-color-popup, var(--bg-color-secondary, var(--greyCAIbg, var(--grey30))))",
+              color: "var(--text-color)",
+              borderRadius: "0 0 4px 4px",
+              boxShadow: "0 4px 8px var(--black50a)",
+              overflowY: "auto",
+              display: "flex",
+              flexDirection: "column"
+            },
+            children: [
+              a && /* @__PURE__ */ n(
+                "div",
+                {
+                  style: {
+                    padding: "8px",
+                    borderBottom: "1px solid var(--border-color)",
+                    position: "sticky",
+                    top: 0,
+                    backgroundColor: "inherit"
+                  },
+                  children: /* @__PURE__ */ n(
+                    H,
+                    {
+                      type: "text",
+                      placeholder: N,
+                      value: c,
+                      onChange: (r) => b(r.target.value),
+                      autoFocus: !0,
+                      className: E
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ n("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: w.length > 0 ? w.map((r) => /* @__PURE__ */ n(
+                M,
+                {
+                  item: r,
+                  isSelected: o.includes(r.value),
+                  onClick: R
+                },
+                r.value
+              )) : /* @__PURE__ */ n(
+                "div",
+                {
+                  style: {
+                    padding: "8px 12px",
+                    textAlign: "center",
+                    color: "var(--text-color-secondary, var(--grey50))"
+                  },
+                  children: T
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, M = j.memo(({ item: e, isSelected: o, onClick: p }) => {
+  const [s, l] = x(!1);
+  return /* @__PURE__ */ d(
+    "li",
+    {
+      onClick: () => p(e.value),
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      style: {
+        padding: "8px 12px",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        backgroundColor: o ? "var(--accent-color-bg, var(--link-color))" : s ? "var(--hover-color, var(--white20a))" : "transparent"
+      },
+      children: [
+        /* @__PURE__ */ n("span", { children: e.label }),
+        o && /* @__PURE__ */ n("i", { className: "checkmark fa-solid fa-check", style: { marginLeft: "8px" } })
+      ]
+    }
+  );
+});
+export {
+  M as FancyDropdownItem,
+  z as STFancyDropdown
+};

package/dist/components/react/STInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),u=({label:i,className:n,overrideDefaults:c=!1,type:e="text",...o})=>{const r=l.useMemo(()=>{const s=[];return c||(e==="text"||e==="number"||e==="password"||e==="email"||e==="search")&&s.push("text_pole"),s.push(n),s.filter(Boolean).join(" ")},[c,n,e]);if(e==="checkbox"){const s=c?n:`checkbox_label ${n??""}`.trim();return t.jsxs("label",{className:s,children:[t.jsx("input",{type:"checkbox",...o}),i&&t.jsx("span",{children:i})]})}return t.jsx("input",{type:e,className:r,...o})};exports.STInput=u;

package/dist/components/{STInput.d.ts → react/STInput.d.ts}

@@ -1,4 +1,5 @@
-import React, { FC, InputHTMLAttributes } from 'react';
+import { default as React, FC, InputHTMLAttributes } from 'react';
+
 export interface STInputProps extends InputHTMLAttributes<HTMLInputElement> {
     /**
      * For checkboxes, this text will be displayed inside the associated label.

package/dist/components/react/STInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"STInput.d.ts","sourceRoot":"","sources":["../../../src/components/react/STInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAW,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACzE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4BpC,CAAC"}

package/dist/components/react/STInput.js

@@ -0,0 +1,19 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+const h = ({ label: r, className: o, overrideDefaults: c = !1, type: n = "text", ...t }) => {
+  const i = a(() => {
+    const s = [];
+    return c || (n === "text" || n === "number" || n === "password" || n === "email" || n === "search") && s.push("text_pole"), s.push(o), s.filter(Boolean).join(" ");
+  }, [c, o, n]);
+  if (n === "checkbox") {
+    const s = c ? o : `checkbox_label ${o ?? ""}`.trim();
+    return /* @__PURE__ */ l("label", { className: s, children: [
+      /* @__PURE__ */ e("input", { type: "checkbox", ...t }),
+      r && /* @__PURE__ */ e("span", { children: r })
+    ] });
+  }
+  return /* @__PURE__ */ e("input", { type: n, className: i, ...t });
+};
+export {
+  h as STInput
+};

package/dist/components/react/STPresetSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),v=require("./STButton.cjs"),I=require("./STSelect.cjs");require("./Popup.cjs");require("./ConnectionProfileSelect.cjs");require("./STSortableList.cjs");require("./STFancyDropdown.cjs");const d=require("../../config.cjs"),h=SillyTavern.getContext(),R=({value:c,items:r,readOnlyValues:p=[],label:t,onChange:f,onItemsChange:m,enableCreate:P=!1,enableRename:T=!1,enableDelete:j=!1,onCreate:$,onRename:x,onDelete:y,buttons:w})=>{const a=g.useMemo(()=>r.find(e=>e.value===c),[r,c]),S=g.useCallback(e=>e?p.includes(e):!1,[p]),q=async()=>{const e=await h.Popup.show.input(`Create a new ${t}`,`Please enter a name for the new ${t}:`,"");if(!e||e.trim()==="")return;const s=e.trim();if(r.some(n=>n.value===s)){await d.st_echo("warning",`A ${t} with this name already exists.`);return}let i={value:s,label:s};if($){const n=await Promise.resolve($(s));if(!n.confirmed)return;n.value&&(typeof n.value=="string"?i={value:n.value,label:n.value}:i=n.value)}m([...r,i]),f(i.value,c)},k=async()=>{if(!a){await d.st_echo("warning",`Please select a ${t} to rename.`);return}if(S(a.value)){await d.st_echo("warning",`This ${t} cannot be renamed as it is read-only.`);return}const e=await h.Popup.show.input(`Rename ${t}`,`Please enter a new name for "${a.label}":`,a.label);if(!e||e.trim()===""||e.trim()===a.value)return;const s=e.trim();if(r.some(l=>l.value===s)){await d.st_echo("warning",`A ${t} with this name already exists.`);return}let i={value:s,label:s};if(x){const l=await Promise.resolve(x(a.value,s));if(!l.confirmed)return;l.value&&(typeof l.value=="string"?i={value:l.value,label:l.value}:i=l.value)}const n=r.map(l=>l.value===a.value?i:l);m(n),f(i.value,c)},C=async()=>{var l;if(!a){await d.st_echo("warning",`Please select a ${t} to delete.`);return}if(S(a.value)){await d.st_echo("warning",`This ${t} cannot be deleted as it is read-only.`);return}if(!await h.Popup.show.confirm(`Delete ${t}`,`Are you sure you want to delete "${a.label}"?`)||y&&!await Promise.resolve(y(a.value)))return;const s=r.findIndex(u=>u.value===a.value),i=r.filter(u=>u.value!==a.value);m(i);let n;if(i.length>0){const u=Math.min(s,i.length-1);n=(l=i[u])==null?void 0:l.value}f(n,c)};return o.jsxs("div",{className:"preset-select-container",style:{display:"flex",alignItems:"center"},children:[o.jsx(I.STSelect,{value:c??"",onChange:e=>f(e.target.value,c),children:r.map(e=>o.jsx("option",{value:e.value,children:e.label},e.value))}),P&&o.jsx(v.STButton,{className:"fa-solid fa-file-circle-plus",title:`Create a new ${t}`,onClick:q,"data-i18n":`[title]Create a new ${t}`}),T&&o.jsx(v.STButton,{className:"fa-solid fa-pencil",title:`Rename selected ${t}`,onClick:k,disabled:!a,"data-i18n":`[title]Rename selected ${t}`}),j&&o.jsx(v.STButton,{className:"fa-solid fa-trash-can",title:`Delete selected ${t}`,onClick:C,disabled:!a,"data-i18n":`[title]Delete selected ${t}`}),w==null?void 0:w.map(e=>o.jsx(v.STButton,{className:e.icon,title:e.title,onClick:e.onClick,disabled:e.disabled,"data-i18n":e.i18n?`[title]${e.i18n}`:void 0},e.key))]})};exports.STPresetSelect=R;

package/dist/components/{STPresetSelect.d.ts → react/STPresetSelect.d.ts}

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+
 export interface PresetItem {
     value: string;
     label: string;

package/dist/components/react/STPresetSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"STPresetSelect.d.ts","sourceRoot":"","sources":["../../../src/components/react/STPresetSelect.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAwB,MAAM,OAAO,CAAC;AAMxD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,0DAA0D;IAC1D,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,+GAA+G;IAC/G,aAAa,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CACT,QAAQ,EAAE,MAAM,KAEd,OAAO,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC,GAC5D;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC;IACxD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CACT,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,KAEd,OAAO,CAAC;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC,GAC5D;QAAE,SAAS,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;KAAE,CAAC;IACxD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IACzD,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA6KlD,CAAC"}

package/dist/components/react/STPresetSelect.js

@@ -0,0 +1,142 @@
+import { jsxs as D, jsx as u } from "react/jsx-runtime";
+import { useMemo as N, useCallback as R } from "react";
+import { STButton as m } from "./STButton.js";
+import { STSelect as V } from "./STSelect.js";
+import "./Popup.js";
+import "./ConnectionProfileSelect.js";
+import "./STSortableList.js";
+import "./STFancyDropdown.js";
+import { st_echo as d } from "../../config.js";
+const p = SillyTavern.getContext(), G = ({
+  value: o,
+  items: s,
+  readOnlyValues: h = [],
+  label: a,
+  onChange: f,
+  onItemsChange: v,
+  enableCreate: g = !1,
+  enableRename: k = !1,
+  enableDelete: C = !1,
+  onCreate: $,
+  onRename: y,
+  onDelete: x,
+  buttons: w
+}) => {
+  const t = N(() => s.find((e) => e.value === o), [s, o]), P = R((e) => e ? h.includes(e) : !1, [h]), I = async () => {
+    const e = await p.Popup.show.input(
+      `Create a new ${a}`,
+      `Please enter a name for the new ${a}:`,
+      ""
+    );
+    if (!e || e.trim() === "") return;
+    const r = e.trim();
+    if (s.some((n) => n.value === r)) {
+      await d("warning", `A ${a} with this name already exists.`);
+      return;
+    }
+    let i = { value: r, label: r };
+    if ($) {
+      const n = await Promise.resolve($(r));
+      if (!n.confirmed) return;
+      n.value && (typeof n.value == "string" ? i = { value: n.value, label: n.value } : i = n.value);
+    }
+    v([...s, i]), f(i.value, o);
+  }, S = async () => {
+    if (!t) {
+      await d("warning", `Please select a ${a} to rename.`);
+      return;
+    }
+    if (P(t.value)) {
+      await d("warning", `This ${a} cannot be renamed as it is read-only.`);
+      return;
+    }
+    const e = await p.Popup.show.input(
+      `Rename ${a}`,
+      `Please enter a new name for "${t.label}":`,
+      t.label
+    );
+    if (!e || e.trim() === "" || e.trim() === t.value) return;
+    const r = e.trim();
+    if (s.some((l) => l.value === r)) {
+      await d("warning", `A ${a} with this name already exists.`);
+      return;
+    }
+    let i = { value: r, label: r };
+    if (y) {
+      const l = await Promise.resolve(y(t.value, r));
+      if (!l.confirmed) return;
+      l.value && (typeof l.value == "string" ? i = { value: l.value, label: l.value } : i = l.value);
+    }
+    const n = s.map((l) => l.value === t.value ? i : l);
+    v(n), f(i.value, o);
+  }, T = async () => {
+    var l;
+    if (!t) {
+      await d("warning", `Please select a ${a} to delete.`);
+      return;
+    }
+    if (P(t.value)) {
+      await d("warning", `This ${a} cannot be deleted as it is read-only.`);
+      return;
+    }
+    if (!await p.Popup.show.confirm(
+      `Delete ${a}`,
+      `Are you sure you want to delete "${t.label}"?`
+    ) || x && !await Promise.resolve(x(t.value)))
+      return;
+    const r = s.findIndex((c) => c.value === t.value), i = s.filter((c) => c.value !== t.value);
+    v(i);
+    let n;
+    if (i.length > 0) {
+      const c = Math.min(r, i.length - 1);
+      n = (l = i[c]) == null ? void 0 : l.value;
+    }
+    f(n, o);
+  };
+  return /* @__PURE__ */ D("div", { className: "preset-select-container", style: { display: "flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ u(V, { value: o ?? "", onChange: (e) => f(e.target.value, o), children: s.map((e) => /* @__PURE__ */ u("option", { value: e.value, children: e.label }, e.value)) }),
+    g && /* @__PURE__ */ u(
+      m,
+      {
+        className: "fa-solid fa-file-circle-plus",
+        title: `Create a new ${a}`,
+        onClick: I,
+        "data-i18n": `[title]Create a new ${a}`
+      }
+    ),
+    k && /* @__PURE__ */ u(
+      m,
+      {
+        className: "fa-solid fa-pencil",
+        title: `Rename selected ${a}`,
+        onClick: S,
+        disabled: !t,
+        "data-i18n": `[title]Rename selected ${a}`
+      }
+    ),
+    C && /* @__PURE__ */ u(
+      m,
+      {
+        className: "fa-solid fa-trash-can",
+        title: `Delete selected ${a}`,
+        onClick: T,
+        disabled: !t,
+        "data-i18n": `[title]Delete selected ${a}`
+      }
+    ),
+    w == null ? void 0 : w.map((e) => /* @__PURE__ */ u(
+      m,
+      {
+        className: e.icon,
+        title: e.title,
+        onClick: e.onClick,
+        disabled: e.disabled,
+        "data-i18n": e.i18n ? `[title]${e.i18n}` : void 0
+      },
+      e.key
+    ))
+  ] });
+};
+export {
+  G as STPresetSelect
+};

package/dist/components/react/STSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("react"),u=({children:n,className:t,overrideDefaults:s=!1,...o})=>{const c=r.useMemo(()=>{const e=[];return s||e.push("text_pole"),e.push(t),e.filter(Boolean).join(" ")},[s,t]);return l.jsx("select",{className:c,...o,children:n})};exports.STSelect=u;

package/dist/components/{STSelect.d.ts → react/STSelect.d.ts}

@@ -1,4 +1,5 @@
 import { FC, SelectHTMLAttributes } from 'react';
+
 export interface STSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     /**
      * Custom class name(s) to append or replace the default 'text_pole' class.

package/dist/components/react/STSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"STSelect.d.ts","sourceRoot":"","sources":["../../../src/components/react/STSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAW,MAAM,OAAO,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC5E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAkBtC,CAAC"}

package/dist/components/react/STSelect.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as c } from "react";
+const a = ({ children: t, className: s, overrideDefaults: o = !1, ...l }) => {
+  const n = c(() => {
+    const e = [];
+    return o || e.push("text_pole"), e.push(s), e.filter(Boolean).join(" ");
+  }, [o, s]);
+  return /* @__PURE__ */ r("select", { className: n, ...l, children: t });
+};
+export {
+  a as STSelect
+};

package/dist/components/react/STSortableList.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),C=require("sortablejs"),R=require("./STSelect.cjs"),v=require("./STButton.cjs"),j=b.memo(({item:n,showToggleButton:a,showDeleteButton:u,showSelectInput:g,onToggle:p,onDelete:f,onSelectChange:i})=>{const{id:o,label:h,enabled:s,canDelete:S=!0,canToggle:e=!0,showSelect:l=!0,canSelect:t=!0,selectOptions:c=[],selectValue:x}=n,T={display:"flex",alignItems:"center",padding:"8px 12px",border:"1px solid var(--SmartThemeBorderColor, #ccc)",color:"var(--SmartThemeBodyColor, #333)",marginBottom:"2px",opacity:a&&!s?.6:1},y={cursor:"pointer",flexShrink:0},m={display:"inline-block",flexShrink:0,marginRight:"10px"};return r.jsxs("li",{className:"sortable-list-item",style:T,"data-id":o,children:[r.jsx("span",{className:"drag-handle fas fa-bars",style:{cursor:"grab",marginRight:"10px",color:"var(--SmartThemeBodyColor, #555)",flexShrink:0}}),r.jsx("span",{className:"item-label",style:{flexGrow:1,marginRight:"10px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:h}),g&&l&&t&&r.jsx(R.STSelect,{value:x,onChange:d=>i(o,d.target.value),disabled:!s,style:{marginRight:"10px",flexShrink:0,width:"unset"},children:c.length===0?r.jsx("option",{disabled:!0,children:"--"}):c.map(d=>r.jsx("option",{value:d.value,children:d.label},d.value))}),g&&(!l||!t)&&r.jsx("span",{style:m}),a&&e&&r.jsx(v.STButton,{overrideDefaults:!0,className:`toggle-button fas ${s?"fa-toggle-on":"fa-toggle-off"}`,style:{...y,marginRight:"10px",fontSize:"1.2em",color:s?"var(--success-color, #4CAF50)":"var(--SmartThemeBodyColor, #555)",backgroundColor:"transparent",border:"none"},onClick:()=>p(o)}),a&&!e&&r.jsx("span",{style:m}),u&&S&&r.jsx(v.STButton,{overrideDefaults:!0,className:"delete-button fas fa-trash-can",style:{...y,color:"var(--error-color, #f44336)",backgroundColor:"transparent",border:"none"},onClick:()=>f(o)}),u&&!S&&r.jsx("span",{style:{...m,marginRight:0}})]})}),k=({items:n,onItemsChange:a,showToggleButton:u=!1,showDeleteButton:g=!1,showSelectInput:p=!1,sortableJsOptions:f={}})=>{const i=b.useRef(null),o=b.useRef(null);b.useEffect(()=>(i.current&&(o.current=C.create(i.current,{handle:".drag-handle",animation:150,ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",filter:"select, button, .toggle-button, .delete-button",preventOnFilter:!1,...f,onEnd:e=>{const{oldIndex:l,newIndex:t}=e;if(l===void 0||t===void 0||l===t)return;const c=Array.from(n),[x]=c.splice(l,1);c.splice(t,0,x),a(c)}})),()=>{var e;(e=o.current)==null||e.destroy(),o.current=null}),[n,a,f]);const h=e=>{a(n.map(l=>l.id===e?{...l,enabled:!l.enabled}:l))},s=e=>{a(n.filter(l=>l.id!==e))},S=(e,l)=>{a(n.map(t=>t.id===e?{...t,selectValue:l}:t))};return r.jsx("ul",{ref:i,className:"sortable-list",style:{listStyle:"none",padding:0,margin:0},children:n.map(e=>r.jsx(j,{item:e,showToggleButton:u,showDeleteButton:g,showSelectInput:p,onToggle:h,onDelete:s,onSelectChange:S},e.id))})};exports.STSortableList=k;exports.STSortableListItem=j;

package/dist/components/{STSortableList.d.ts → react/STSortableList.d.ts}

@@ -1,6 +1,7 @@
-import React, { FC } from 'react';
-import Sortable from 'sortablejs';
-import { DropdownItem } from '../fancy-dropdown.js';
+import { default as React, FC } from 'react';
+import { default as Sortable } from 'sortablejs';
+import { DropdownItem } from '../../fancy-dropdown.js';
+
 export interface SortableListItemData {
     id: string;
     label: string | React.ReactNode;

package/dist/components/react/STSortableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"STSortableList.d.ts","sourceRoot":"","sources":["../../../src/components/react/STSortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAqB,MAAM,OAAO,CAAC;AACrD,OAAO,QAA2B,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAKvD,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,8CAA8C;IAC9C,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,qGAAqG;IACrG,aAAa,EAAE,CAAC,QAAQ,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;IAE1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;CACtC;AAGD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAuG1D,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA0ElD,CAAC"}

package/dist/components/react/STSortableList.js

@@ -0,0 +1,148 @@
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import R, { useRef as x, useEffect as T } from "react";
+import N from "sortablejs";
+import { STSelect as w } from "./STSelect.js";
+import { STButton as v } from "./STButton.js";
+const D = R.memo(
+  ({ item: o, showToggleButton: a, showDeleteButton: f, showSelectInput: u, onToggle: m, onDelete: p, onSelectChange: i }) => {
+    const {
+      id: n,
+      label: h,
+      enabled: s,
+      canDelete: g = !0,
+      canToggle: e = !0,
+      showSelect: l = !0,
+      canSelect: t = !0,
+      selectOptions: c = [],
+      selectValue: b
+    } = o, C = {
+      display: "flex",
+      alignItems: "center",
+      padding: "8px 12px",
+      border: "1px solid var(--SmartThemeBorderColor, #ccc)",
+      color: "var(--SmartThemeBodyColor, #333)",
+      marginBottom: "2px",
+      opacity: a && !s ? 0.6 : 1
+    }, y = { cursor: "pointer", flexShrink: 0 }, S = { display: "inline-block", flexShrink: 0, marginRight: "10px" };
+    return /* @__PURE__ */ k("li", { className: "sortable-list-item", style: C, "data-id": n, children: [
+      /* @__PURE__ */ r(
+        "span",
+        {
+          className: "drag-handle fas fa-bars",
+          style: { cursor: "grab", marginRight: "10px", color: "var(--SmartThemeBodyColor, #555)", flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ r(
+        "span",
+        {
+          className: "item-label",
+          style: {
+            flexGrow: 1,
+            marginRight: "10px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: h
+        }
+      ),
+      u && l && t && /* @__PURE__ */ r(
+        w,
+        {
+          value: b,
+          onChange: (d) => i(n, d.target.value),
+          disabled: !s,
+          style: { marginRight: "10px", flexShrink: 0, width: "unset" },
+          children: c.length === 0 ? /* @__PURE__ */ r("option", { disabled: !0, children: "--" }) : c.map((d) => /* @__PURE__ */ r("option", { value: d.value, children: d.label }, d.value))
+        }
+      ),
+      u && (!l || !t) && /* @__PURE__ */ r("span", { style: S }),
+      a && e && /* @__PURE__ */ r(
+        v,
+        {
+          overrideDefaults: !0,
+          className: `toggle-button fas ${s ? "fa-toggle-on" : "fa-toggle-off"}`,
+          style: {
+            ...y,
+            marginRight: "10px",
+            fontSize: "1.2em",
+            color: s ? "var(--success-color, #4CAF50)" : "var(--SmartThemeBodyColor, #555)",
+            backgroundColor: "transparent",
+            border: "none"
+          },
+          onClick: () => m(n)
+        }
+      ),
+      a && !e && /* @__PURE__ */ r("span", { style: S }),
+      f && g && /* @__PURE__ */ r(
+        v,
+        {
+          overrideDefaults: !0,
+          className: "delete-button fas fa-trash-can",
+          style: {
+            ...y,
+            color: "var(--error-color, #f44336)",
+            backgroundColor: "transparent",
+            border: "none"
+          },
+          onClick: () => p(n)
+        }
+      ),
+      f && !g && /* @__PURE__ */ r("span", { style: { ...S, marginRight: 0 } })
+    ] });
+  }
+), F = ({
+  items: o,
+  onItemsChange: a,
+  showToggleButton: f = !1,
+  showDeleteButton: u = !1,
+  showSelectInput: m = !1,
+  sortableJsOptions: p = {}
+}) => {
+  const i = x(null), n = x(null);
+  T(() => (i.current && (n.current = N.create(i.current, {
+    handle: ".drag-handle",
+    animation: 150,
+    ghostClass: "sortable-ghost",
+    chosenClass: "sortable-chosen",
+    dragClass: "sortable-drag",
+    filter: "select, button, .toggle-button, .delete-button",
+    // Prevent drag on controls
+    preventOnFilter: !1,
+    ...p,
+    onEnd: (e) => {
+      const { oldIndex: l, newIndex: t } = e;
+      if (l === void 0 || t === void 0 || l === t)
+        return;
+      const c = Array.from(o), [b] = c.splice(l, 1);
+      c.splice(t, 0, b), a(c);
+    }
+  })), () => {
+    var e;
+    (e = n.current) == null || e.destroy(), n.current = null;
+  }), [o, a, p]);
+  const h = (e) => {
+    a(o.map((l) => l.id === e ? { ...l, enabled: !l.enabled } : l));
+  }, s = (e) => {
+    a(o.filter((l) => l.id !== e));
+  }, g = (e, l) => {
+    a(o.map((t) => t.id === e ? { ...t, selectValue: l } : t));
+  };
+  return /* @__PURE__ */ r("ul", { ref: i, className: "sortable-list", style: { listStyle: "none", padding: 0, margin: 0 }, children: o.map((e) => /* @__PURE__ */ r(
+    D,
+    {
+      item: e,
+      showToggleButton: f,
+      showDeleteButton: u,
+      showSelectInput: m,
+      onToggle: h,
+      onDelete: s,
+      onSelectChange: g
+    },
+    e.id
+  )) });
+};
+export {
+  F as STSortableList,
+  D as STSortableListItem
+};

package/dist/components/react/STTextarea.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),c=require("react"),u=({children:s,className:t,overrideDefaults:a=!1,...r})=>{const o=c.useMemo(()=>{const e=[];return a||e.push("text_pole","textarea_compact"),e.push(t),e.filter(Boolean).join(" ")},[a,t]);return n.jsx("textarea",{className:o,...r,children:s})};exports.STTextarea=u;

package/dist/components/{STTextarea.d.ts → react/STTextarea.d.ts}

@@ -1,4 +1,5 @@
 import { FC, TextareaHTMLAttributes } from 'react';
+
 export interface STTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Custom class name(s) to append or replace the default SillyTavern classes.

package/dist/components/react/STTextarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"STTextarea.d.ts","sourceRoot":"","sources":["../../../src/components/react/STTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,sBAAsB,EAAW,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,eAAgB,SAAQ,sBAAsB,CAAC,mBAAmB,CAAC;IAClF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAkB1C,CAAC"}

package/dist/components/react/STTextarea.js

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useMemo as m } from "react";
+const l = ({ children: a, className: e, overrideDefaults: o = !1, ...s }) => {
+  const r = m(() => {
+    const t = [];
+    return o || t.push("text_pole", "textarea_compact"), t.push(e), t.filter(Boolean).join(" ");
+  }, [o, e]);
+  return /* @__PURE__ */ n("textarea", { className: r, ...s, children: a });
+};
+export {
+  l as STTextarea
+};

package/dist/components/react/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./STButton.cjs"),r=require("./STInput.cjs"),S=require("./STSelect.cjs"),n=require("./STTextarea.cjs"),T=require("./Popup.cjs"),c=require("./ConnectionProfileSelect.cjs"),i=require("./STPresetSelect.cjs"),e=require("./STSortableList.cjs"),t=require("./STFancyDropdown.cjs");exports.STButton=o.STButton;exports.STInput=r.STInput;exports.STSelect=S.STSelect;exports.STTextarea=n.STTextarea;exports.Popup=T.Popup;exports.STConnectionProfileSelect=c.STConnectionProfileSelect;exports.STPresetSelect=i.STPresetSelect;exports.STSortableList=e.STSortableList;exports.STSortableListItem=e.STSortableListItem;exports.FancyDropdownItem=t.FancyDropdownItem;exports.STFancyDropdown=t.STFancyDropdown;

package/dist/components/{index.d.ts → react/index.d.ts}

@@ -3,10 +3,11 @@ import { STInput, STInputProps } from './STInput.js';
 import { STSelect, STSelectProps } from './STSelect.js';
 import { STTextarea, STTextareaProps } from './STTextarea.js';
 import { Popup } from './Popup.js';
-import { STConnectionProfileSelect, STConnectionProfileSelectProps, isProfileSupported } from './ConnectionProfileSelect.js';
+import { STConnectionProfileSelect, STConnectionProfileSelectProps } from './ConnectionProfileSelect.js';
 import { PresetButtonDef, PresetItem, STPresetSelect, STPresetSelectProps } from './STPresetSelect.js';
 import { SortableListItemData, STSortableList, STSortableListItem, STSortableListItemProps, STSortableListProps } from './STSortableList.js';
 import { DropdownItem, FancyDropdownItem, STFancyDropdown, STFancyDropdownProps } from './STFancyDropdown.js';
-export { STButton, STInput, STSelect, STTextarea, Popup, STConnectionProfileSelect, isProfileSupported, STPresetSelect, STSortableList, STSortableListItem, STFancyDropdown, FancyDropdownItem, };
+
+export { STButton, STInput, STSelect, STTextarea, Popup, STConnectionProfileSelect, STPresetSelect, STSortableList, STSortableListItem, STFancyDropdown, FancyDropdownItem, };
 export type { STButtonProps, STInputProps, STSelectProps, STTextareaProps, STConnectionProfileSelectProps, STPresetSelectProps, PresetItem, PresetButtonDef, STSortableListItemProps, STSortableListProps, SortableListItemData, STFancyDropdownProps, DropdownItem, };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,yBAAyB,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AACzG,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACvG,OAAO,EACL,oBAAoB,EACpB,cAAc,EACd,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE9G,OAAO,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,UAAU,EACV,KAAK,EACL,yBAAyB,EACzB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAClB,CAAC;AACF,YAAY,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,8BAA8B,EAC9B,mBAAmB,EACnB,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,YAAY,GACb,CAAC"}

package/dist/components/react/index.js

@@ -0,0 +1,22 @@
+import { STButton as r } from "./STButton.js";
+import { STInput as p } from "./STInput.js";
+import { STSelect as m } from "./STSelect.js";
+import { STTextarea as x } from "./STTextarea.js";
+import { Popup as n } from "./Popup.js";
+import { STConnectionProfileSelect as c } from "./ConnectionProfileSelect.js";
+import { STPresetSelect as i } from "./STPresetSelect.js";
+import { STSortableList as u, STSortableListItem as I } from "./STSortableList.js";
+import { FancyDropdownItem as b, STFancyDropdown as d } from "./STFancyDropdown.js";
+export {
+  b as FancyDropdownItem,
+  n as Popup,
+  r as STButton,
+  c as STConnectionProfileSelect,
+  d as STFancyDropdown,
+  p as STInput,
+  i as STPresetSelect,
+  m as STSelect,
+  u as STSortableList,
+  I as STSortableListItem,
+  x as STTextarea
+};