@wssto2/vue-core 0.4.24 → 0.4.25

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.4.25 — 2026-10-12
+
+The photo viewer's actions on a phone. From ARV cutover g (wave 1, the vehicle gallery). Two items, one commit each.
+
+### Requires
+- go-core unchanged: **`v1.7.0`**; **`vue` 3.5.19 or later**.
+
+### Added
+- **`PhotoViewerAction`** (`@wssto2/vue-core/overlay`): the content of `PhotoViewer`'s `#actions` slot. `label`, `tone?: "critical"` (the destructive one, in the danger colour), `disabled?` (stays focusable, `aria-disabled`, emits nothing); emits `select`. A 44 px text button made for the viewer's dark surface, contrast-tested. ARV: `VehiclePhotoGallery.vue` replaces its hand-styled `<button>`s ("Postavi kao naslovnu", "Obriši") and their `text-xs` with two `PhotoViewerAction`s, `data-test` kept.
+
+### Changes to existing behaviour
+- **On a phone the `#actions` move to a bottom toolbar.** Where `useCompactPresentation()` is true the slot renders once, in a centred toolbar (`data-test="photo-toolbar"`, safe-area aware) between the photo and the thumbnail strip; the header keeps the counter, rotate, download and close. On a wide screen nothing changes (the actions stay in the header). No `#actions`, no toolbar. ARV: the vehicle gallery's viewer (390 px: the counter is no longer cut to "2." and the actions no longer shrink).
+- **The counter is never cut.** In the header only the title truncates; the counter stays whole.
+- **Pinned by tests that were updated:** none.
+
 ## 0.4.24 — 2026-10-11
 
 A refusal in the server's words, a dialog that only shows, a new record with a start. From ARV cutover e8a (both lanes). Three items, one commit each.

package/dist/PhotoViewer.vue_vue_type_script_setup_true_lang-CY5EZiyK.js

