@vertebr/react 0.10.0 → 0.11.0

package/dist/components/config/DatetimeInput.d.ts

@@ -0,0 +1,15 @@
+export type DatetimeInputProps = {
+    id: string;
+    name?: string;
+    value: unknown;
+    readOnly?: boolean;
+    onBlur?: () => void;
+    onChange: (next: string) => void;
+    inputRef?: React.Ref<HTMLButtonElement>;
+};
+/** @deprecated Prefer parts helpers; kept for callers/tests. */
+export declare function toDatetimeLocalValue(value: unknown): string;
+/** @deprecated Prefer parts helpers; kept for callers/tests. */
+export declare function fromDatetimeLocalValue(local: string): string;
+export declare function DatetimeInput({ id, name, value, readOnly, onBlur, onChange, inputRef, }: DatetimeInputProps): import("react").JSX.Element;
+//# sourceMappingURL=DatetimeInput.d.ts.map

package/dist/components/config/DatetimeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatetimeInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/DatetimeInput.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACzC,CAAC;AAsMF,gEAAgE;AAChE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAI3D;AAED,gEAAgE;AAChE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAM5D;AAuED,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAgQpB"}

package/dist/components/config/DatetimeInput.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+import { useEffect, useId, useMemo, useState } from "react";
+import { DayPicker } from "react-day-picker";
+function pad(n) {
+    return String(n).padStart(2, "0");
+}
+function browserTimeZone() {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+}
+const TIME_ZONES = [
+    { id: "America/New_York", label: "Eastern (ET)" },
+    { id: "America/Chicago", label: "Central (CT)" },
+    { id: "America/Denver", label: "Mountain (MT)" },
+    { id: "America/Los_Angeles", label: "Pacific (PT)" },
+    { id: "America/Phoenix", label: "Arizona (MST)" },
+    { id: "America/Anchorage", label: "Alaska (AKT)" },
+    { id: "Pacific/Honolulu", label: "Hawaii (HST)" },
+    { id: "UTC", label: "UTC" },
+    { id: "Europe/London", label: "London (GMT/BST)" },
+    { id: "Europe/Paris", label: "Central Europe (CET)" },
+    { id: "Asia/Tokyo", label: "Tokyo (JST)" },
+    { id: "Australia/Sydney", label: "Sydney (AEST)" },
+];
+function timeZoneOptions(current) {
+    const known = new Set(TIME_ZONES.map((zone) => zone.id));
+    if (known.has(current))
+        return TIME_ZONES;
+    return [{ id: current, label: current.replace(/_/g, " ") }, ...TIME_ZONES];
+}
+function zonedParts(instant, timeZone) {
+    const bits = Object.fromEntries(new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hourCycle: "h23",
+    })
+        .formatToParts(instant)
+        .filter((part) => part.type !== "literal")
+        .map((part) => [part.type, part.value]));
+    return {
+        date: `${bits.year}-${bits.month}-${bits.day}`,
+        time: `${bits.hour}:${bits.minute}`,
+    };
+}
+/** Wall-clock date/time in `timeZone` → UTC ISO. */
+function toIsoInZone(parts, timeZone) {
+    if (!parts.date)
+        return "";
+    const time = parts.time || "00:00";
+    const dateBits = parts.date.split("-").map(Number);
+    const timeBits = time.split(":").map(Number);
+    const year = dateBits[0];
+    const month = dateBits[1];
+    const day = dateBits[2];
+    const hour = timeBits[0];
+    const minute = timeBits[1];
+    if (year === undefined ||
+        month === undefined ||
+        day === undefined ||
+        hour === undefined ||
+        minute === undefined ||
+        ![year, month, day, hour, minute].every(Number.isFinite)) {
+        return "";
+    }
+    const desired = Date.UTC(year, month - 1, day, hour, minute, 0);
+    let utcMs = desired;
+    for (let i = 0; i < 2; i += 1) {
+        const shown = zonedParts(new Date(utcMs), timeZone);
+        const shownDate = shown.date.split("-").map(Number);
+        const shownTime = shown.time.split(":").map(Number);
+        const sy = shownDate[0];
+        const sm = shownDate[1];
+        const sd = shownDate[2];
+        const sh = shownTime[0];
+        const smin = shownTime[1];
+        if (sy === undefined ||
+            sm === undefined ||
+            sd === undefined ||
+            sh === undefined ||
+            smin === undefined) {
+            break;
+        }
+        const asUtc = Date.UTC(sy, sm - 1, sd, sh, smin, 0);
+        utcMs -= asUtc - desired;
+    }
+    return new Date(utcMs).toISOString();
+}
+function partsFromValue(value, timeZone) {
+    if (typeof value !== "string")
+        return { date: "", time: "" };
+    const trimmed = value.trim();
+    if (!trimmed)
+        return { date: "", time: "" };
+    const ms = Date.parse(trimmed);
+    if (Number.isFinite(ms))
+        return zonedParts(new Date(ms), timeZone);
+    const match = trimmed.match(/^(\d{4}-\d{2}-\d{2})(?:[T\s](\d{2}:\d{2})(?::\d{2})?)?/);
+    if (!match)
+        return { date: "", time: "" };
+    return { date: match[1] ?? "", time: match[2] ?? "00:00" };
+}
+function to24h(hour12, meridiem) {
+    const hour = ((hour12 - 1) % 12) + 1;
+    if (meridiem === "AM")
+        return hour === 12 ? 0 : hour;
+    return hour === 12 ? 12 : hour + 12;
+}
+function toClock(time) {
+    const [hRaw, mRaw] = (time || "12:00").split(":");
+    let hour24 = Number(hRaw);
+    const minute = pad(Number.isFinite(Number(mRaw)) ? Number(mRaw) : 0);
+    if (!Number.isFinite(hour24))
+        hour24 = 12;
+    const meridiem = hour24 >= 12 ? "PM" : "AM";
+    const hour12 = hour24 % 12 === 0 ? 12 : hour24 % 12;
+    return { hour12: String(hour12), minute, meridiem };
+}
+function fromClock(clock) {
+    const hour12 = Number(clock.hour12);
+    const safeHour = Number.isFinite(hour12) ? hour12 : 12;
+    return `${pad(to24h(safeHour, clock.meridiem))}:${clock.minute || "00"}`;
+}
+function dateFromYmd(ymd) {
+    if (!ymd)
+        return undefined;
+    const [year, month, day] = ymd.split("-").map(Number);
+    if (!year || !month || !day)
+        return undefined;
+    return new Date(year, month - 1, day);
+}
+function ymdFromDate(date) {
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function formatDateLabel(ymd) {
+    const date = dateFromYmd(ymd);
+    if (!date)
+        return "mm/dd/yyyy";
+    return new Intl.DateTimeFormat(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    }).format(date);
+}
+function formatTimeLabel(time) {
+    if (!time)
+        return "--:-- --";
+    const clock = toClock(time);
+    return `${clock.hour12}:${clock.minute} ${clock.meridiem}`;
+}
+function formatTimeZoneShort(timeZone, instant = new Date()) {
+    const part = new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        timeZoneName: "short",
+    })
+        .formatToParts(instant)
+        .find((item) => item.type === "timeZoneName");
+    return part?.value ?? timeZone;
+}
+function formatSummary(parts, timeZone) {
+    if (!parts.date)
+        return null;
+    const iso = toIsoInZone(parts, timeZone);
+    if (!iso)
+        return null;
+    const instant = new Date(iso);
+    const when = new Intl.DateTimeFormat(undefined, {
+        timeZone,
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    }).format(instant);
+    return `${when} ${formatTimeZoneShort(timeZone, instant)}`;
+}
+/** @deprecated Prefer parts helpers; kept for callers/tests. */
+export function toDatetimeLocalValue(value) {
+    const parts = partsFromValue(value, browserTimeZone());
+    if (!parts.date)
+        return "";
+    return `${parts.date}T${parts.time || "00:00"}`;
+}
+/** @deprecated Prefer parts helpers; kept for callers/tests. */
+export function fromDatetimeLocalValue(local) {
+    const trimmed = local.trim();
+    if (!trimmed)
+        return "";
+    const ms = Date.parse(trimmed);
+    if (!Number.isFinite(ms))
+        return "";
+    return new Date(ms).toISOString();
+}
+const HOURS_12 = Array.from({ length: 12 }, (_, i) => String(i + 1));
+const MINUTES = Array.from({ length: 60 }, (_, i) => pad(i));
+function IconCalendar() {
+    return (_jsxs("svg", { className: "vertebr-datetime-icon", width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M3 8.5h14M7 3v3M13 3v3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+}
+function IconClock() {
+    return (_jsxs("svg", { className: "vertebr-datetime-icon", width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M10 6.5V10l2.5 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function IconChevron({ direction }) {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true", children: _jsx("path", { d: direction === "left" ? "M8.5 3.5 5 7l3.5 3.5" : "M5.5 3.5 9 7l-3.5 3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function DatetimeInput({ id, name, value, readOnly, onBlur, onChange, inputRef, }) {
+    const labelId = useId();
+    const [open, setOpen] = useState(false);
+    const [timeZone, setTimeZone] = useState(browserTimeZone);
+    const [parts, setParts] = useState(() => partsFromValue(value, browserTimeZone()));
+    const summary = useMemo(() => formatSummary(parts, timeZone), [parts, timeZone]);
+    const selected = useMemo(() => dateFromYmd(parts.date), [parts.date]);
+    const clock = useMemo(() => toClock(parts.time || "12:00"), [parts.time]);
+    const zones = useMemo(() => timeZoneOptions(timeZone), [timeZone]);
+    useEffect(() => {
+        setParts(partsFromValue(value, timeZone));
+        // Re-parse when the stored ISO changes; timezone switches keep wall-clock
+        // and rewrite ISO via onTimeZoneChange instead.
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional
+    }, [value]);
+    const commit = (next, zone = timeZone) => {
+        setParts(next);
+        onChange(toIsoInZone(next, zone));
+    };
+    const setClock = (next) => {
+        const time = fromClock(next);
+        if (!parts.date) {
+            commit({ date: ymdFromDate(new Date()), time });
+            return;
+        }
+        commit({ date: parts.date, time });
+    };
+    const onTimeZoneChange = (nextZone) => {
+        setTimeZone(nextZone);
+        if (!parts.date)
+            return;
+        // Keep the wall-clock launch time; reinterpret in the new zone.
+        onChange(toIsoInZone(parts, nextZone));
+    };
+    return (_jsxs("div", { className: "vertebr-datetime", "data-empty": parts.date ? "false" : "true", children: [_jsxs(Popover.Root, { open: readOnly ? false : open, onOpenChange: (next) => {
+                    if (readOnly)
+                        return;
+                    setOpen(next);
+                    if (!next)
+                        onBlur?.();
+                }, children: [_jsxs("div", { className: "vertebr-datetime-shell", children: [_jsx(Popover.Trigger, { asChild: true, children: _jsxs("button", { id: id, ref: inputRef, type: "button", name: name, className: "vertebr-datetime-cell", disabled: readOnly, "aria-labelledby": `${labelId}-date ${labelId}-time`, children: [_jsxs("span", { className: "vertebr-datetime-cell-inner", children: [_jsx(IconCalendar, {}), _jsxs("span", { className: "vertebr-datetime-cell-copy", children: [_jsx("span", { className: "vertebr-datetime-cell-label", id: `${labelId}-date`, children: "Date" }), _jsx("span", { className: "vertebr-datetime-value", "data-empty": parts.date ? "false" : "true", children: formatDateLabel(parts.date) })] })] }), _jsx("span", { className: "vertebr-datetime-divider", "aria-hidden": "true" }), _jsxs("span", { className: "vertebr-datetime-cell-inner", children: [_jsx(IconClock, {}), _jsxs("span", { className: "vertebr-datetime-cell-copy", children: [_jsx("span", { className: "vertebr-datetime-cell-label", id: `${labelId}-time`, children: "Time" }), _jsx("span", { className: "vertebr-datetime-value", "data-empty": parts.time ? "false" : "true", children: parts.time
+                                                                ? `${formatTimeLabel(parts.time)} ${formatTimeZoneShort(timeZone)}`
+                                                                : "--:-- --" })] })] })] }) }), parts.date && !readOnly ? (_jsx("button", { type: "button", className: "vertebr-datetime-clear", "aria-label": "Clear date and time", onClick: () => {
+                                    commit({ date: "", time: "" });
+                                    setOpen(false);
+                                }, children: "Clear" })) : null] }), _jsx(Popover.Portal, { children: _jsxs(Popover.Content, { className: "vertebr-datetime-popover", align: "start", sideOffset: 8, collisionPadding: 12, onOpenAutoFocus: (event) => event.preventDefault(), children: [_jsx(DayPicker, { mode: "single", navLayout: "around", selected: selected, defaultMonth: selected ?? new Date(), onSelect: (day) => {
+                                        if (!day)
+                                            return;
+                                        commit({
+                                            date: ymdFromDate(day),
+                                            time: parts.time || fromClock({ hour12: "12", minute: "00", meridiem: "PM" }),
+                                        });
+                                    }, className: "vertebr-day-picker", classNames: {
+                                        root: "vertebr-day-picker",
+                                        months: "vertebr-day-picker-months",
+                                        month: "vertebr-day-picker-month",
+                                        month_caption: "vertebr-day-picker-caption",
+                                        month_grid: "vertebr-day-picker-grid",
+                                        caption_label: "vertebr-day-picker-caption-label",
+                                        nav: "vertebr-day-picker-nav",
+                                        button_previous: "vertebr-day-picker-nav-btn",
+                                        button_next: "vertebr-day-picker-nav-btn",
+                                        weekdays: "vertebr-day-picker-weekdays",
+                                        weekday: "vertebr-day-picker-weekday",
+                                        week: "vertebr-day-picker-week",
+                                        day: "vertebr-day-picker-day",
+                                        day_button: "vertebr-day-picker-day-btn",
+                                        selected: "vertebr-day-picker-selected",
+                                        today: "vertebr-day-picker-today",
+                                        outside: "vertebr-day-picker-outside",
+                                        disabled: "vertebr-day-picker-disabled",
+                                        hidden: "vertebr-day-picker-hidden",
+                                    }, components: {
+                                        Chevron: ({ orientation }) => (_jsx(IconChevron, { direction: orientation === "left" ? "left" : "right" })),
+                                    } }), _jsxs("div", { className: "vertebr-datetime-time-row", children: [_jsxs("label", { className: "vertebr-datetime-time-field", children: [_jsx("span", { children: "Hour" }), _jsx("select", { className: "vertebr-datetime-time-select", value: clock.hour12, onChange: (event) => setClock({ ...clock, hour12: event.target.value }), children: HOURS_12.map((value) => (_jsx("option", { value: value, children: value }, value))) })] }), _jsx("span", { className: "vertebr-datetime-time-sep", "aria-hidden": "true", children: ":" }), _jsxs("label", { className: "vertebr-datetime-time-field", children: [_jsx("span", { children: "Minute" }), _jsx("select", { className: "vertebr-datetime-time-select", value: clock.minute, onChange: (event) => setClock({ ...clock, minute: event.target.value }), children: MINUTES.map((value) => (_jsx("option", { value: value, children: value }, value))) })] }), _jsxs("label", { className: "vertebr-datetime-time-field vertebr-datetime-time-field-meridiem", children: [_jsx("span", { children: "AM/PM" }), _jsxs("select", { className: "vertebr-datetime-time-select", value: clock.meridiem, onChange: (event) => setClock({
+                                                        ...clock,
+                                                        meridiem: event.target.value,
+                                                    }), children: [_jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] })] })] }), _jsxs("label", { className: "vertebr-datetime-time-field vertebr-datetime-timezone", children: [_jsx("span", { children: "Timezone" }), _jsx("select", { className: "vertebr-datetime-time-select", value: timeZone, onChange: (event) => onTimeZoneChange(event.target.value), children: zones.map((zone) => (_jsx("option", { value: zone.id, children: zone.label }, zone.id))) })] })] }) })] }), summary ? (_jsx("p", { className: "vertebr-datetime-summary", children: summary })) : (_jsx("p", { className: "vertebr-datetime-summary vertebr-datetime-summary-empty", children: "Pick a launch date and time" }))] }));
+}

package/dist/components/config/EnumInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,+BAmDhB"}
+{"version":3,"file":"EnumInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,+BAkDhB"}

package/dist/components/config/EnumInput.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Select from "@radix-ui/react-select";
 import { optionLabel } from "./form/helpers/labels";
 export function EnumInput({ id, value, field, readOnly, onChange, }) {
-    const options = field.options?.filter(Boolean) ?? [];
-    const current = typeof value === "string" && options.includes(value)
-        ? value
-        : (options[0] ?? "");
+    const baseOptions = field.options?.filter(Boolean) ?? [];
+    const raw = typeof value === "string" ? value : "";
+    const options = raw && !baseOptions.includes(raw) ? [raw, ...baseOptions] : baseOptions;
+    const current = raw && options.includes(raw) ? raw : (options[0] ?? "");
     if (options.length === 0) {
         return (_jsx("input", { id: id, type: "text", readOnly: readOnly, value: current, disabled: true }));
     }

package/dist/components/config/EnumListInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumListInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumListInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,CAAC;AAiBF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAiEpB"}
+{"version":3,"file":"EnumListInput.d.ts","sourceRoot":"","sources":["../../../src/components/config/EnumListInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACrC,CAAC;AAyBF,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAyEpB"}

package/dist/components/config/EnumListInput.js

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { optionLabel } from "./form/helpers/labels";
 function asStringList(value) {
-    if (!Array.isArray(value))
-        return [];
-    return value.map((item) => String(item).trim()).filter(Boolean);
+    if (Array.isArray(value)) {
+        return value.map((item) => String(item).trim()).filter(Boolean);
+    }
+    if (typeof value === "string") {
+        return value
+            .split(",")
+            .map((item) => item.trim())
+            .filter(Boolean);
+    }
+    return [];
 }
 function orderedRows(options, selected) {
     const known = new Set(options);
@@ -18,6 +25,9 @@ export function EnumListInput({ id, value, field, readOnly, onChange, }) {
     const options = field.options?.filter(Boolean) ?? [];
     const selected = asStringList(value);
     const rows = orderedRows(options, selected);
+    if (options.length === 0) {
+        return (_jsx("p", { className: "vertebr-field-files-empty", id: id, children: "No products available in this environment." }));
+    }
     const commit = (nextRows) => {
         onChange(nextRows.filter((row) => row.on).map((row) => row.id));
     };

package/dist/components/config/RevisionHistory.d.ts

@@ -4,5 +4,9 @@ export type RevisionHistoryProps = {
     configId: string;
     onPublished?: () => void | Promise<void>;
 };
+/**
+ * Compact History control — opens revision list in a modal so the
+ * editor form stays the primary surface.
+ */
 export declare function RevisionHistory({ client, configId, onPublished, }: RevisionHistoryProps): import("react").JSX.Element;
 //# sourceMappingURL=RevisionHistory.d.ts.map

package/dist/components/config/RevisionHistory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RevisionHistory.d.ts","sourceRoot":"","sources":["../../../src/components/config/RevisionHistory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAaF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,WAAW,GACZ,EAAE,oBAAoB,+BAmHtB"}
+{"version":3,"file":"RevisionHistory.d.ts","sourceRoot":"","sources":["../../../src/components/config/RevisionHistory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGnE,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C,CAAC;AAoBF;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,WAAW,GACZ,EAAE,oBAAoB,+BAuNtB"}

package/dist/components/config/RevisionHistory.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { useToast } from "../../hooks/useToast";
 function formatWhen(at) {
@@ -12,16 +12,32 @@ function formatWhen(at) {
         minute: "2-digit",
     });
 }
+function formatActor(value) {
+    if (!value)
+        return null;
+    if (value.includes("@"))
+        return value;
+    if (value.length <= 12)
+        return value;
+    return `${value.slice(0, 6)}…${value.slice(-4)}`;
+}
+/**
+ * Compact History control — opens revision list in a modal so the
+ * editor form stays the primary surface.
+ */
 export function RevisionHistory({ client, configId, onPublished, }) {
     const { push } = useToast();
+    const [open, setOpen] = useState(false);
     const [items, setItems] = useState([]);
-    const [loading, setLoading] = useState(true);
+    const [count, setCount] = useState(null);
+    const [loading, setLoading] = useState(false);
     const [busyId, setBusyId] = useState(null);
     const refresh = useCallback(async () => {
         setLoading(true);
         try {
             const data = await client.listRevisions(configId, { fresh: true });
             setItems(data.items);
+            setCount(data.items.length);
         }
         finally {
             setLoading(false);
@@ -31,10 +47,30 @@ export function RevisionHistory({ client, configId, onPublished, }) {
         let cancelled = false;
         void (async () => {
             try {
-                setLoading(true);
                 const data = await client.listRevisions(configId, { fresh: true });
                 if (!cancelled)
+                    setCount(data.items.length);
+            }
+            catch {
+                /* badge is optional */
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, configId]);
+    useEffect(() => {
+        if (!open)
+            return;
+        let cancelled = false;
+        void (async () => {
+            try {
+                setLoading(true);
+                const data = await client.listRevisions(configId, { fresh: true });
+                if (!cancelled) {
                     setItems(data.items);
+                    setCount(data.items.length);
+                }
             }
             catch (err) {
                 if (!cancelled) {
@@ -49,7 +85,22 @@ export function RevisionHistory({ client, configId, onPublished, }) {
         return () => {
             cancelled = true;
         };
-    }, [client, configId, push]);
+    }, [open, client, configId, push]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                setOpen(false);
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [open]);
     const publish = async (revId) => {
         setBusyId(revId);
         try {
@@ -65,20 +116,24 @@ export function RevisionHistory({ client, configId, onPublished, }) {
             setBusyId(null);
         }
     };
-    const restore = async (revId) => {
+    const useRevision = async (revId) => {
         setBusyId(revId);
         try {
             await client.restoreRevision(configId, revId);
-            push("Draft restored from revision", "ok");
+            push("Now editing this revision", "ok");
             await refresh();
             await onPublished?.();
         }
         catch (err) {
-            push(err instanceof Error ? err.message : "Restore failed", "danger");
+            push(err instanceof Error ? err.message : "Could not switch revision", "danger");
         }
         finally {
             setBusyId(null);
         }
     };
-    return (_jsxs("div", { className: "vertebr-revisions", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h3", { children: "Revisions" }), _jsx("span", { className: "vertebr-count", children: loading ? "…" : `${items.length}` })] }), items.length === 0 && !loading ? (_jsx("p", { className: "vertebr-revisions-empty", children: "No revisions yet." })) : (_jsx("ul", { className: "vertebr-revisions-list", children: items.map((rev) => (_jsxs("li", { className: "vertebr-revisions-item", children: [_jsxs("div", { className: "vertebr-revisions-meta", children: [_jsx("strong", { children: rev.label?.trim() || rev.id }), _jsx("span", { "data-status": rev.status, children: rev.status }), _jsxs("span", { className: "vertebr-revisions-when", children: [formatWhen(rev.createdAt), rev.createdBy ? ` · ${rev.createdBy}` : ""] })] }), _jsxs("div", { className: "vertebr-revisions-actions", children: [rev.status !== "published" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void publish(rev.id), children: busyId === rev.id ? "…" : "Publish" })) : null, _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void restore(rev.id), children: "Restore" })] })] }, rev.id))) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "vertebr-revisions-trigger", "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpen(true), children: ["History", count != null ? (_jsx("span", { className: "vertebr-revisions-trigger-count", children: count })) : null] }), open ? (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: () => setOpen(false), children: _jsxs("div", { className: "vertebr-modal vertebr-modal-sm vertebr-revisions-modal", role: "dialog", "aria-modal": "true", "aria-label": "Revision history", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Change safety" }), _jsx("h2", { children: "Revisions" })] }), _jsxs("div", { className: "vertebr-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: loading || busyId != null, onClick: () => void refresh(), children: loading ? "…" : "Refresh" }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setOpen(false), children: "Close" })] })] }), _jsx("div", { className: "vertebr-modal-body", children: items.length === 0 && !loading ? (_jsx("p", { className: "vertebr-revisions-empty", children: "No revisions yet. Save to create a draft." })) : (_jsx("ul", { className: "vertebr-revisions-list", children: items.map((rev) => {
+                                    const actor = formatActor(rev.createdBy);
+                                    const isCurrent = Boolean(rev.active);
+                                    return (_jsxs("li", { className: "vertebr-revisions-item", "data-active": isCurrent ? "true" : undefined, children: [_jsxs("div", { className: "vertebr-revisions-meta", children: [_jsx("strong", { children: rev.label?.trim() || rev.id }), _jsx("span", { "data-status": rev.status, children: rev.status }), isCurrent ? (_jsx("span", { "data-status": "current", children: "Current" })) : null, _jsxs("span", { className: "vertebr-revisions-when", children: [formatWhen(rev.createdAt), actor ? ` · ${actor}` : ""] })] }), _jsxs("div", { className: "vertebr-revisions-actions", children: [rev.status !== "published" ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void publish(rev.id), children: busyId === rev.id ? "…" : "Publish" })) : null, isCurrent ? null : (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyId != null, onClick: () => void useRevision(rev.id), children: "Use" }))] })] }, rev.id));
+                                }) })) })] }) })) : null] }));
 }

package/dist/components/config/form/ConfigField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAsBtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BAkTlB"}
+{"version":3,"file":"ConfigField.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIjE,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAuBtF,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAEvF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC5C,mBAAmB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,WAAW,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,IAAI,EAAE,KACV,OAAO,CAAC,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACpD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,eAAe,EACf,WAAW,EACX,MAAM,GACP,EAAE,gBAAgB,+BAkUlB"}

package/dist/components/config/form/ConfigField.js

@@ -9,6 +9,7 @@ import { isCentsField, isPriceField } from "../../../lib/price";
 import { FontPickerField } from "../../fonts/FontPickerField";
 import { ImageUploadControl } from "../../resources/ImageUploadControl";
 import { DescriptionInput } from "../DescriptionInput";
+import { DatetimeInput } from "../DatetimeInput";
 import { EnumInput } from "../EnumInput";
 import { EnumListInput } from "../EnumListInput";
 import { PriceInput } from "../PriceInput";
@@ -39,7 +40,7 @@ export function ConfigField({ fieldKey, field, groupLabel, variant, schema, watc
                         : "", onBlur: controllerField.onBlur, onChange: (event) => {
                         const next = event.target.value;
                         controllerField.onChange(next === "" ? undefined : Number(next));
-                    }, name: controllerField.name, ref: controllerField.ref })) })) : field.type === "enum" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : field.type === "enum[]" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumListInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : field.type === "font" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(FontPickerField, { id: fieldKey, value: controllerField.value, label: field.label, description: field.description, readOnly: field.readOnly, fonts: fonts ?? [], loading: fontsLoading, onChange: controllerField.onChange, onRefreshFonts: onRefreshFonts })) })) : field.type === "reference" && client ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(ReferenceInput, { id: fieldKey, value: controllerField.value, field: field, client: client, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : isMultilineField(fieldKey, field) ? (_jsx("textarea", { id: fieldKey, rows: 5, readOnly: field.readOnly, ...form.register(fieldKey) })) : (_jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })), !hideUpload && uploads?.[fieldKey] && onUpload && !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[fieldKey], multiple: field.type === "file[]", onUpload: async (files) => {
+                    }, name: controllerField.name, ref: controllerField.ref })) })) : field.type === "datetime" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(DatetimeInput, { id: fieldKey, name: controllerField.name, inputRef: controllerField.ref, value: controllerField.value, readOnly: field.readOnly, onBlur: controllerField.onBlur, onChange: controllerField.onChange })) })) : field.type === "enum" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : field.type === "enum[]" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(EnumListInput, { id: fieldKey, value: controllerField.value, field: field, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : field.type === "font" ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(FontPickerField, { id: fieldKey, value: controllerField.value, label: field.label, description: field.description, readOnly: field.readOnly, fonts: fonts ?? [], loading: fontsLoading, onChange: controllerField.onChange, onRefreshFonts: onRefreshFonts })) })) : field.type === "reference" && client ? (_jsx(Controller, { control: form.control, name: fieldKey, render: ({ field: controllerField }) => (_jsx(ReferenceInput, { id: fieldKey, value: controllerField.value, field: field, client: client, readOnly: field.readOnly, onChange: controllerField.onChange })) })) : isMultilineField(fieldKey, field) ? (_jsx("textarea", { id: fieldKey, rows: 5, readOnly: field.readOnly, ...form.register(fieldKey) })) : (_jsx("input", { id: fieldKey, type: "text", readOnly: field.readOnly, ...form.register(fieldKey) })), !hideUpload && uploads?.[fieldKey] && onUpload && !field.readOnly ? (_jsx(ImageUploadControl, { meta: uploads[fieldKey], multiple: field.type === "file[]", onUpload: async (files) => {
                     const uploaded = await onUpload(fieldKey, files);
                     const urls = uploaded
                         .map((item) => item.url)

package/dist/components/config/form/ConfigForm.d.ts

@@ -1,4 +1,4 @@
 import type { ConfigFormProps } from "./types";
 export type { ConfigFormProps, ConfigFormVariant } from "./types";
-export declare function ConfigForm({ schema, value, onSave, submitLabel, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite, }: ConfigFormProps): import("react").JSX.Element;
+export declare function ConfigForm({ schema, value, onSave, submitLabel, variant, uploads, onUpload, galleryUpload, onListGallery, onUploadGallery, fonts, fontsLoading, onListFonts, onRefreshFonts, onChange, hideActions, client, canWrite, revisionsEnabled, onPublish, canPublish, }: ConfigFormProps): import("react").JSX.Element;
 //# sourceMappingURL=ConfigForm.d.ts.map

package/dist/components/config/form/ConfigForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAkB,EAClB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAe,GAChB,EAAE,eAAe,+BA2IjB"}
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../../../../src/components/config/form/ConfigForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAElE,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,EACN,WAAW,EACX,OAAkB,EAClB,OAAO,EACP,QAAQ,EACR,aAAa,EACb,aAAa,EACb,eAAe,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAe,EACf,gBAAwB,EACxB,SAAS,EACT,UAAkB,GACnB,EAAE,eAAe,+BA2LjB"}