@synopackageland/ui 0.25.20 → 0.25.22

package/dist/modules/components/composite/form-actions/FormActions.vue.js

@@ -0,0 +1,60 @@
+import { defineComponent as v, computed as p, useTemplateRef as y, watch as b, openBlock as k, createElementBlock as h, unref as a, normalizeStyle as _, normalizeClass as x, renderSlot as g } from "vue";
+import { useStickyRoom as B } from "../../../composables/stickyRoom.js";
+import { provideButtonKind as w } from "../../../composables/buttonKind.js";
+import { usePhone as z } from "../../../composables/phone.js";
+import { scrollerOf as R } from "../../../composables/softKeyboard.js";
+import { useFooterBarClaim as S } from "../../app/app-layout/pageTitle.js";
+const C = ["data-sticky", "data-ui-phone"], E = /* @__PURE__ */ v({
+  __name: "FormActions",
+  props: {
+    align: { default: "start" },
+    labelWidth: {},
+    inset: { type: Boolean, default: !1 },
+    sticky: { type: Boolean, default: void 0 }
+  },
+  setup(l) {
+    const i = l;
+    w("action");
+    const o = z(), t = p(() => i.sticky ?? o.value), d = p(() => {
+      const e = i.labelWidth ?? (i.inset ? "var(--ui-label-column)" : void 0);
+      return e ? { paddingLeft: `calc(${e} + var(--ui-label-gap))` } : void 0;
+    }), r = y("root"), f = B(r, () => t.value);
+    return S(r, () => t.value), b([r, t], ([e, n], O, m) => {
+      if (!e || !n) return;
+      const s = R(e);
+      if (!s) return;
+      const u = () => s.style.setProperty("--ui-scroll-footer", `${e.offsetHeight}px`);
+      u();
+      const c = typeof ResizeObserver > "u" ? null : new ResizeObserver(u);
+      c?.observe(e), m(() => {
+        c?.disconnect(), s.style.removeProperty("--ui-scroll-footer");
+      });
+    }, { flush: "post" }), (e, n) => (k(), h("div", {
+      ref_key: "root",
+      ref: r,
+      class: x([
+        "flex flex-wrap items-center gap-2",
+        // A vertical form stacks its labels over the fields: nothing to indent past.
+        "[[data-layout-direction=vertical]_&]:!pl-0",
+        l.align === "end" ? "justify-end" : "justify-start",
+        // A phone's buttons share the row in full (the primary goes last, on the right).
+        a(o) && "[&>*]:min-w-0 [&>*]:flex-[1_1_0%]",
+        t.value && "z-[1] border-t border-[var(--ui-border-subtle)] bg-[var(--ui-surface)] py-[var(--ui-space-3)]",
+        // Clear of the home indicator; the open keyboard covers it, so only 8px then.
+        t.value && a(o) && "pb-[max(12px,var(--ui-safe-bottom,0px))] [[data-ui-keyboard=open]_&]:pb-2",
+        // On iOS the keyboard covers the layout: the bar rides on top of it.
+        t.value && a(f) && "sticky bottom-[var(--ui-kb-inset,0px)]"
+      ]),
+      style: _(d.value),
+      "data-sticky": t.value ? "" : void 0,
+      "data-ui-phone": a(o) ? "" : void 0,
+      "data-ui-form-actions": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      g(e.$slots, "default")
+    ], 14, C));
+  }
+});
+export {
+  E as default
+};

package/dist/modules/components/composite/form-actions/FormActions2.vue.js