@@ -0,0 +1,433 @@
+import { defineComponent as Ne, useModel as Xe, ref as k, useTemplateRef as se, watch as Q, computed as g, onBeforeUnmount as Ve, nextTick as ye, onMounted as Ye, openBlock as h, createBlock as Ze, Teleport as je, createElementBlock as m, createVNode as C, Transition as Ee, withCtx as Ke, unref as s, createElementVNode as p, toDisplayString as ee, createCommentVNode as w, renderSlot as be, normalizeClass as M, withModifiers as re, normalizeStyle as te, Fragment as We, renderList as Ue, mergeModels as _e } from "vue";
+import { useI18n as Fe } from "vue-i18n";
+import { _ as I } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { u as He } from "./mediaQuery-CygcXmFW.js";
+import { u as qe } from "./useDialog-CXR3hN0G.js";
+const ke = [1, 1.5, 2, 3, 4, 5], Me = 1, ue = 5, Ge = (a) => Math.min(ue, Math.max(Me, a)), ze = (a, l) => l % 2 === 0 ? a : { width: a.height, height: a.width };
+function Je(a, l, r) {
+  const i = ze(a, r);
+  if (i.width <= 0 || i.height <= 0 || l.width <= 0 || l.height <= 0) return { width: 0, height: 0 };
+  const o = Math.min(l.width / i.width, l.height / i.height);
+  return { width: a.width * o, height: a.height * o };
+}
+function Qe(a, l, r) {
+  return { x: Math.max(0, (a.width * r - l.width) / 2), y: Math.max(0, (a.height * r - l.height) / 2) };
+}
+function X(a, l, r, i) {
+  const o = Qe(l, r, i);
+  return { x: Math.min(o.x, Math.max(-o.x, a.x)) + 0, y: Math.min(o.y, Math.max(-o.y, a.y)) + 0 };
+}
+function et(a, l, r, i, o) {
+  const z = Ge(l), u = z / a.zoom, $ = { x: r.x - (r.x - a.pan.x) * u, y: r.y - (r.y - a.pan.y) * u };
+  return { zoom: z, pan: X($, i, o, z) };
+}
+function tt(a, l) {
+  return l === 1 ? ke.find((i) => i > a + 1e-3) ?? ue : [...ke].reverse().find((i) => i < a - 1e-3) ?? Me;
+}
+function at(a, l, r, i, o) {
+  const z = Math.min(o.width / a.width, o.height / a.height), u = { width: a.width * z, height: a.height * z }, $ = { width: a.width * r, height: a.height * r }, T = { width: Math.min(1, l.width / $.width), height: Math.min(1, l.height / $.height) }, O = { x: 0.5 - i.x / $.width, y: 0.5 - i.y / $.height };
+  return {
+    image: u,
+    view: { x: (O.x - T.width / 2) * u.width, y: (O.y - T.height / 2) * u.height, width: T.width * u.width, height: T.height * u.height }
+  };
+}
+function it(a, l, r, i) {
+  return X({ x: (0.5 - a.x) * l.width * i, y: (0.5 - a.y) * l.height * i }, l, r, i);
+}
+const ot = {
+  key: 0,
+  class: "relative z-9999"
+}, nt = ["aria-label"], lt = {
+  "data-test": "photo-header",
+  class: "flex items-center gap-2 px-4 pt-[max(0.875rem,var(--app-safe-top))] pb-3.5 md:px-4.5"
+}, st = { class: "flex min-w-0 text-headline font-semibold" }, rt = {
+  key: 0,
+  class: "truncate"
+}, ut = {
+  key: 1,
+  class: "shrink-0 whitespace-pre"
+}, ct = {
+  class: "shrink-0 whitespace-nowrap",
+  "aria-live": "polite",
+  "data-test": "photo-counter"
+}, dt = ["aria-label", "aria-disabled"], ht = {
+  class: "w-13 text-center text-subheadline tabular-nums compact:hidden",
+  "data-test": "zoom-percent"
+}, vt = ["aria-label", "aria-disabled"], mt = ["aria-label"], pt = ["href", "download", "aria-label"], ft = ["aria-label"], gt = { class: "flex min-h-0 grow items-center gap-4 px-4 md:px-4.5" }, wt = ["aria-label", "aria-disabled"], xt = ["src", "alt"], yt = ["src"], bt = ["aria-label", "aria-disabled"], _t = {
+  key: 0,
+  "data-test": "photo-toolbar",
+  class: "flex shrink-0 items-center justify-center gap-2 px-4 pt-3 pb-1"
+}, kt = ["aria-label", "aria-current", "onClick"], Mt = ["src"], zt = {
+  key: 2,
+  class: "h-[max(1.25rem,var(--app-safe-bottom))] shrink-0"
+}, $t = {
+  class: "sr-only",
+  "aria-live": "polite"
+}, Pt = 8, Ct = 300, B = "flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full bg-white/8 text-[#f1f5f3] transition-colors duration-motion-fast hover:bg-white/16 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6ee7b7] aria-disabled:cursor-default aria-disabled:opacity-30 aria-disabled:hover:bg-white/8", Bt = /* @__PURE__ */ Ne({
+  __name: "PhotoViewer",
+  props: /* @__PURE__ */ _e({
+    items: {},
+    title: { default: void 0 }
+  }, {
+    index: { default: 0 },
+    indexModifiers: {}
+  }),
+  emits: /* @__PURE__ */ _e(["presented", "dismissed"], ["update:index"]),
+  setup(a, { expose: l, emit: r }) {
+    const i = a, o = Xe(a, "index"), z = r, { t: u } = Fe(), $ = He(), T = k(null), O = se("stage"), $e = se("image"), ce = se("strip"), E = qe(T, { initialFocus: "panel", onPresented: () => z("presented"), onDismissed: () => z("dismissed") }), { isOpen: K } = E, ae = k(!1);
+    Q(K, (e) => {
+      e && (ae.value = !0);
+    }, { flush: "sync" });
+    const Pe = () => {
+      K.value || (ae.value = !1);
+    }, d = k(1), c = k({ x: 0, y: 0 }), P = k(0), W = k({ width: 0, height: 0 }), x = k({ width: 0, height: 0 }), b = k(0), ie = k(!1), V = k(null), v = g(() => i.items[o.value]), D = g(() => Je(W.value, x.value, P.value)), L = g(() => ze(D.value, P.value)), de = g(() => D.value.width > 0), Ce = g(() => Math.round(d.value * 100)), A = g(() => d.value > 1.001), he = g(() => o.value > 0), ve = g(() => o.value < i.items.length - 1), Te = g(() => ({
+      width: `${D.value.width}px`,
+      height: `${D.value.height}px`,
+      marginLeft: `${-D.value.width / 2}px`,
+      marginTop: `${-D.value.height / 2}px`,
+      transform: `translate(${c.value.x + b.value}px, ${c.value.y}px) scale(${d.value}) rotate(${P.value * 90}deg)`
+    }));
+    function U() {
+      d.value = 1, c.value = { x: 0, y: 0 }, b.value = 0;
+    }
+    function F() {
+      const e = O.value;
+      e && (x.value = { width: e.clientWidth, height: e.clientHeight }), oe();
+    }
+    function oe() {
+      const e = $e.value;
+      e && e.naturalWidth > 0 && (W.value = { width: e.naturalWidth, height: e.naturalHeight });
+    }
+    let H = null;
+    Q(O, (e) => {
+      H?.disconnect(), e && (F(), typeof ResizeObserver < "u" && (H = new ResizeObserver(() => {
+        F(), c.value = X(c.value, L.value, x.value, d.value);
+      }), H.observe(e)));
+    }), Ve(() => H?.disconnect()), Q(o, () => {
+      U(), P.value = 0, W.value = { width: 0, height: 0 }, ye(() => {
+        oe(), ce.value?.querySelector("[aria-current=true]")?.scrollIntoView?.({ inline: "center", block: "nearest" });
+      });
+    }), Q(() => i.items.length, (e) => {
+      e === 0 ? E.dismiss() : o.value > e - 1 && (o.value = e - 1);
+    });
+    function Oe(e = 0) {
+      o.value = Math.min(Math.max(0, e), Math.max(0, i.items.length - 1)), U(), P.value = 0, W.value = { width: 0, height: 0 }, V.value = null, E.present(), ye(F);
+    }
+    const me = () => E.dismiss();
+    l({ present: Oe, dismiss: me });
+    function Y(e) {
+      const t = o.value + e;
+      t < 0 || t > i.items.length - 1 || (V.value = e === 1 ? "forward" : "back", o.value = t);
+    }
+    function R(e) {
+      q(tt(d.value, e), { x: 0, y: 0 });
+    }
+    function q(e, t) {
+      const n = et({ zoom: d.value, pan: c.value }, e, t, L.value, x.value);
+      d.value = n.zoom, c.value = n.pan;
+    }
+    function ne() {
+      P.value = (P.value + 3) % 4, c.value = X(c.value, L.value, x.value, d.value);
+    }
+    function Le(e) {
+      if (e.altKey || e.ctrlKey || e.metaKey) return;
+      const n = {
+        ArrowLeft: () => Y(-1),
+        ArrowRight: () => Y(1),
+        "+": () => R(1),
+        "=": () => R(1),
+        "-": () => R(-1),
+        _: () => R(-1),
+        0: U,
+        r: ne,
+        R: ne
+      }[e.key];
+      n && (e.preventDefault(), n());
+    }
+    const le = (e) => {
+      const t = O.value?.getBoundingClientRect();
+      return { x: e.clientX - (t ? t.left + t.width / 2 : 0), y: e.clientY - (t ? t.top + t.height / 2 : 0) };
+    }, _ = /* @__PURE__ */ new Map();
+    let Z = !1, pe = 0, N = { x: 0, y: 0 }, j = null;
+    const fe = () => {
+      const [e, t] = [..._.values()];
+      return { x: (e.x + t.x) / 2, y: (e.y + t.y) / 2 };
+    }, ge = () => {
+      const [e, t] = [..._.values()];
+      return Math.hypot(e.x - t.x, e.y - t.y);
+    };
+    function Se(e) {
+      e.pointerType === "mouse" && e.button !== 0 || (O.value?.setPointerCapture?.(e.pointerId), _.set(e.pointerId, { x: e.clientX, y: e.clientY }), ie.value = !0, _.size === 1 ? (Z = !1, pe = Date.now(), N = { x: 0, y: 0 }) : Z = !0);
+    }
+    function Ie(e) {
+      const t = _.get(e.pointerId);
+      if (!t) return;
+      const n = { x: e.clientX, y: e.clientY };
+      if (_.size === 2) {
+        const [G, J] = [ge(), fe()];
+        _.set(e.pointerId, n);
+        const S = fe();
+        q(d.value * (ge() / (G || 1)), le({ clientX: S.x, clientY: S.y })), c.value = X({ x: c.value.x + S.x - J.x, y: c.value.y + S.y - J.y }, L.value, x.value, d.value);
+        return;
+      }
+      _.set(e.pointerId, n);
+      const f = { x: n.x - t.x, y: n.y - t.y };
+      N = { x: N.x + f.x, y: N.y + f.y }, !(!Z && Math.hypot(N.x, N.y) < Pt) && (Z = !0, A.value ? c.value = X({ x: c.value.x + f.x, y: c.value.y + f.y }, L.value, x.value, d.value) : b.value = (b.value + f.x) * (b.value + f.x < 0 && !ve.value || b.value + f.x > 0 && !he.value ? 0.6 : 1));
+    }
+    function we(e, t = !1) {
+      if (!_.delete(e.pointerId) || _.size > 0) return;
+      ie.value = !1;
+      const n = le(e);
+      if (!Z && !t) {
+        const S = j && Date.now() - j.at < Ct && Math.hypot(n.x - j.point.x, n.y - j.point.y) < 32;
+        j = S ? null : { at: Date.now(), point: n }, S && (A.value ? U() : q(2, n));
+        return;
+      }
+      const f = Date.now() - pe < 250 && Math.abs(b.value) > 30, G = Math.abs(b.value) > Math.max(50, x.value.width * 0.15), J = b.value;
+      b.value = 0, !t && !A.value && (G || f) && Y(J < 0 ? 1 : -1);
+    }
+    function Be(e) {
+      const t = e.deltaMode === 1 ? 16 : 1;
+      q(d.value * Math.exp(-e.deltaY * t * (e.ctrlKey ? 0.01 : 15e-4)), le(e));
+    }
+    const De = { width: 120, height: 80 }, y = g(() => de.value ? at(L.value, x.value, d.value, c.value, De) : null);
+    function xe(e) {
+      if (e.type === "pointermove" && e.buttons === 0) return;
+      const t = e.currentTarget.getBoundingClientRect();
+      t.width === 0 || t.height === 0 || (c.value = it({ x: (e.clientX - t.left) / t.width, y: (e.clientY - t.top) / t.height }, L.value, x.value, d.value));
+    }
+    const Ae = g(() => {
+      if (!y.value) return {};
+      const { width: e, height: t } = P.value % 2 === 0 ? y.value.image : { width: y.value.image.height, height: y.value.image.width };
+      return { width: `${e}px`, height: `${t}px`, marginLeft: `${-e / 2}px`, marginTop: `${-t / 2}px`, transform: `rotate(${P.value * 90}deg)` };
+    });
+    Ye(() => {
+      K.value && F();
+    });
+    const Re = g(() => i.title ?? u("core.viewer.label"));
+    return (e, t) => (h(), Ze(je, { to: "body" }, [
+      ae.value ? (h(), m("div", ot, [
+        C(Ee, {
+          appear: "",
+          "enter-active-class": "transition-opacity duration-motion-normal ease-motion-standard",
+          "enter-from-class": "opacity-0",
+          "leave-active-class": "pointer-events-none transition-opacity duration-motion-normal ease-motion-standard",
+          "leave-to-class": "opacity-0",
+          onAfterLeave: Pe
+        }, {
+          default: Ke(() => [
+            s(K) ? (h(), m("div", {
+              key: 0,
+              ref_key: "panel",
+              ref: T,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": Re.value,
+              tabindex: "-1",
+              "data-part": "panel",
+              "data-test": "photo-viewer",
+              class: "fixed inset-0 flex flex-col bg-[#0b1210] text-[#f1f5f3] outline-none",
+              onKeydown: Le
+            }, [
+              p("div", lt, [
+                p("h2", st, [
+                  i.title ? (h(), m("span", rt, ee(i.title), 1)) : w("", !0),
+                  i.title ? (h(), m("span", ut, " · ")) : w("", !0),
+                  p("span", ct, ee(s(u)("core.viewer.counter", { current: o.value + 1, total: i.items.length })), 1)
+                ]),
+                t[6] || (t[6] = p("div", { class: "grow" }, null, -1)),
+                v.value && !s($) ? be(e.$slots, "actions", {
+                  item: v.value,
+                  index: o.value
+                }, void 0, void 0, 0) : w("", !0),
+                p("button", {
+                  type: "button",
+                  class: M([B, "compact:hidden"]),
+                  "aria-label": s(u)("core.viewer.zoom_out"),
+                  "aria-disabled": !A.value,
+                  "data-test": "zoom-out",
+                  onClick: t[0] || (t[0] = (n) => R(-1))
+                }, [
+                  C(s(I), {
+                    name: "zoomOut",
+                    size: 18
+                  })
+                ], 10, dt),
+                p("p", ht, ee(s(u)("core.viewer.zoom_percent", { percent: Ce.value })), 1),
+                p("button", {
+                  type: "button",
+                  class: M([B, "compact:hidden"]),
+                  "aria-label": s(u)("core.viewer.zoom_in"),
+                  "aria-disabled": d.value >= s(ue),
+                  "data-test": "zoom-in",
+                  onClick: t[1] || (t[1] = (n) => R(1))
+                }, [
+                  C(s(I), {
+                    name: "zoomIn",
+                    size: 18
+                  })
+                ], 10, vt),
+                p("button", {
+                  type: "button",
+                  class: M(B),
+                  "aria-label": s(u)("core.viewer.rotate"),
+                  "data-test": "rotate",
+                  onClick: ne
+                }, [
+                  C(s(I), {
+                    name: "rotateCounterclockwise",
+                    size: 18
+                  })
+                ], 8, mt),
+                v.value ? (h(), m("a", {
+                  key: 1,
+                  href: v.value.src,
+                  download: v.value.downloadName ?? "",
+                  target: "_blank",
+                  rel: "noopener",
+                  class: M(B),
+                  "aria-label": s(u)("core.viewer.download"),
+                  "data-test": "download"
+                }, [
+                  C(s(I), {
+                    name: "download",
+                    size: 18
+                  })
+                ], 8, pt)) : w("", !0),
+                p("button", {
+                  type: "button",
+                  class: M([B, "bg-white/16"]),
+                  "aria-label": s(u)("core.actions.close"),
+                  "data-test": "close",
+                  onClick: me
+                }, [
+                  C(s(I), {
+                    name: "close",
+                    size: 18
+                  })
+                ], 10, ft)
+              ]),
+              p("div", gt, [
+                i.items.length > 1 ? (h(), m("button", {
+                  key: 0,
+                  type: "button",
+                  class: M([B, "size-12 compact:hidden"]),
+                  "aria-label": s(u)("core.viewer.previous"),
+                  "aria-disabled": !he.value,
+                  "data-test": "previous",
+                  onClick: t[2] || (t[2] = (n) => Y(-1))
+                }, [
+                  C(s(I), {
+                    name: "arrowLeftSLine",
+                    size: 22
+                  })
+                ], 10, wt)) : w("", !0),
+                p("div", {
+                  ref_key: "stage",
+                  ref: x,
+                  "data-test": "photo-stage",
+                  class: M(["relative h-full min-w-0 grow touch-none overflow-hidden rounded-md select-none", A.value ? "cursor-grab active:cursor-grabbing" : ""]),
+                  onPointerdown: Se,
+                  onPointermove: Ie,
+                  onPointerup: t[3] || (t[3] = (n) => we(n)),
+                  onPointercancel: t[4] || (t[4] = (n) => we(n, !0)),
+                  onWheel: re(Be, ["prevent"])
+                }, [
+                  v.value ? (h(), m("img", {
+                    key: v.value.src,
+                    ref: "image",
+                    src: v.value.src,
+                    alt: v.value.alt,
+                    draggable: "false",
+                    "data-test": "photo",
+                    class: M(["absolute top-1/2 left-1/2 max-w-none", [de.value ? "" : "opacity-0", ie.value ? "" : "transition-transform duration-motion-normal ease-motion-standard", V.value === "back" ? "animate-step-back" : V.value === "forward" ? "animate-step-in" : ""]]),
+                    style: te(Te.value),
+                    onLoad: oe
+                  }, null, 46, xt)) : w("", !0),
+                  A.value && y.value ? (h(), m("div", {
+                    key: 1,
+                    "data-test": "mini-map",
+                    class: "absolute right-3.5 bottom-3.5 overflow-hidden rounded-md bg-black/50 ring-1 ring-white/20",
+                    style: te({ width: `${y.value.image.width}px`, height: `${y.value.image.height}px` }),
+                    onPointerdown: re(xe, ["stop"]),
+                    onPointermove: re(xe, ["stop"])
+                  }, [
+                    v.value ? (h(), m("img", {
+                      key: 0,
+                      src: v.value.thumb ?? v.value.src,
+                      alt: "",
+                      draggable: "false",
+                      class: "pointer-events-none absolute top-1/2 left-1/2 max-w-none opacity-80",
+                      style: te(Ae.value)
+                    }, null, 12, yt)) : w("", !0),
+                    p("span", {
+                      class: "pointer-events-none absolute rounded-xs ring-2 ring-[#6ee7b7]",
+                      "data-test": "mini-map-view",
+                      style: te({ left: `${y.value.view.x}px`, top: `${y.value.view.y}px`, width: `${y.value.view.width}px`, height: `${y.value.view.height}px` })
+                    }, null, 4)
+                  ], 36)) : w("", !0)
+                ], 34),
+                i.items.length > 1 ? (h(), m("button", {
+                  key: 1,
+                  type: "button",
+                  class: M([B, "size-12 compact:hidden"]),
+                  "aria-label": s(u)("core.viewer.next"),
+                  "aria-disabled": !ve.value,
+                  "data-test": "next",
+                  onClick: t[5] || (t[5] = (n) => Y(1))
+                }, [
+                  C(s(I), {
+                    name: "arrowRightSLine",
+                    size: 22
+                  })
+                ], 10, bt)) : w("", !0)
+              ]),
+              s($) && v.value && e.$slots.actions ? (h(), m("div", _t, [
+                be(e.$slots, "actions", {
+                  item: v.value,
+                  index: o.value
+                })
+              ])) : w("", !0),
+              i.items.length > 1 ? (h(), m("ul", {
+                key: 1,
+                ref_key: "strip",
+                ref: ce,
+                "data-test": "photo-strip",
+                class: "flex shrink-0 justify-start gap-2 overflow-x-auto px-4 pt-4 pb-[max(1.25rem,var(--app-safe-bottom))] scrollbar-hide md:justify-center md:px-4.5"
+              }, [
+                (h(!0), m(We, null, Ue(i.items, (n, f) => (h(), m("li", {
+                  key: n.src,
+                  class: "shrink-0"
+                }, [
+                  p("button", {
+                    type: "button",
+                    "aria-label": n.alt,
+                    "aria-current": f === o.value ? "true" : void 0,
+                    "data-test": "thumbnail",
+                    class: M(["block h-11 w-16 cursor-pointer overflow-hidden rounded-[5px] bg-[#2a3431] transition-opacity duration-motion-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6ee7b7]", f === o.value ? "ring-2 ring-[#6ee7b7]" : "opacity-60 hover:opacity-100"]),
+                    onClick: (G) => {
+                      V.value = f > o.value ? "forward" : "back", o.value = f;
+                    }
+                  }, [
+                    p("img", {
+                      src: n.thumb ?? n.src,
+                      alt: "",
+                      loading: "lazy",
+                      draggable: "false",
+                      class: "size-full object-cover"
+                    }, null, 8, Mt)
+                  ], 10, kt)
+                ]))), 128))
+              ], 512)) : (h(), m("div", zt)),
+              p("span", $t, ee(v.value?.alt), 1)
+            ], 40, nt)) : w("", !0)
+          ]),
+          _: 3
+        })
+      ])) : w("", !0)
+    ]));
+  }
+});
+export {
+  Bt as _
+};

package/dist/form/index.js

@@ -36,7 +36,7 @@ import { u as It, a as We } from "../SelectField.vue_vue_type_script_setup_true_
 import { _ as $n, b as _n } from "../SelectField.vue_vue_type_script_setup_true_lang-C3FbRQW7.js";
 import { g as Cn, m as Fn } from "../options-Ba_0uLWN.js";
 import { _ as Ln } from "../OtpInput.vue_vue_type_script_setup_true_lang-gp4FfWAH.js";
-import { _ as Je } from "../PhotoViewer.vue_vue_type_script_setup_true_lang-QPCW3Xi6.js";
+import { _ as Je } from "../PhotoViewer.vue_vue_type_script_setup_true_lang-CY5EZiyK.js";
 import { _ as zn } from "../SegmentedField.vue_vue_type_script_setup_true_lang-Dg-_ZjgR.js";
 import { _ as Vn } from "../SwitchField.vue_vue_type_script_setup_true_lang-ALvJisiP.js";
 import { _ as Rn } from "../TextareaField.vue_vue_type_script_setup_true_lang-BJ4__cvJ.js";

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 /** The version of @wssto2/vue-core (kept equal to package.json by index.test.ts). */
-export declare const version = "0.4.24";
+export declare const version = "0.4.25";

package/dist/index.js