@@ -0,0 +1,4 @@
+import f from "./FormActions.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/form-note/FormNote.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent as g, computed as c, openBlock as o, createElementBlock as s, normalizeClass as _, normalizeStyle as k, Fragment as i, createElementVNode as r, toDisplayString as n, unref as a, renderList as x, renderSlot as m, createCommentVNode as p, createTextVNode as f } from "vue";
+import { useFormGroup as $ } from "../../../composables/formGroup.js";
+import { useLocalizedDefaults as N } from "../../../i18n/text.js";
+const z = ["data-inset"], S = {
+  class: "text-[var(--ui-note-title)]",
+  "data-ui-form-note-title": ""
+}, B = { class: "m-0 list-disc pl-4 [overflow-wrap:anywhere]" }, C = {
+  key: 0,
+  class: "[overflow-wrap:anywhere]"
+}, F = {
+  key: 1,
+  class: "m-0 [overflow-wrap:anywhere]"
+}, V = {
+  class: "text-[var(--ui-note-title)]",
+  "data-ui-form-note-title": ""
+}, P = /* @__PURE__ */ g({
+  __name: "FormNote",
+  props: {
+    title: {},
+    items: {},
+    inset: { type: Boolean }
+  },
+  setup(l) {
+    const t = N(l, { title: "Note:" }), d = $(), v = c(() => (t.items?.length ?? 0) > 1), y = c(() => {
+      if (!t.inset) return;
+      const e = "calc(var(--ui-label-column) + var(--ui-label-gap))";
+      return { paddingInlineStart: d ? `max(0px, calc(${e} - ${d.indent}))` : e };
+    });
+    return (e, u) => (o(), s("div", {
+      role: "note",
+      style: k(y.value),
+      class: _(["min-w-0 text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)]", l.inset && "[[data-layout-direction=vertical]_&]:!ps-0"]),
+      "data-inset": l.inset || void 0,
+      "data-ui-form-note": "",
+      "data-syno-pkg-land-ui": ""
+    }, [
+      v.value ? (o(), s(i, { key: 0 }, [
+        r("div", S, n(a(t).title), 1),
+        r("ul", B, [
+          (o(!0), s(i, null, x(a(t).items, (w, h) => (o(), s("li", { key: h }, n(w), 1))), 128))
+        ]),
+        e.$slots.default ? (o(), s("div", C, [
+          m(e.$slots, "default")
+        ])) : p("", !0)
+      ], 64)) : (o(), s("p", F, [
+        r("span", V, n(a(t).title), 1),
+        u[0] || (u[0] = f(n(" "), -1)),
+        a(t).items?.length ? (o(), s(i, { key: 0 }, [
+          f(n(a(t).items[0]) + n(e.$slots.default ? " " : ""), 1)
+        ], 64)) : p("", !0),
+        m(e.$slots, "default")
+      ]))
+    ], 14, z));
+  }
+});
+export {
+  P as default
+};

package/dist/modules/components/composite/form-note/FormNote2.vue.js

@@ -0,0 +1,4 @@
+import f from "./FormNote.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/image-lightbox/ImageLightbox.vue.js