@@ -1,4 +1,4 @@
-const o = "0.4.24";
+const o = "0.4.25";
 export {
   o as version
 };

package/dist/overlay/PhotoViewer.vue.d.ts

@@ -15,8 +15,9 @@ export interface PhotoViewerItem {
  * and a strip of thumbnails. It is a dialog like `Modal`: the page behind is inert, Tab stays inside, Escape closes and focus goes back
  * to what opened it. Under reduced motion nothing animates.
  *
- * Keys: ← → photos, + − zoom, 0 fits the screen again, R rotates, Esc closes. `#actions` (given the photo on show) adds your own buttons to the header:
- * "Make cover", "Delete".
+ * Keys: ← → photos, + − zoom, 0 fits the screen again, R rotates, Esc closes. `#actions` (given the photo on show) adds your own buttons:
+ * "Make cover", "Delete". They sit in the header on a wide screen and in a toolbar under the photo on a phone (the header keeps the counter, rotate,
+ * download and close); the slot renders in one place at a time.
  *
  *   <PhotoViewer ref="viewer" :items="photos" title="VW Golf 8" />
  *   <button @click="viewer?.present(index)">…</button>        viewer.value?.dismiss()
@@ -27,7 +28,7 @@ type __VLS_Props = {
     title?: string;
 };
 type __VLS_Slots = {
-    /** Next to the zoom buttons: what the app does with the photo on show (make it the cover, delete it). */
+    /** What the app does with the photo on show (make it the cover, delete it): in the header next to the zoom buttons, in a bottom toolbar on a phone. */
     actions?: (scope: {
         item: PhotoViewerItem;
         index: number;

package/dist/overlay/PhotoViewerAction.vue.d.ts

@@ -0,0 +1,22 @@
+/**
+ * One of the app's own actions in `PhotoViewer`'s `#actions` slot ("Make cover", "Delete"), styled for the viewer's dark surface in the
+ * header and in the phone toolbar (44 px tall). `tone="critical"` is the destructive one, in the danger colour. A disabled action stays
+ * focusable (`aria-disabled`), like the viewer's own buttons at the end of their range, so focus does not fall out of the dialog.
+ *
+ *   <PhotoViewer :items="photos"><template #actions="{ index }">
+ *     <PhotoViewerAction :label="t('makeCover')" @select="makeCover(index)" />
+ *     <PhotoViewerAction :label="t('delete')" tone="critical" @select="remove(index)" />
+ *   </template></PhotoViewer>
+ */
+type __VLS_Props = {
+    label: string;
+    /** `critical` for a destructive action (Delete). */
+    tone?: "critical";
+    disabled?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/overlay/index.d.ts

@@ -8,3 +8,4 @@ export { INERT_SKIP_ATTR, useOpenDialogCount } from "./dialogStack";
 export { INITIAL_FOCUS_SKIP_ATTR, useDialog, type DialogOptions } from "./useDialog";
 export { COMPACT_MEDIA_QUERY, useCompactPresentation } from "../internal/mediaQuery";
 export { default as PhotoViewer, type PhotoViewerItem } from "./PhotoViewer.vue";
+export { default as PhotoViewerAction } from "./PhotoViewerAction.vue";

package/dist/overlay/index.js

@@ -1,25 +1,49 @@
-import { _ as e } from "../AlertDialog.vue_vue_type_script_setup_true_lang-whA4WLdl.js";
-import { _ as a } from "../Menu.vue_vue_type_script_setup_true_lang-DsFOeCVe.js";
-import { _ as p } from "../Popover.vue_vue_type_script_setup_true_lang-C70GrCP7.js";
-import { _ as m } from "../Toaster.vue_vue_type_script_setup_true_lang-55boRLAj.js";
-import { _ as x } from "../Tooltip.vue_vue_type_script_setup_true_lang-mErNPt8e.js";
-import { t as T } from "../toast-CqSDTWRX.js";
-import { I as i, u as A } from "../dialogStack-DZZg55w0.js";
-import { I as P, u as l } from "../useDialog-CXR3hN0G.js";
-import { C as D, u as R } from "../mediaQuery-CygcXmFW.js";
-import { _ as E } from "../PhotoViewer.vue_vue_type_script_setup_true_lang-QPCW3Xi6.js";
+import { _ as x } from "../AlertDialog.vue_vue_type_script_setup_true_lang-whA4WLdl.js";
+import { _ as w } from "../Menu.vue_vue_type_script_setup_true_lang-DsFOeCVe.js";
+import { _ as I } from "../Popover.vue_vue_type_script_setup_true_lang-C70GrCP7.js";
+import { _ as v } from "../Toaster.vue_vue_type_script_setup_true_lang-55boRLAj.js";
+import { _ as P } from "../Tooltip.vue_vue_type_script_setup_true_lang-mErNPt8e.js";
+import { t as y } from "../toast-CqSDTWRX.js";
+import { I as k, u as E } from "../dialogStack-DZZg55w0.js";
+import { I as S, u as B } from "../useDialog-CXR3hN0G.js";
+import { C as O, u as V } from "../mediaQuery-CygcXmFW.js";
+import { _ as N } from "../PhotoViewer.vue_vue_type_script_setup_true_lang-CY5EZiyK.js";
+import { defineComponent as s, openBlock as r, createElementBlock as n, normalizeClass as l, toDisplayString as c } from "vue";
+const p = ["aria-disabled"], m = /* @__PURE__ */ s({
+  __name: "PhotoViewerAction",
+  props: {
+    label: {},
+    tone: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["select"],
+  setup(o, { emit: t }) {
+    const e = o, i = t;
+    function a() {
+      e.disabled || i("select");
+    }
+    return (f, u) => (r(), n("button", {
+      type: "button",
+      "aria-disabled": e.disabled || void 0,
+      "data-part": "photo-viewer-action",
+      class: l(["flex min-h-11 shrink-0 cursor-pointer items-center justify-center rounded-full bg-white/8 px-4 text-subheadline font-medium whitespace-nowrap transition-colors duration-motion-fast hover:bg-white/16 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#6ee7b7] aria-disabled:cursor-default aria-disabled:opacity-40 aria-disabled:hover:bg-white/8", e.tone === "critical" ? "text-[#ff8a80]" : "text-[#f1f5f3]"]),
+      onClick: a
+    }, c(e.label), 11, p));
+  }
+});
 export {
-  e as AlertDialog,
-  D as COMPACT_MEDIA_QUERY,
-  i as INERT_SKIP_ATTR,
-  P as INITIAL_FOCUS_SKIP_ATTR,
-  a as Menu,
-  E as PhotoViewer,
-  p as Popover,
-  m as Toaster,
-  x as Tooltip,
-  T as toast,
-  R as useCompactPresentation,
-  l as useDialog,
-  A as useOpenDialogCount
+  x as AlertDialog,
+  O as COMPACT_MEDIA_QUERY,
+  k as INERT_SKIP_ATTR,
+  S as INITIAL_FOCUS_SKIP_ATTR,
+  w as Menu,
+  N as PhotoViewer,
+  m as PhotoViewerAction,
+  I as Popover,
+  v as Toaster,
+  P as Tooltip,
+  y as toast,
+  V as useCompactPresentation,
+  B as useDialog,
+  E as useOpenDialogCount
 };