@@ -0,0 +1,243 @@
+import { defineComponent as Y, ref as y, watch as R, computed as d, openBlock as c, createBlock as G, unref as l, withCtx as v, createVNode as i, isRef as I, createElementVNode as p, createTextVNode as E, toDisplayString as S, createElementBlock as h, normalizeClass as _, createCommentVNode as $, withModifiers as K, normalizeStyle as M, Fragment as q } from "vue";
+import { DialogRoot_default as J } from "../../../vendor/reka-ui/dist/Dialog/DialogRoot.js";
+import { DialogContent_default as Q } from "../../../vendor/reka-ui/dist/Dialog/DialogContent.js";
+import { DialogDescription_default as Z } from "../../../vendor/reka-ui/dist/Dialog/DialogDescription.js";
+import { DialogOverlay_default as ee } from "../../../vendor/reka-ui/dist/Dialog/DialogOverlay.js";
+import { DialogPortal_default as te } from "../../../vendor/reka-ui/dist/Dialog/DialogPortal.js";
+import { DialogTitle_default as ae } from "../../../vendor/reka-ui/dist/Dialog/DialogTitle.js";
+import { RotateCw as le, Download as ie, X as oe, ChevronLeft as ne, ChevronRight as se } from "@lucide/vue";
+import { useUiText as re } from "../../../i18n/text.js";
+import { VelocityEstimator as ue, swipeCommits as de, GESTURE_THRESHOLDS as ce } from "../../../interaction/velocity.js";
+import { injectFloatingHost as me } from "../../../composables/floatingHost.js";
+import { isPicture as fe } from "../../../lib/files.js";
+import ve from "../../primitives/dialog/FloatingLayer.vue.js";
+import pe from "../../primitives/icon/FileTypeIcon.vue.js";
+import he from "../../primitives/spinner/Spinner.vue.js";
+const ge = { class: "flex min-h-14 shrink-0 items-center gap-3 px-3 pt-[env(safe-area-inset-top)]" }, xe = ["aria-label", "data-turns"], be = ["href", "download", "aria-label"], we = ["aria-label"], ye = ["src", "alt", "width", "height"], _e = {
+  key: 2,
+  class: "flex flex-col items-center gap-3 text-center",
+  "data-ui-lightbox-file": ""
+}, ke = { class: "max-w-[80vw] text-[length:var(--ui-font-size)] [overflow-wrap:anywhere]" }, Ce = ["aria-label"], ze = ["aria-label"], k = "flex size-11 shrink-0 items-center justify-center rounded-full border-0 bg-black/45 text-white outline-none hover:bg-black/65 focus-visible:shadow-[var(--ui-shadow-focus)]", Le = /* @__PURE__ */ Y({
+  __name: "ImageLightbox",
+  props: {
+    items: {},
+    open: { type: Boolean, default: !1 },
+    index: { default: 0 }
+  },
+  emits: ["update:open", "update:index"],
+  setup(T, { emit: H }) {
+    const m = T, C = H, n = re(), f = y(m.index);
+    R(() => [m.index, m.open], ([e]) => {
+      f.value = e;
+    });
+    const r = d(() => m.items.length), a = d(() => m.items[Math.min(Math.max(f.value, 0), r.value - 1)]), z = d(() => a.value && fe(a.value) ? a.value.preview ?? a.value.url : void 0), g = d(() => a.value?.state ?? "ready"), D = d(() => g.value === "missing" ? n("File is missing") : g.value === "changed" ? n("File has changed") : g.value === "failed" ? n("Can't show this file") : ""), x = y(!1), u = y(0);
+    R(a, () => {
+      x.value = !1, u.value = 0;
+    });
+    const P = y(), b = y({ width: 0, height: 0 });
+    function X() {
+      const e = P.value;
+      e && (b.value = { width: e.clientWidth, height: e.clientHeight });
+    }
+    function j() {
+      X(), u.value = (u.value + 1) % 4;
+    }
+    const N = d(() => {
+      if (!u.value) return;
+      const e = u.value % 2 === 1 && b.value.width > 0 && b.value.height > 0;
+      return {
+        transform: `rotate(${u.value * 90}deg)`,
+        ...e && { maxWidth: `${b.value.height}px`, maxHeight: `${b.value.width}px` }
+      };
+    });
+    function w(e) {
+      r.value < 2 || (f.value = (f.value + e + r.value) % r.value, C("update:index", f.value));
+    }
+    function V(e) {
+      const t = getComputedStyle(e.currentTarget).direction === "rtl";
+      if (e.key === "ArrowRight") w(t ? -1 : 1);
+      else if (e.key === "ArrowLeft") w(t ? 1 : -1);
+      else return;
+      e.preventDefault();
+    }
+    let o = null;
+    function B(e) {
+      if (e.pointerType === "mouse") return;
+      const t = new ue();
+      t.add(e.clientX, e.timeStamp), o = { x: e.clientX, y: e.clientY, velocity: t };
+    }
+    function F(e) {
+      o?.velocity.add(e.clientX, e.timeStamp);
+    }
+    function L(e) {
+      if (!o) return;
+      const t = e.clientX - o.x, s = e.clientY - o.y;
+      o.velocity.add(e.clientX, e.timeStamp);
+      const O = o.velocity.velocity(e.timeStamp);
+      if (o = null, !t || Math.abs(t) <= Math.abs(s) * 1.5) return;
+      const W = Math.sign(t);
+      de(Math.abs(t), O * W, ce.swipeDistance) && w(t < 0 ? 1 : -1);
+    }
+    const U = me(), A = d(() => U?.element.value ?? null);
+    return (e, t) => (c(), G(l(J), {
+      open: m.open,
+      "onUpdate:open": t[6] || (t[6] = (s) => C("update:open", s))
+    }, {
+      default: v(() => [
+        i(l(te), null, {
+          default: v(() => [
+            i(l(ee), {
+              class: "fixed inset-0 z-[1300] bg-black/90",
+              "data-ui-lightbox-overlay": ""
+            }),
+            i(ve, { host: A.value }, {
+              default: v(() => [
+                i(l(Q), {
+                  class: "fixed inset-0 z-[1301] flex flex-col text-white outline-none",
+                  "data-ui-lightbox": "",
+                  "data-syno-pkg-land-ui": "",
+                  onKeydown: V,
+                  onPointerdown: B,
+                  onPointermove: F,
+                  onPointerup: L,
+                  onPointercancel: t[5] || (t[5] = (s) => I(o) ? o.value = null : o = null)
+                }, {
+                  default: v(() => [
+                    p("header", ge, [
+                      i(l(ae), {
+                        class: "m-0 min-w-0 flex-1 truncate text-[length:var(--ui-font-size)] font-semibold",
+                        "data-ui-lightbox-name": ""
+                      }, {
+                        default: v(() => [
+                          E(S(a.value?.name), 1)
+                        ]),
+                        _: 1
+                      }),
+                      i(l(Z), {
+                        class: "m-0 shrink-0 text-[length:var(--ui-font-size-sm)] tabular-nums text-white/75",
+                        "data-ui-lightbox-count": ""
+                      }, {
+                        default: v(() => [
+                          E(S(r.value > 1 ? `${f.value + 1} / ${r.value}` : ""), 1)
+                        ]),
+                        _: 1
+                      }),
+                      z.value && !D.value && !x.value && g.value !== "processing" ? (c(), h("button", {
+                        key: 0,
+                        type: "button",
+                        class: _(k),
+                        "aria-label": l(n)("Rotate"),
+                        "data-ui-lightbox-rotate": "",
+                        "data-turns": u.value || void 0,
+                        onClick: j
+                      }, [
+                        i(l(le), {
+                          class: "size-5",
+                          "aria-hidden": "true"
+                        })
+                      ], 8, xe)) : $("", !0),
+                      a.value?.url ? (c(), h("a", {
+                        key: 1,
+                        href: a.value.url,
+                        download: a.value.name,
+                        class: _(k),
+                        "aria-label": l(n)("Download"),
+                        "data-ui-lightbox-download": ""
+                      }, [
+                        i(l(ie), {
+                          class: "size-5",
+                          "aria-hidden": "true"
+                        })
+                      ], 8, be)) : $("", !0),
+                      p("button", {
+                        type: "button",
+                        class: _(k),
+                        "aria-label": l(n)("Close"),
+                        "data-ui-lightbox-close": "",
+                        onClick: t[0] || (t[0] = (s) => C("update:open", !1))
+                      }, [
+                        i(l(oe), {
+                          class: "size-5",
+                          "aria-hidden": "true"
+                        })
+                      ], 8, we)
+                    ]),
+                    p("div", {
+                      ref_key: "stage",
+                      ref: P,
+                      class: "relative flex min-h-0 flex-1 items-center justify-center overflow-hidden px-2 pb-[max(8px,env(safe-area-inset-bottom))]",
+                      "data-ui-lightbox-stage": "",
+                      onClick: t[4] || (t[4] = K((s) => C("update:open", !1), ["self"]))
+                    }, [
+                      a.value && g.value === "processing" ? (c(), h("div", {
+                        key: 0,
+                        class: "flex aspect-[4/3] w-[min(80vw,640px)] items-center justify-center rounded-[var(--ui-radius-container)]",
+                        style: M({ background: a.value.dominant ?? "rgb(255 255 255 / 0.08)" }),
+                        "data-ui-lightbox-processing": ""
+                      }, [
+                        i(he, {
+                          label: l(n)("Processing")
+                        }, null, 8, ["label"])
+                      ], 4)) : z.value && !D.value && !x.value ? (c(), h("img", {
+                        key: z.value,
+                        src: z.value,
+                        alt: a.value?.name,
+                        width: a.value?.width,
+                        height: a.value?.height,
+                        class: "max-h-full max-w-full select-none object-contain",
+                        style: M({ background: a.value?.dominant, ...N.value }),
+                        draggable: "false",
+                        "data-ui-lightbox-image": "",
+                        onError: t[1] || (t[1] = (s) => x.value = !0)
+                      }, null, 44, ye)) : a.value ? (c(), h("div", _e, [
+                        i(pe, {
+                          name: a.value.name,
+                          size: [64, 64],
+                          class: "opacity-90"
+                        }, null, 8, ["name"]),
+                        p("span", ke, S(D.value || (x.value ? l(n)("Can't show this file") : a.value.name)), 1)
+                      ])) : $("", !0),
+                      r.value > 1 ? (c(), h(q, { key: 3 }, [
+                        p("button", {
+                          type: "button",
+                          class: _([k, "absolute start-3 top-1/2 -translate-y-1/2"]),
+                          "aria-label": l(n)("Previous file"),
+                          "data-ui-lightbox-previous": "",
+                          onClick: t[2] || (t[2] = (s) => w(-1))
+                        }, [
+                          i(l(ne), {
+                            class: "size-6 rtl:-scale-x-100",
+                            "aria-hidden": "true"
+                          })
+                        ], 10, Ce),
+                        p("button", {
+                          type: "button",
+                          class: _([k, "absolute end-3 top-1/2 -translate-y-1/2"]),
+                          "aria-label": l(n)("Next file"),
+                          "data-ui-lightbox-next": "",
+                          onClick: t[3] || (t[3] = (s) => w(1))
+                        }, [
+                          i(l(se), {
+                            class: "size-6 rtl:-scale-x-100",
+                            "aria-hidden": "true"
+                          })
+                        ], 10, ze)
+                      ], 64)) : $("", !0)
+                    ], 512)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["host"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["open"]));
+  }
+});
+export {
+  Le as default
+};

package/dist/modules/components/composite/image-lightbox/ImageLightbox2.vue.js

@@ -0,0 +1,4 @@
+import f from "./ImageLightbox.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/info-box/InfoBox.vue.js

@@ -0,0 +1,24 @@
+import { defineComponent as i, openBlock as e, createElementBlock as o, toDisplayString as a, createCommentVNode as r, renderSlot as l } from "vue";
+const s = {
+  class: "min-w-0 rounded-[var(--ui-radius-inner)] bg-[var(--ui-info-box-bg)] px-6 py-3 text-[length:var(--ui-font-size-control)] leading-5 text-[var(--ui-text)] [overflow-wrap:anywhere]",
+  "data-ui-info-box": "",
+  "data-syno-pkg-land-ui": ""
+}, d = {
+  key: 0,
+  class: "mb-2",
+  "data-ui-info-box-title": ""
+}, f = /* @__PURE__ */ i({
+  __name: "InfoBox",
+  props: {
+    title: {}
+  },
+  setup(t) {
+    return (n, u) => (e(), o("div", s, [
+      t.title ? (e(), o("div", d, a(t.title), 1)) : r("", !0),
+      l(n.$slots, "default")
+    ]));
+  }
+});
+export {
+  f as default
+};

package/dist/modules/components/composite/info-box/InfoBox2.vue.js

@@ -0,0 +1,4 @@
+import f from "./InfoBox.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/key-value-row/KeyValueRow.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as b, computed as n, openBlock as a, createElementBlock as l, normalizeStyle as g, createElementVNode as u, normalizeClass as f, renderSlot as m, createTextVNode as o, toDisplayString as r, Fragment as s, renderList as h, createCommentVNode as x } from "vue";
+import { usePhonePresentation as w } from "../../primitives/sheet/phone.js";
+const C = ["data-stacked"], z = { class: "min-w-0 break-words [word-break:keep-all] text-[var(--ui-text)]" }, V = { key: 0 }, N = /* @__PURE__ */ b({
+  __name: "KeyValueRow",
+  props: {
+    label: {},
+    value: {},
+    labelWidth: {},
+    stacked: { type: Boolean }
+  },
+  setup(e) {
+    const t = e, c = n(() => typeof t.value == "string" ? t.value.split(new RegExp("(?<=[/\\\\_.-])")) : []), k = w(), v = n(() => t.labelWidth ? k.value ? `min(${t.labelWidth}, 40%)` : t.labelWidth : "var(--ui-label-column)"), p = n(() => t.stacked ? { gridTemplateColumns: "minmax(0, 1fr)", rowGap: "0" } : {
+      gridTemplateColumns: `minmax(0, ${v.value}) minmax(0, 1fr)`,
+      columnGap: "var(--ui-label-gap)"
+    });
+    return (i, W) => (a(), l("dl", {
+      class: "ui-key-value-row grid min-w-0 gap-y-1 py-1 text-[length:var(--ui-font-size-control)] leading-5",
+      style: g(p.value),
+      "data-stacked": e.stacked ? "" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      u("dt", {
+        class: f(["min-w-0 break-words [word-break:keep-all]", e.stacked ? "text-[length:var(--ui-font-size-sm)] leading-4 text-[var(--ui-text-secondary)]" : "text-[var(--ui-text)]"])
+      }, [
+        m(i.$slots, "label", {}, () => [
+          o(r(e.label), 1)
+        ])
+      ], 2),
+      u("dd", z, [
+        m(i.$slots, "default", {}, () => [
+          typeof e.value == "string" ? (a(!0), l(s, { key: 0 }, h(c.value, (y, d) => (a(), l(s, { key: d }, [
+            d ? (a(), l("wbr", V)) : x("", !0),
+            o(r(y), 1)
+          ], 64))), 128)) : (a(), l(s, { key: 1 }, [
+            o(r(e.value), 1)
+          ], 64))
+        ])
+      ])
+    ], 12, C));
+  }
+});
+export {
+  N as default
+};

package/dist/modules/components/composite/key-value-row/KeyValueRow2.vue.js

@@ -0,0 +1,4 @@
+import f from "./KeyValueRow.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/list-item/ListItem.vue.js

@@ -0,0 +1,69 @@
+import { defineComponent as r, openBlock as t, createElementBlock as s, createElementVNode as l, renderSlot as i, createCommentVNode as a, createTextVNode as n, toDisplayString as d } from "vue";
+const c = {
+  role: "listitem",
+  class: "ui-list-item flex flex-wrap items-start gap-x-[var(--ui-space-4)] gap-y-[var(--ui-space-2)] py-[var(--ui-space-3)]",
+  "data-syno-pkg-land-ui": ""
+}, p = { class: "flex min-w-60 flex-1 items-start gap-[var(--ui-space-3)]" }, m = {
+  key: 0,
+  "data-ui-list-item-leading": "",
+  class: "flex shrink-0 items-center"
+}, u = { class: "min-w-0 flex-1" }, f = { class: "flex flex-wrap items-center gap-x-[var(--ui-space-2)] gap-y-1" }, v = {
+  "data-ui-list-item-title": "",
+  class: "font-semibold leading-5 text-[var(--ui-text)]"
+}, g = {
+  key: 0,
+  "data-ui-list-item-meta": "",
+  class: "flex flex-wrap items-center gap-[var(--ui-space-1)]"
+}, h = {
+  key: 0,
+  "data-ui-list-item-description": "",
+  class: "mt-1 leading-5 text-[var(--ui-text-secondary)]"
+}, y = {
+  key: 1,
+  class: "mt-1 leading-5"
+}, _ = {
+  key: 0,
+  "data-ui-list-item-actions": "",
+  class: "flex shrink-0 flex-wrap items-center gap-[var(--ui-space-2)]"
+}, x = /* @__PURE__ */ r({
+  __name: "ListItem",
+  props: {
+    title: {},
+    description: {}
+  },
+  setup(o) {
+    return (e, $) => (t(), s("div", c, [
+      l("div", p, [
+        e.$slots.leading ? (t(), s("div", m, [
+          i(e.$slots, "leading")
+        ])) : a("", !0),
+        l("div", u, [
+          l("div", f, [
+            l("span", v, [
+              i(e.$slots, "title", {}, () => [
+                n(d(o.title), 1)
+              ])
+            ]),
+            e.$slots.meta ? (t(), s("span", g, [
+              i(e.$slots, "meta")
+            ])) : a("", !0)
+          ]),
+          o.description || e.$slots.description ? (t(), s("div", h, [
+            i(e.$slots, "description", {}, () => [
+              n(d(o.description), 1)
+            ])
+          ])) : a("", !0),
+          e.$slots.default ? (t(), s("div", y, [
+            i(e.$slots, "default")
+          ])) : a("", !0)
+        ])
+      ]),
+      e.$slots.actions ? (t(), s("div", _, [
+        i(e.$slots, "actions")
+      ])) : a("", !0)
+    ]));
+  }
+});
+export {
+  x as default
+};

package/dist/modules/components/composite/list-item/ListItem2.vue.js

@@ -0,0 +1,4 @@
+import f from "./ListItem.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/composite/mention-list/MentionList.vue.js

@@ -0,0 +1,99 @@
+import { defineComponent as h, openBlock as i, createBlock as p, unref as o, withCtx as d, createCommentVNode as u, createVNode as m, mergeProps as y, createElementVNode as v, createElementBlock as r, Fragment as k, renderList as w, withModifiers as C, normalizeClass as P, toDisplayString as f } from "vue";
+import { PopoverRoot_default as z } from "../../../vendor/reka-ui/dist/Popover/PopoverRoot.js";
+import { PopoverAnchor_default as A } from "../../../vendor/reka-ui/dist/Popover/PopoverAnchor.js";
+import { PopoverContent_default as B } from "../../../vendor/reka-ui/dist/Popover/PopoverContent.js";
+import { PopoverPortal_default as F } from "../../../vendor/reka-ui/dist/Popover/PopoverPortal.js";
+import { useUiText as L } from "../../../i18n/text.js";
+import { useFloating as M, FLOATING_SIZE_CLASS as N } from "../../primitives/popover/floating.js";
+import $ from "../comment-item/PersonInitials.vue.js";
+const S = ["id", "aria-label"], D = ["id", "aria-selected", "data-ui-mention-option", "onMouseenter", "onClick"], E = { class: "min-w-0 flex-1 truncate" }, V = {
+  key: 0,
+  class: "max-w-[45%] shrink-0 truncate text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]"
+}, I = {
+  key: 0,
+  class: "px-2 py-2 text-[length:var(--ui-font-size-sm)] text-[var(--ui-text-secondary)]",
+  "data-ui-mention-empty": ""
+}, J = /* @__PURE__ */ h({
+  __name: "MentionList",
+  props: {
+    open: { type: Boolean },
+    reference: {},
+    people: {},
+    active: { default: 0 },
+    id: {},
+    loading: { type: Boolean, default: !1 },
+    boundary: { default: void 0 }
+  },
+  emits: ["choose", "hover", "close"],
+  setup(t, { emit: g }) {
+    const c = t, l = g, s = L(), b = M(() => c.boundary, () => c.open);
+    return (O, n) => (i(), p(o(z), {
+      open: t.open && !!t.reference,
+      "onUpdate:open": n[3] || (n[3] = (e) => {
+        e || l("close");
+      })
+    }, {
+      default: d(() => [
+        t.reference ? (i(), p(o(A), {
+          key: 0,
+          reference: t.reference
+        }, null, 8, ["reference"])) : u("", !0),
+        m(o(F), null, {
+          default: d(() => [
+            m(o(B), y({
+              "data-ui-popup": "",
+              side: "bottom",
+              align: "start",
+              "side-offset": 4
+            }, o(b), {
+              class: ["z-[1450] w-80 overflow-y-auto rounded-[var(--ui-radius-popover)] border border-[var(--ui-border)] bg-[var(--ui-surface-raised)] p-1 shadow-[var(--ui-shadow-menu)] outline-none", o(N)],
+              "data-ui-mention-list": "",
+              "data-syno-pkg-land-ui": "",
+              onOpenAutoFocus: n[1] || (n[1] = (e) => e.preventDefault()),
+              onCloseAutoFocus: n[2] || (n[2] = (e) => e.preventDefault())
+            }), {
+              default: d(() => [
+                v("div", {
+                  id: t.id,
+                  role: "listbox",
+                  "aria-label": o(s)("People"),
+                  class: "max-h-[min(16rem,var(--reka-popover-content-available-height))] overflow-auto"
+                }, [
+                  (i(!0), r(k, null, w(t.people, (e, a) => (i(), r("button", {
+                    id: `${t.id}-${a}`,
+                    key: e.id,
+                    type: "button",
+                    role: "option",
+                    tabindex: "-1",
+                    "aria-selected": a === t.active,
+                    class: P(["flex min-h-9 w-full items-center gap-2 rounded-[var(--ui-radius-inner)] border-0 bg-transparent px-2 py-1 text-start text-[length:var(--ui-font-size)] text-[var(--ui-text)] outline-none [@media(pointer:coarse)]:min-h-11", a === t.active && "bg-[var(--ui-primary-soft)]"]),
+                    "data-ui-mention-option": e.id,
+                    onMouseenter: (x) => l("hover", a),
+                    onMousedown: n[0] || (n[0] = C(() => {
+                    }, ["prevent"])),
+                    onClick: (x) => l("choose", e)
+                  }, [
+                    m($, {
+                      id: e.id,
+                      name: e.label,
+                      size: "sm"
+                    }, null, 8, ["id", "name"]),
+                    v("span", E, f(e.label), 1),
+                    e.description ? (i(), r("span", V, f(e.description), 1)) : u("", !0)
+                  ], 42, D))), 128)),
+                  t.people.length ? u("", !0) : (i(), r("div", I, f(t.loading ? o(s)("Loading…") : o(s)("No matching people")), 1))
+                ], 8, S)
+              ]),
+              _: 1
+            }, 16, ["class"])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["open"]));
+  }
+});
+export {
+  J as default
+};

package/dist/modules/components/composite/mention-list/MentionList2.vue.js

@@ -0,0 +1,4 @@
+import f from "./MentionList.vue.js";
+export {
+  f as default
+};