@aginies/ui 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1218 -1052
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +86 -45
- package/dist/index.d.ts +86 -45
- package/dist/index.js +1172 -1007
- package/dist/index.js.map +1 -1
- package/dist/styles.css +43 -12
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2002,11 +2002,114 @@ function DockedFormFooter({ onSave, onCancel, changes, saving, disabled, message
|
|
|
2002
2002
|
}
|
|
2003
2003
|
|
|
2004
2004
|
// src/data/DataTable.jsx
|
|
2005
|
-
import
|
|
2005
|
+
import React37, { useState as useState2, useMemo, useRef, useEffect as useEffect2, useLayoutEffect } from "react";
|
|
2006
|
+
|
|
2007
|
+
// src/layout/responsive.js
|
|
2008
|
+
import React36 from "react";
|
|
2009
|
+
var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
|
|
2010
|
+
var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "2xl"];
|
|
2011
|
+
function breakpointFor(width) {
|
|
2012
|
+
let name = "base";
|
|
2013
|
+
for (const k of BREAKPOINT_ORDER.slice(1)) if (width >= BREAKPOINTS[k]) name = k;
|
|
2014
|
+
return name;
|
|
2015
|
+
}
|
|
2016
|
+
function toPx(bp) {
|
|
2017
|
+
return typeof bp === "number" ? bp : BREAKPOINTS[bp] != null ? BREAKPOINTS[bp] : 0;
|
|
2018
|
+
}
|
|
2019
|
+
function atLeast(a, b) {
|
|
2020
|
+
return BREAKPOINT_ORDER.indexOf(a) >= BREAKPOINT_ORDER.indexOf(b);
|
|
2021
|
+
}
|
|
2022
|
+
var useIsoLayoutEffect = typeof window !== "undefined" ? React36.useLayoutEffect : React36.useEffect;
|
|
2023
|
+
function useElementWidth(ref) {
|
|
2024
|
+
const [w, setW] = React36.useState(null);
|
|
2025
|
+
useIsoLayoutEffect(() => {
|
|
2026
|
+
const el = ref.current;
|
|
2027
|
+
if (!el) return void 0;
|
|
2028
|
+
const read2 = () => {
|
|
2029
|
+
const n = el.offsetWidth;
|
|
2030
|
+
setW((p) => p === n ? p : n);
|
|
2031
|
+
};
|
|
2032
|
+
read2();
|
|
2033
|
+
if (typeof ResizeObserver === "undefined") return void 0;
|
|
2034
|
+
const ro = new ResizeObserver(read2);
|
|
2035
|
+
ro.observe(el);
|
|
2036
|
+
return () => ro.disconnect();
|
|
2037
|
+
}, [ref]);
|
|
2038
|
+
return w;
|
|
2039
|
+
}
|
|
2040
|
+
function useBreakpoint(ref) {
|
|
2041
|
+
const w = useElementWidth(ref);
|
|
2042
|
+
return w == null ? null : breakpointFor(w);
|
|
2043
|
+
}
|
|
2044
|
+
var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
|
|
2045
|
+
function useOverlayFocus(ref, open, onClose) {
|
|
2046
|
+
const closeRef = React36.useRef(onClose);
|
|
2047
|
+
closeRef.current = onClose;
|
|
2048
|
+
React36.useEffect(() => {
|
|
2049
|
+
if (!open) return void 0;
|
|
2050
|
+
const el = ref.current;
|
|
2051
|
+
if (!el) return void 0;
|
|
2052
|
+
const prev = typeof document !== "undefined" ? document.activeElement : null;
|
|
2053
|
+
if (!el.contains(document.activeElement)) el.focus({ preventScroll: true });
|
|
2054
|
+
const onKey = (e) => {
|
|
2055
|
+
if (e.key === "Escape") {
|
|
2056
|
+
if (closeRef.current) {
|
|
2057
|
+
e.stopPropagation();
|
|
2058
|
+
closeRef.current();
|
|
2059
|
+
}
|
|
2060
|
+
return;
|
|
2061
|
+
}
|
|
2062
|
+
if (e.key !== "Tab" || !el.contains(document.activeElement)) return;
|
|
2063
|
+
const f = Array.from(el.querySelectorAll(FOCUSABLE)).filter((n) => n.offsetParent !== null || n === document.activeElement);
|
|
2064
|
+
if (!f.length) {
|
|
2065
|
+
e.preventDefault();
|
|
2066
|
+
el.focus({ preventScroll: true });
|
|
2067
|
+
return;
|
|
2068
|
+
}
|
|
2069
|
+
const first = f[0], last = f[f.length - 1];
|
|
2070
|
+
if (e.shiftKey && (document.activeElement === first || document.activeElement === el)) {
|
|
2071
|
+
e.preventDefault();
|
|
2072
|
+
last.focus();
|
|
2073
|
+
} else if (!e.shiftKey && document.activeElement === last) {
|
|
2074
|
+
e.preventDefault();
|
|
2075
|
+
first.focus();
|
|
2076
|
+
}
|
|
2077
|
+
};
|
|
2078
|
+
el.addEventListener("keydown", onKey);
|
|
2079
|
+
return () => {
|
|
2080
|
+
el.removeEventListener("keydown", onKey);
|
|
2081
|
+
const a = document.activeElement;
|
|
2082
|
+
if (prev && prev.focus && document.contains(prev) && (!a || a === document.body || el.contains(a))) prev.focus({ preventScroll: true });
|
|
2083
|
+
};
|
|
2084
|
+
}, [open, ref]);
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
// src/data/DataTable.jsx
|
|
2006
2088
|
import { Fragment as Fragment2, jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2007
|
-
var DEFAULT_LABELS20 = { empty: "Nothing here yet", emptyHint: "", loading: "Loading\u2026", error: "Could not load the data", errorHint: "Check your connection and try again.", retry: "Try again", selectAll: "Select all rows", selectRow: "Select row", actions: "Actions", sortedAsc: "sorted ascending", sortedDesc: "sorted descending", edit: "Edit" };
|
|
2089
|
+
var DEFAULT_LABELS20 = { empty: "Nothing here yet", emptyHint: "", loading: "Loading\u2026", error: "Could not load the data", errorHint: "Check your connection and try again.", retry: "Try again", selectAll: "Select all rows", selectRow: "Select row", actions: "Actions", sortedAsc: "sorted ascending", sortedDesc: "sorted descending", edit: "Edit", expandRow: "Show hidden columns", collapseRow: "Hide hidden columns" };
|
|
2090
|
+
var DEFAULT_MIN = 120;
|
|
2091
|
+
var EXPANDER = 24;
|
|
2092
|
+
var NO_REF = { current: null };
|
|
2093
|
+
var pxOf = (v) => typeof v === "number" ? v : typeof v === "string" && /^\s*\d+(\.\d+)?(px)?\s*$/.test(v) ? parseFloat(v) : null;
|
|
2094
|
+
var colMin = (c) => {
|
|
2095
|
+
const m = pxOf(c.minWidth);
|
|
2096
|
+
if (m != null) return m;
|
|
2097
|
+
const w = pxOf(c.width);
|
|
2098
|
+
return w != null ? w : DEFAULT_MIN;
|
|
2099
|
+
};
|
|
2100
|
+
function columnsToHide(columns, avail) {
|
|
2101
|
+
let sum = columns.reduce((a, c) => a + colMin(c), 0);
|
|
2102
|
+
const order = columns.map((c, i) => ({ c, i, p: c.priority == null ? 1 : c.priority })).filter((x) => x.p > 1).sort((a, b) => b.p - a.p || b.i - a.i);
|
|
2103
|
+
const hidden = [];
|
|
2104
|
+
for (const x of order) {
|
|
2105
|
+
if (sum + (hidden.length ? EXPANDER : 0) <= avail) break;
|
|
2106
|
+
hidden.push(x.c.key);
|
|
2107
|
+
sum -= colMin(x.c);
|
|
2108
|
+
}
|
|
2109
|
+
return hidden;
|
|
2110
|
+
}
|
|
2008
2111
|
var cmp = (a, b) => a == null ? 1 : b == null ? -1 : typeof a === "number" && typeof b === "number" ? a - b : String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
|
|
2009
|
-
function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selected, defaultSelected = [], onSelectChange, sort, defaultSort = null, onSortChange, onRowClick, rowActions, stickyHeader = true, maxHeight, state, labels, onRetry, pagination, footer, caption, striped, bare, onCellEdit, skeletonRows = 5, rowClassName, activeKey, className, style, ...rest }) {
|
|
2112
|
+
function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selected, defaultSelected = [], onSelectChange, sort, defaultSort = null, onSortChange, onRowClick, rowActions, stickyHeader = true, maxHeight, state, labels, onRetry, pagination, footer, caption, striped, bare, onCellEdit, skeletonRows = 5, rowClassName, activeKey, stickyFirst, onHiddenColumnsChange, className, style, ...rest }) {
|
|
2010
2113
|
const l = { ...DEFAULT_LABELS20, ...labels };
|
|
2011
2114
|
const [localSort, setLocalSort] = useState2(defaultSort);
|
|
2012
2115
|
const s = sort !== void 0 ? sort : localSort;
|
|
@@ -2015,7 +2118,52 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2015
2118
|
const [editing, setEditing] = useState2(null);
|
|
2016
2119
|
const [focusIdx, setFocusIdx] = useState2(-1);
|
|
2017
2120
|
const bodyRef = useRef(null);
|
|
2121
|
+
const rootRef = useRef(null);
|
|
2122
|
+
const scrollRef = useRef(null);
|
|
2018
2123
|
const id = useMemo(() => uid("agn-table"), []);
|
|
2124
|
+
const prioritized = columns.some((c) => c.priority != null);
|
|
2125
|
+
const width = useElementWidth(prioritized ? rootRef : NO_REF);
|
|
2126
|
+
const [reserved, setReserved] = useState2(0);
|
|
2127
|
+
useLayoutEffect(() => {
|
|
2128
|
+
const el = rootRef.current;
|
|
2129
|
+
if (!el) return;
|
|
2130
|
+
const chk = el.querySelector(".agn-table__th--check");
|
|
2131
|
+
if (chk) el.style.setProperty("--agn-table-check-w", chk.offsetWidth + "px");
|
|
2132
|
+
if (!prioritized) return;
|
|
2133
|
+
const act = el.querySelector(".agn-table__th--actions");
|
|
2134
|
+
const n = (chk ? chk.offsetWidth : 0) + (act ? act.offsetWidth : 0);
|
|
2135
|
+
setReserved((p) => p === n ? p : n);
|
|
2136
|
+
});
|
|
2137
|
+
const hiddenKeys = useMemo(() => prioritized && width != null ? columnsToHide(columns, width - 2 - reserved) : [], [prioritized, width, reserved, columns]);
|
|
2138
|
+
const visibleColumns = hiddenKeys.length ? columns.filter((c) => !hiddenKeys.includes(c.key)) : columns;
|
|
2139
|
+
const hiddenColumns = hiddenKeys.length ? columns.filter((c) => hiddenKeys.includes(c.key)) : [];
|
|
2140
|
+
const hiddenSig = hiddenKeys.join("\0");
|
|
2141
|
+
const lastSig = useRef("");
|
|
2142
|
+
const hiddenCb = useRef(onHiddenColumnsChange);
|
|
2143
|
+
hiddenCb.current = onHiddenColumnsChange;
|
|
2144
|
+
useEffect2(() => {
|
|
2145
|
+
if (hiddenSig === lastSig.current) return;
|
|
2146
|
+
lastSig.current = hiddenSig;
|
|
2147
|
+
if (hiddenCb.current) hiddenCb.current(hiddenSig ? hiddenSig.split("\0") : []);
|
|
2148
|
+
}, [hiddenSig]);
|
|
2149
|
+
const [expanded, setExpanded] = useState2([]);
|
|
2150
|
+
const toggleExpanded = (k, open) => setExpanded((p) => {
|
|
2151
|
+
const has = p.includes(k);
|
|
2152
|
+
const want = open == null ? !has : open;
|
|
2153
|
+
return want === has ? p : want ? [...p, k] : p.filter((x) => x !== k);
|
|
2154
|
+
});
|
|
2155
|
+
useEffect2(() => {
|
|
2156
|
+
const el = scrollRef.current;
|
|
2157
|
+
if (!stickyFirst || !el) return void 0;
|
|
2158
|
+
const on = () => el.classList.toggle("agn-table__scroll--scrolled", el.scrollLeft > 0);
|
|
2159
|
+
on();
|
|
2160
|
+
el.addEventListener("scroll", on, { passive: true });
|
|
2161
|
+
return () => {
|
|
2162
|
+
el.removeEventListener("scroll", on);
|
|
2163
|
+
el.classList.remove("agn-table__scroll--scrolled");
|
|
2164
|
+
};
|
|
2165
|
+
}, [stickyFirst]);
|
|
2166
|
+
const stickyKey = stickyFirst && visibleColumns.length ? visibleColumns[0].key : null;
|
|
2019
2167
|
const keyOf = (r, i) => typeof rowKey === "function" ? rowKey(r, i) : r[rowKey] != null ? r[rowKey] : i;
|
|
2020
2168
|
const sorted = useMemo(() => {
|
|
2021
2169
|
if (!s || !s.key) return rows;
|
|
@@ -2043,7 +2191,7 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2043
2191
|
if (headRef.current) headRef.current.indeterminate = someSel;
|
|
2044
2192
|
}, [someSel]);
|
|
2045
2193
|
const st = state || (rows.length === 0 ? "empty" : "ready");
|
|
2046
|
-
const colCount =
|
|
2194
|
+
const colCount = visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
|
|
2047
2195
|
const focusRow = (i) => {
|
|
2048
2196
|
const n = Math.max(0, Math.min(sorted.length - 1, i));
|
|
2049
2197
|
setFocusIdx(n);
|
|
@@ -2082,8 +2230,20 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2082
2230
|
onRowClick(r, i);
|
|
2083
2231
|
}
|
|
2084
2232
|
break;
|
|
2233
|
+
case "ArrowRight":
|
|
2234
|
+
if (hiddenColumns.length) {
|
|
2235
|
+
e.preventDefault();
|
|
2236
|
+
toggleExpanded(keyOf(r, i), true);
|
|
2237
|
+
}
|
|
2238
|
+
break;
|
|
2239
|
+
case "ArrowLeft":
|
|
2240
|
+
if (hiddenColumns.length) {
|
|
2241
|
+
e.preventDefault();
|
|
2242
|
+
toggleExpanded(keyOf(r, i), false);
|
|
2243
|
+
}
|
|
2244
|
+
break;
|
|
2085
2245
|
case "F2": {
|
|
2086
|
-
const c =
|
|
2246
|
+
const c = visibleColumns.find((x) => x.editable);
|
|
2087
2247
|
if (c && onCellEdit) {
|
|
2088
2248
|
e.preventDefault();
|
|
2089
2249
|
setEditing({ key: keyOf(r, i), col: c.key });
|
|
@@ -2100,22 +2260,28 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2100
2260
|
/* @__PURE__ */ jsx35("span", { children: c.label }),
|
|
2101
2261
|
c.sortable && /* @__PURE__ */ jsx35(Icon, { name: active ? s.dir === "asc" ? "arrow-up" : "arrow-down" : "arrow-up-down", size: 12, className: cx("agn-table__sort", active && "agn-table__sort--active") })
|
|
2102
2262
|
] });
|
|
2103
|
-
return /* @__PURE__ */ jsx35("th", { scope: "col", className: cx("agn-table__th", c.align && "agn-table__th--" + c.align, c.sortable && "agn-table__th--sortable", active && "agn-table__th--sorted"), style: { width: c.width, minWidth: c.minWidth }, "aria-sort": active ? s.dir === "asc" ? "ascending" : "descending" : c.sortable ? "none" : void 0, children: c.sortable ? /* @__PURE__ */ jsxs31("button", { type: "button", className: "agn-table__sort-btn agn-focus-inset", onClick: () => setSort(c), children: [
|
|
2263
|
+
return /* @__PURE__ */ jsx35("th", { scope: "col", className: cx("agn-table__th", c.key === stickyKey && "agn-table__th--sticky", c.align && "agn-table__th--" + c.align, c.sortable && "agn-table__th--sortable", active && "agn-table__th--sorted"), style: { width: c.width, minWidth: c.minWidth }, "aria-sort": active ? s.dir === "asc" ? "ascending" : "descending" : c.sortable ? "none" : void 0, children: c.sortable ? /* @__PURE__ */ jsxs31("button", { type: "button", className: "agn-table__sort-btn agn-focus-inset", onClick: () => setSort(c), children: [
|
|
2104
2264
|
inner,
|
|
2105
2265
|
/* @__PURE__ */ jsx35("span", { className: "agn-sr", children: active ? ", " + (s.dir === "asc" ? l.sortedAsc : l.sortedDesc) : "" })
|
|
2106
2266
|
] }) : inner });
|
|
2107
2267
|
};
|
|
2108
|
-
const
|
|
2268
|
+
const cellContent = (c, r, ri) => {
|
|
2269
|
+
const value = r[c.key];
|
|
2270
|
+
return c.render ? c.render(value, r, ri) : value == null ? /* @__PURE__ */ jsx35("span", { className: "agn-table__null", children: "\u2014" }) : String(value);
|
|
2271
|
+
};
|
|
2272
|
+
const renderCell = (c, r, ri, ci) => {
|
|
2109
2273
|
const k = keyOf(r, ri);
|
|
2110
2274
|
const isEditing = editing && editing.key === k && editing.col === c.key;
|
|
2111
2275
|
const value = r[c.key];
|
|
2112
|
-
const content = c
|
|
2276
|
+
const content = cellContent(c, r, ri);
|
|
2277
|
+
const lead = ci === 0 && hiddenColumns.length > 0;
|
|
2278
|
+
const open = lead && expanded.includes(k);
|
|
2113
2279
|
const canEdit = c.editable && onCellEdit;
|
|
2114
2280
|
const commit = (v) => {
|
|
2115
2281
|
if (v !== String(value == null ? "" : value)) onCellEdit(r, c.key, v);
|
|
2116
2282
|
setEditing(null);
|
|
2117
2283
|
};
|
|
2118
|
-
return /* @__PURE__ */ jsx35("td", { className: cx("agn-table__td", c.align && "agn-table__td--" + c.align, c.mono && "agn-table__td--mono", c.ellipsis && "agn-table__td--ellipsis", canEdit && "agn-table__td--editable", isEditing && "agn-table__td--editing", c.className), style: { width: c.width }, onDoubleClick: canEdit ? () => setEditing({ key: k, col: c.key }) : void 0, title: c.ellipsis && typeof content === "string" ? content : void 0, children: isEditing ? (
|
|
2284
|
+
return /* @__PURE__ */ jsx35("td", { className: cx("agn-table__td", c.key === stickyKey && "agn-table__td--sticky", c.align && "agn-table__td--" + c.align, c.mono && "agn-table__td--mono", c.ellipsis && "agn-table__td--ellipsis", canEdit && "agn-table__td--editable", isEditing && "agn-table__td--editing", c.className), style: { width: c.width }, onDoubleClick: canEdit ? () => setEditing({ key: k, col: c.key }) : void 0, title: c.ellipsis && typeof content === "string" ? content : void 0, children: isEditing ? (
|
|
2119
2285
|
// biome-ignore lint/a11y/noAutofocus: the editor mounts only on the user's double-click or Edit press; moving focus into it is the expected response, not a page-load surprise
|
|
2120
2286
|
/* @__PURE__ */ jsx35("input", { className: "agn-table__input", autoFocus: true, defaultValue: value == null ? "" : value, "aria-label": typeof c.label === "string" ? c.label : void 0, onBlur: (e) => commit(e.target.value), onKeyDown: (e) => {
|
|
2121
2287
|
if (e.key === "Enter") {
|
|
@@ -2129,13 +2295,16 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2129
2295
|
e.stopPropagation();
|
|
2130
2296
|
} })
|
|
2131
2297
|
) : /* @__PURE__ */ jsxs31(Fragment2, { children: [
|
|
2132
|
-
|
|
2298
|
+
lead ? /* @__PURE__ */ jsxs31("span", { className: "agn-table__lead", children: [
|
|
2299
|
+
/* @__PURE__ */ jsx35("button", { type: "button", className: "agn-table__expand agn-focus-inset", "aria-expanded": open, "aria-controls": open ? id + "-detail-" + ri : void 0, "aria-label": open ? l.collapseRow : l.expandRow, onClick: () => toggleExpanded(k), children: /* @__PURE__ */ jsx35(Icon, { name: "chevron-right", size: 14, className: "agn-table__expand-icon" }) }),
|
|
2300
|
+
/* @__PURE__ */ jsx35("span", { className: "agn-table__lead-content", children: content })
|
|
2301
|
+
] }) : content,
|
|
2133
2302
|
canEdit && /* @__PURE__ */ jsx35("button", { type: "button", className: "agn-table__edit agn-focus-inset", "aria-label": l.edit, onClick: () => setEditing({ key: k, col: c.key }), children: /* @__PURE__ */ jsx35(Icon, { name: "pencil", size: 12 }) })
|
|
2134
2303
|
] }) });
|
|
2135
2304
|
};
|
|
2136
2305
|
const header = /* @__PURE__ */ jsx35("thead", { className: cx("agn-table__head", stickyHeader && "agn-table__head--sticky"), children: /* @__PURE__ */ jsxs31("tr", { children: [
|
|
2137
2306
|
selectable && /* @__PURE__ */ jsx35("th", { scope: "col", className: "agn-table__th agn-table__th--check", children: /* @__PURE__ */ jsx35("input", { ref: headRef, type: "checkbox", className: "agn-table__check", checked: allSel, onChange: toggleAll, "aria-label": l.selectAll, disabled: st !== "ready" }) }),
|
|
2138
|
-
|
|
2307
|
+
visibleColumns.map((c) => /* @__PURE__ */ jsx35(React37.Fragment, { children: renderTh(c) }, c.key)),
|
|
2139
2308
|
rowActions && /* @__PURE__ */ jsx35("th", { scope: "col", className: "agn-table__th agn-table__th--actions", children: /* @__PURE__ */ jsx35("span", { className: "agn-sr", children: l.actions }) })
|
|
2140
2309
|
] }) });
|
|
2141
2310
|
let body;
|
|
@@ -2149,7 +2318,7 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2149
2318
|
/* biome-ignore lint/a11y/noAriaHiddenOnFocusable: skeleton rows have no tabIndex and no focusable content; the rule treats every tr as focusable */
|
|
2150
2319
|
/* @__PURE__ */ jsxs31("tr", { className: "agn-table__row agn-table__row--skeleton", "aria-hidden": "true", children: [
|
|
2151
2320
|
selectable && /* @__PURE__ */ jsx35("td", { className: "agn-table__td agn-table__td--check", children: /* @__PURE__ */ jsx35("span", { className: "agn-table__skeleton agn-table__skeleton--box" }) }),
|
|
2152
|
-
|
|
2321
|
+
visibleColumns.map((c, ci) => /* @__PURE__ */ jsx35("td", { className: cx("agn-table__td", c.key === stickyKey && "agn-table__td--sticky"), children: /* @__PURE__ */ jsx35("span", { className: "agn-table__skeleton", style: { width: (ci % 3 === 0 ? 70 : ci % 3 === 1 ? 45 : 55) + "%" } }) }, c.key)),
|
|
2153
2322
|
rowActions && /* @__PURE__ */ jsx35("td", { className: "agn-table__td" })
|
|
2154
2323
|
] }, i)
|
|
2155
2324
|
));
|
|
@@ -2162,20 +2331,29 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2162
2331
|
const k = keyOf(r, ri);
|
|
2163
2332
|
const isSel = selectable && sel.includes(k);
|
|
2164
2333
|
const isActive = activeKey != null && k === activeKey;
|
|
2165
|
-
|
|
2334
|
+
const open = hiddenColumns.length > 0 && expanded.includes(k);
|
|
2335
|
+
const row = /* @__PURE__ */ jsxs31("tr", { "data-row-index": ri, tabIndex: ri === (focusIdx < 0 ? 0 : focusIdx) ? 0 : -1, className: cx("agn-table__row", "agn-focus-inset", isSel && "agn-table__row--selected", isActive && "agn-table__row--active", onRowClick && "agn-table__row--clickable", rowClassName && rowClassName(r, ri)), "aria-selected": selectable ? isSel : void 0, "aria-current": isActive ? "true" : void 0, onKeyDown: (e) => onRowKey(e, r, ri), onFocus: () => setFocusIdx(ri), onClick: onRowClick ? (e) => {
|
|
2166
2336
|
if (!/^(INPUT|BUTTON|A|SELECT|TEXTAREA)$/.test(e.target.tagName) && !e.target.closest("button,a,input,select,textarea")) onRowClick(r, ri);
|
|
2167
2337
|
} : void 0, children: [
|
|
2168
2338
|
selectable && /* @__PURE__ */ jsx35("td", { className: "agn-table__td agn-table__td--check", children: /* @__PURE__ */ jsx35("input", { type: "checkbox", className: "agn-table__check", checked: isSel, onChange: () => toggleOne(k), "aria-label": l.selectRow }) }),
|
|
2169
|
-
|
|
2339
|
+
visibleColumns.map((c, ci) => /* @__PURE__ */ jsx35(React37.Fragment, { children: renderCell(c, r, ri, ci) }, c.key)),
|
|
2170
2340
|
rowActions && /* @__PURE__ */ jsx35("td", { className: "agn-table__td agn-table__td--actions", children: rowActions(r, ri) })
|
|
2171
2341
|
] }, k);
|
|
2342
|
+
if (!open) return row;
|
|
2343
|
+
return /* @__PURE__ */ jsxs31(React37.Fragment, { children: [
|
|
2344
|
+
row,
|
|
2345
|
+
/* @__PURE__ */ jsx35("tr", { id: id + "-detail-" + ri, className: "agn-table__detail", children: /* @__PURE__ */ jsx35("td", { colSpan: colCount, className: "agn-table__detail-cell", children: /* @__PURE__ */ jsx35("dl", { className: "agn-table__detail-list", style: { maxWidth: width ? Math.max(0, width - 26) : void 0 }, children: hiddenColumns.map((c) => /* @__PURE__ */ jsxs31("div", { className: "agn-table__detail-item", children: [
|
|
2346
|
+
/* @__PURE__ */ jsx35("dt", { className: "agn-table__detail-label", children: c.label }),
|
|
2347
|
+
/* @__PURE__ */ jsx35("dd", { className: cx("agn-table__detail-value", c.mono && "agn-table__td--mono"), children: cellContent(c, r, ri) })
|
|
2348
|
+
] }, c.key)) }) }) })
|
|
2349
|
+
] }, k);
|
|
2172
2350
|
});
|
|
2173
2351
|
if (st === "loading" && !skeletonRows) body = /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsxs31("td", { colSpan: colCount, className: "agn-table__state", children: [
|
|
2174
2352
|
/* @__PURE__ */ jsx35(Icon, { name: "loader-circle", size: 20, className: "agn-table__spin" }),
|
|
2175
2353
|
l.loading
|
|
2176
2354
|
] }) });
|
|
2177
|
-
return /* @__PURE__ */ jsxs31("div", { className: cx("agn-table", bare && "agn-table--bare", striped && "agn-table--striped", st !== "ready" && "agn-table--" + st, className), style, ...rest, children: [
|
|
2178
|
-
/* @__PURE__ */ jsxs31("div", { className: "agn-table__scroll", style: { maxHeight }, "aria-busy": st === "loading" || void 0, "aria-live": st === "loading" ? "polite" : void 0, children: [
|
|
2355
|
+
return /* @__PURE__ */ jsxs31("div", { ref: rootRef, className: cx("agn-table", bare && "agn-table--bare", striped && "agn-table--striped", stickyFirst && "agn-table--sticky-first", st !== "ready" && "agn-table--" + st, className), style, ...rest, children: [
|
|
2356
|
+
/* @__PURE__ */ jsxs31("div", { ref: scrollRef, className: "agn-table__scroll", style: { maxHeight }, "aria-busy": st === "loading" || void 0, "aria-live": st === "loading" ? "polite" : void 0, children: [
|
|
2179
2357
|
/* @__PURE__ */ jsxs31("table", { className: "agn-table__table", id, children: [
|
|
2180
2358
|
caption && /* @__PURE__ */ jsx35("caption", { className: "agn-sr", children: caption }),
|
|
2181
2359
|
header,
|
|
@@ -2191,7 +2369,7 @@ function DataTable({ columns = [], rows = [], rowKey = "id", selectable, selecte
|
|
|
2191
2369
|
}
|
|
2192
2370
|
|
|
2193
2371
|
// src/data/TreeGrid.jsx
|
|
2194
|
-
import
|
|
2372
|
+
import React38, { useState as useState3 } from "react";
|
|
2195
2373
|
import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2196
2374
|
var DEFAULT_LABELS21 = { expand: "Expand", collapse: "Collapse", empty: "Nothing here yet" };
|
|
2197
2375
|
function flatten(rows, expanded, depth = 0, out = []) {
|
|
@@ -2218,7 +2396,7 @@ function TreeGrid({ columns = [], rows = [], defaultExpanded, expanded, onExpand
|
|
|
2218
2396
|
};
|
|
2219
2397
|
const flat = flatten(rows, exp);
|
|
2220
2398
|
const [focus, setFocus] = useState3(0);
|
|
2221
|
-
const ref =
|
|
2399
|
+
const ref = React38.useRef(null);
|
|
2222
2400
|
const focusRow = (i) => {
|
|
2223
2401
|
const n = Math.max(0, Math.min(flat.length - 1, i));
|
|
2224
2402
|
setFocus(n);
|
|
@@ -2305,10 +2483,10 @@ function TreeGrid({ columns = [], rows = [], defaultExpanded, expanded, onExpand
|
|
|
2305
2483
|
}
|
|
2306
2484
|
|
|
2307
2485
|
// src/data/Tree.jsx
|
|
2308
|
-
import
|
|
2486
|
+
import React40, { useState as useState4, useRef as useRef2 } from "react";
|
|
2309
2487
|
|
|
2310
2488
|
// src/data/Badge.jsx
|
|
2311
|
-
import
|
|
2489
|
+
import React39 from "react";
|
|
2312
2490
|
import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2313
2491
|
function Badge({ tone = "neutral", count, max = 99, solid, outline, icon, size = "md", children, className, ...rest }) {
|
|
2314
2492
|
const hasCount = typeof count === "number";
|
|
@@ -2443,7 +2621,7 @@ function Tree({ items = [], selected, onSelect, defaultExpanded, expanded, onExp
|
|
|
2443
2621
|
}
|
|
2444
2622
|
|
|
2445
2623
|
// src/data/Tile.jsx
|
|
2446
|
-
import
|
|
2624
|
+
import React41 from "react";
|
|
2447
2625
|
import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2448
2626
|
function Tile({ icon, media: media2, title, href, onClick, meta, actions, boxed, selected, as, className, children, ...rest }) {
|
|
2449
2627
|
const Comp = as || "div";
|
|
@@ -2461,7 +2639,7 @@ function Tile({ icon, media: media2, title, href, onClick, meta, actions, boxed,
|
|
|
2461
2639
|
}
|
|
2462
2640
|
|
|
2463
2641
|
// src/data/SummaryDetail.jsx
|
|
2464
|
-
import
|
|
2642
|
+
import React42 from "react";
|
|
2465
2643
|
import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2466
2644
|
function SummaryDetail({ fields = [], max, dense, className, ...rest }) {
|
|
2467
2645
|
const list = max ? fields.slice(0, max) : fields;
|
|
@@ -2472,7 +2650,7 @@ function SummaryDetail({ fields = [], max, dense, className, ...rest }) {
|
|
|
2472
2650
|
}
|
|
2473
2651
|
|
|
2474
2652
|
// src/data/Avatar.jsx
|
|
2475
|
-
import
|
|
2653
|
+
import React43 from "react";
|
|
2476
2654
|
import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2477
2655
|
var SIZES = { xs: 20, sm: 24, md: 32, lg: 40, xl: 56 };
|
|
2478
2656
|
var initialsOf = (name) => String(name || "").trim().split(/\s+/).slice(0, 2).map((w) => w.charAt(0)).join("").toLocaleUpperCase("tr-TR");
|
|
@@ -2514,7 +2692,7 @@ function AvatarGroup({ items = [], max = 4, size = "sm", kind = "person", classN
|
|
|
2514
2692
|
}
|
|
2515
2693
|
|
|
2516
2694
|
// src/data/Tag.jsx
|
|
2517
|
-
import
|
|
2695
|
+
import React44 from "react";
|
|
2518
2696
|
import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2519
2697
|
function Tag({ tone = "neutral", dot, icon, as: Comp = "span", children, className, ...rest }) {
|
|
2520
2698
|
return /* @__PURE__ */ jsxs38(Comp, { className: cx("agn-tag", "agn-tag--" + tone, dot && "agn-tag--dot", className), ...rest, children: [
|
|
@@ -2525,7 +2703,7 @@ function Tag({ tone = "neutral", dot, icon, as: Comp = "span", children, classNa
|
|
|
2525
2703
|
}
|
|
2526
2704
|
|
|
2527
2705
|
// src/data/BlockIcon.jsx
|
|
2528
|
-
import
|
|
2706
|
+
import React45 from "react";
|
|
2529
2707
|
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
2530
2708
|
function BlockIcon({ icon = "box", product, tone = "signal", color, size = "md", title, children, className, style, ...rest }) {
|
|
2531
2709
|
const px2 = size === "sm" ? 20 : size === "lg" ? 32 : size === "xl" ? 40 : 24;
|
|
@@ -2537,7 +2715,7 @@ function BlockIcon({ icon = "box", product, tone = "signal", color, size = "md",
|
|
|
2537
2715
|
}
|
|
2538
2716
|
|
|
2539
2717
|
// src/data/FileCard.jsx
|
|
2540
|
-
import
|
|
2718
|
+
import React46 from "react";
|
|
2541
2719
|
import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2542
2720
|
var TYPE_ICON = { pdf: "file-text", doc: "file-text", docx: "file-text", txt: "file-text", md: "file-text", xls: "file-spreadsheet", xlsx: "file-spreadsheet", csv: "file-spreadsheet", json: "file-json", js: "file-code", ts: "file-code", py: "file-code", png: "image", jpg: "image", jpeg: "image", gif: "image", svg: "image", webp: "image", mp3: "file-audio", wav: "file-audio", ogg: "file-audio", mp4: "file-video", zip: "file-archive", folder: "folder" };
|
|
2543
2721
|
function FileCard({ name, type, size, modified, preview, variant = "card", selected, onOpen, href, actions, meta, className, ...rest }) {
|
|
@@ -2559,7 +2737,7 @@ function FileCard({ name, type, size, modified, preview, variant = "card", selec
|
|
|
2559
2737
|
}
|
|
2560
2738
|
|
|
2561
2739
|
// src/data/Feed.jsx
|
|
2562
|
-
import
|
|
2740
|
+
import React47 from "react";
|
|
2563
2741
|
import { jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
2564
2742
|
var DEFAULT_LABELS23 = { reply: "Reply", like: "Like", liked: "Liked", replies: "replies" };
|
|
2565
2743
|
function Feed({ children, className, ...rest }) {
|
|
@@ -2609,7 +2787,7 @@ function FeedPost({ author, avatar, kind = "person", action, target, time, child
|
|
|
2609
2787
|
}
|
|
2610
2788
|
|
|
2611
2789
|
// src/data/ActivityTimeline.jsx
|
|
2612
|
-
import
|
|
2790
|
+
import React48, { useState as useState5 } from "react";
|
|
2613
2791
|
import { Fragment as Fragment3, jsx as jsx46, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
2614
2792
|
var KIND = { run: "play", step: "circle-dot", approval: "user-check", call: "phone", message: "message-square", note: "sticky-note", agent: "bot", deploy: "rocket", edit: "pencil", error: "circle-alert", success: "circle-check", warn: "triangle-alert", handoff: "arrow-right-left", email: "mail", event: "circle" };
|
|
2615
2793
|
var DEFAULT_LABELS24 = { show: "Show details", hide: "Hide details" };
|
|
@@ -2623,7 +2801,7 @@ function ActivityTimeline({ items = [], compact, labels, className, ...rest }) {
|
|
|
2623
2801
|
const head = it.group && it.group !== lastGroup ? /* @__PURE__ */ jsx46("li", { className: "agn-timeline__group", "aria-hidden": "true", children: it.group }, "g" + key) : null;
|
|
2624
2802
|
lastGroup = it.group || lastGroup;
|
|
2625
2803
|
const isOpen = open.has(key);
|
|
2626
|
-
return /* @__PURE__ */ jsxs41(
|
|
2804
|
+
return /* @__PURE__ */ jsxs41(React48.Fragment, { children: [
|
|
2627
2805
|
head,
|
|
2628
2806
|
/* @__PURE__ */ jsxs41("li", { className: cx("agn-timeline__item", "agn-timeline__item--" + tone, it.current && "agn-timeline__item--current", it.done === false && "agn-timeline__item--pending"), children: [
|
|
2629
2807
|
/* @__PURE__ */ jsx46("span", { className: "agn-timeline__marker", "aria-hidden": "true", children: /* @__PURE__ */ jsx46(Icon, { name: it.icon || KIND[it.kind] || "circle", size: compact ? 12 : 14 }) }),
|
|
@@ -2651,7 +2829,7 @@ function ActivityTimeline({ items = [], compact, labels, className, ...rest }) {
|
|
|
2651
2829
|
}
|
|
2652
2830
|
|
|
2653
2831
|
// src/data/Illustration.jsx
|
|
2654
|
-
import
|
|
2832
|
+
import React49 from "react";
|
|
2655
2833
|
import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2656
2834
|
var SCENES = {
|
|
2657
2835
|
empty: { icon: "inbox", cards: [[10, 58, 58, 32], [96, 14, 54, 30]], dots: [[1, 16, 22], [2, 84, 70], [3, 74, 12]] },
|
|
@@ -2687,7 +2865,7 @@ function Illustration({ scene = "empty", icon, product, title, message, action,
|
|
|
2687
2865
|
}
|
|
2688
2866
|
|
|
2689
2867
|
// src/data/Stat.jsx
|
|
2690
|
-
import
|
|
2868
|
+
import React50 from "react";
|
|
2691
2869
|
import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
2692
2870
|
function Stat({ value, label, delta, invert, sub, icon, size = "md", chart, locale, as: Comp = "div", className, ...rest }) {
|
|
2693
2871
|
let d = null;
|
|
@@ -2720,7 +2898,7 @@ function Stat({ value, label, delta, invert, sub, icon, size = "md", chart, loca
|
|
|
2720
2898
|
}
|
|
2721
2899
|
|
|
2722
2900
|
// src/data/MiniChart.jsx
|
|
2723
|
-
import
|
|
2901
|
+
import React51 from "react";
|
|
2724
2902
|
import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
2725
2903
|
var COLORS = ["var(--data-1)", "var(--data-2)", "var(--data-3)", "var(--data-4)", "var(--data-5)", "var(--data-6)"];
|
|
2726
2904
|
var PAD = { t: 6, r: 6, b: 18, l: 6 };
|
|
@@ -2736,8 +2914,8 @@ function path(vals, x, y, close, h) {
|
|
|
2736
2914
|
return close ? d + " L" + pts[pts.length - 1][0].toFixed(1) + " " + h + " L" + pts[0][0].toFixed(1) + " " + h + " Z" : d;
|
|
2737
2915
|
}
|
|
2738
2916
|
function useWidth(ref, fallback) {
|
|
2739
|
-
const [w, setW] =
|
|
2740
|
-
|
|
2917
|
+
const [w, setW] = React51.useState(null);
|
|
2918
|
+
React51.useEffect(() => {
|
|
2741
2919
|
const el = ref.current;
|
|
2742
2920
|
if (!el || typeof ResizeObserver === "undefined") return void 0;
|
|
2743
2921
|
const ro = new ResizeObserver((es) => {
|
|
@@ -2757,11 +2935,11 @@ function MiniChart({ type = "line", data, series, labels = [], height = 120, wid
|
|
|
2757
2935
|
const ref = reference == null ? null : typeof reference === "number" ? { value: reference } : reference;
|
|
2758
2936
|
const extra = [ref && ref.value, band && band.from, band && band.to].filter((v) => typeof v === "number");
|
|
2759
2937
|
const { hi, lo } = scale((stack ? cum.map((values) => ({ values })) : ser).concat(extra.length ? [{ values: extra }] : []), max, min);
|
|
2760
|
-
const figRef =
|
|
2938
|
+
const figRef = React51.useRef(null);
|
|
2761
2939
|
const W = useWidth(figRef, width), H = height, iw = Math.max(W - PAD.l - PAD.r, 1), ih = H - PAD.t - PAD.b;
|
|
2762
2940
|
const y = (v) => PAD.t + ih - (v - lo) / (hi - lo) * ih;
|
|
2763
2941
|
const x = (i) => PAD.l + (n === 1 ? iw / 2 : i / (n - 1) * iw);
|
|
2764
|
-
const id =
|
|
2942
|
+
const id = React51.useMemo(() => uid("agn-chart"), []);
|
|
2765
2943
|
const ticks2 = [lo, (lo + hi) / 2, hi];
|
|
2766
2944
|
const desc = ser.map((s) => (s.name ? s.name + ": " : "") + s.values.map(format).join(", ")).join("; ");
|
|
2767
2945
|
let marks;
|
|
@@ -2841,7 +3019,7 @@ function Sparkline({ data = [], width = 96, height = 24, area, color = 1, tone,
|
|
|
2841
3019
|
}
|
|
2842
3020
|
|
|
2843
3021
|
// src/data/Kanban.jsx
|
|
2844
|
-
import
|
|
3022
|
+
import React52, { useState as useState6 } from "react";
|
|
2845
3023
|
import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
2846
3024
|
var DEFAULT_LABELS25 = { add: "Add", limit: "limit", empty: "No cards", moveTo: "Move to" };
|
|
2847
3025
|
function Kanban({ columns = [], cards = [], onMove, onCardClick, onAdd, renderCard, labels, className, style, ...rest }) {
|
|
@@ -2967,7 +3145,7 @@ function Kanban({ columns = [], cards = [], onMove, onCardClick, onAdd, renderCa
|
|
|
2967
3145
|
}
|
|
2968
3146
|
|
|
2969
3147
|
// src/data/CalendarView.jsx
|
|
2970
|
-
import
|
|
3148
|
+
import React53 from "react";
|
|
2971
3149
|
import { jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
2972
3150
|
var DEFAULT_LABELS26 = { more: "more", today: "Today", prev: "Previous month", next: "Next month" };
|
|
2973
3151
|
var toDate = (d) => d instanceof Date ? d : new Date(d);
|
|
@@ -3047,7 +3225,7 @@ function CalendarView({ month, events = [], locale = "en", weekStartsOn = 1, tod
|
|
|
3047
3225
|
}
|
|
3048
3226
|
|
|
3049
3227
|
// src/data/Gantt.jsx
|
|
3050
|
-
import
|
|
3228
|
+
import React54 from "react";
|
|
3051
3229
|
import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
3052
3230
|
var DAY = 864e5;
|
|
3053
3231
|
var toDate2 = (d) => d instanceof Date ? d : new Date(d);
|
|
@@ -3113,7 +3291,7 @@ function Gantt({ tasks = [], start, end, unit = "day", colWidth, today = /* @__P
|
|
|
3113
3291
|
}
|
|
3114
3292
|
|
|
3115
3293
|
// src/data/DescriptionList.jsx
|
|
3116
|
-
import
|
|
3294
|
+
import React55 from "react";
|
|
3117
3295
|
import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
3118
3296
|
function DescriptionList({ items = [], columns = 1, horizontal, labelWidth, className, style, ...rest }) {
|
|
3119
3297
|
const list = items.map((it) => Array.isArray(it) ? { label: it[0], value: it[1] } : it);
|
|
@@ -3124,7 +3302,7 @@ function DescriptionList({ items = [], columns = 1, horizontal, labelWidth, clas
|
|
|
3124
3302
|
}
|
|
3125
3303
|
|
|
3126
3304
|
// src/data/Amount.jsx
|
|
3127
|
-
import
|
|
3305
|
+
import React56 from "react";
|
|
3128
3306
|
import { jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
3129
3307
|
function formatAmount(value, { currency = "TRY", locale = "tr-TR", decimals = 2, style } = {}) {
|
|
3130
3308
|
const n = Number(value);
|
|
@@ -3158,7 +3336,7 @@ function Amount({ value, currency = "TRY", locale = "tr-TR", decimals = 2, signe
|
|
|
3158
3336
|
}
|
|
3159
3337
|
|
|
3160
3338
|
// src/data/CodeBlock.jsx
|
|
3161
|
-
import
|
|
3339
|
+
import React57, { useState as useState7 } from "react";
|
|
3162
3340
|
import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
3163
3341
|
var DEFAULT_LABELS27 = { copy: "Copy", copied: "Copied", wrap: "Wrap lines", unwrap: "Unwrap lines" };
|
|
3164
3342
|
var KW = { js: /^(const|let|var|function|return|if|else|for|while|import|export|from|default|new|await|async|class|extends|try|catch|throw|typeof|null|undefined|true|false|this)$/, bash: /^(if|then|else|fi|for|do|done|in|case|esac|function|export|echo|cd|ls|cat|grep|curl|docker|git|npm|pnpm|npx|node|python3?|sudo|set|while|return|exit)$/, json: /^(true|false|null)$/ };
|
|
@@ -3264,7 +3442,7 @@ function CodeBlock({ code = "", language = "text", title, lineNumbers = true, co
|
|
|
3264
3442
|
}
|
|
3265
3443
|
|
|
3266
3444
|
// src/data/JsonTree.jsx
|
|
3267
|
-
import
|
|
3445
|
+
import React58, { useState as useState8 } from "react";
|
|
3268
3446
|
import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
3269
3447
|
var DEFAULT_LABELS28 = { items: "items", keys: "keys", expand: "Expand", collapse: "Collapse", copy: "Copy", copied: "Copied" };
|
|
3270
3448
|
var isObj = (v) => v !== null && typeof v === "object";
|
|
@@ -3343,7 +3521,7 @@ function JsonTree({ data, defaultDepth = 2, title, copy = true, maxHeight, label
|
|
|
3343
3521
|
}
|
|
3344
3522
|
|
|
3345
3523
|
// src/data/DiffView.jsx
|
|
3346
|
-
import
|
|
3524
|
+
import React59 from "react";
|
|
3347
3525
|
import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
3348
3526
|
var DEFAULT_LABELS29 = { added: "added", removed: "removed", before: "Before", after: "After", unchanged: "unchanged lines" };
|
|
3349
3527
|
function diffLines(before = "", after = "") {
|
|
@@ -3565,7 +3743,7 @@ function DiffView({ before, after, lines, mode = "unified", title, context = 3,
|
|
|
3565
3743
|
}
|
|
3566
3744
|
|
|
3567
3745
|
// src/data/Heatmap.jsx
|
|
3568
|
-
import
|
|
3746
|
+
import React60 from "react";
|
|
3569
3747
|
import { jsx as jsx58, jsxs as jsxs53 } from "react/jsx-runtime";
|
|
3570
3748
|
var STEPS = {
|
|
3571
3749
|
ok: ["var(--ok-100)", "var(--ok-200)", "var(--ok-400)", "var(--ok-600)"],
|
|
@@ -3672,7 +3850,7 @@ function Heatmap({ rows = [], columns = [], values = [], thresholds, scale: scal
|
|
|
3672
3850
|
}
|
|
3673
3851
|
|
|
3674
3852
|
// src/layout/Card.jsx
|
|
3675
|
-
import
|
|
3853
|
+
import React61 from "react";
|
|
3676
3854
|
import { jsx as jsx59, jsxs as jsxs54 } from "react/jsx-runtime";
|
|
3677
3855
|
var DEFAULT_LABELS30 = { viewAll: "View all" };
|
|
3678
3856
|
function Card({ title, icon, count, actions, footer, viewAll, viewAllHref, padding = "md", sunken, interactive, selected, labels, as: Comp = "section", children, className, ...rest }) {
|
|
@@ -3692,7 +3870,7 @@ function Card({ title, icon, count, actions, footer, viewAll, viewAllHref, paddi
|
|
|
3692
3870
|
}
|
|
3693
3871
|
|
|
3694
3872
|
// src/layout/Toolbar.jsx
|
|
3695
|
-
import
|
|
3873
|
+
import React62 from "react";
|
|
3696
3874
|
import { jsx as jsx60, jsxs as jsxs55 } from "react/jsx-runtime";
|
|
3697
3875
|
var DEFAULT_LABELS31 = { search: "Search", clear: "Clear search" };
|
|
3698
3876
|
function Toolbar({ title, count, search, left, right, sticky, bare, labels, children, className, ...rest }) {
|
|
@@ -3724,88 +3902,6 @@ import React64 from "react";
|
|
|
3724
3902
|
|
|
3725
3903
|
// src/feedback/SidePanel.jsx
|
|
3726
3904
|
import React63 from "react";
|
|
3727
|
-
|
|
3728
|
-
// src/layout/responsive.js
|
|
3729
|
-
import React62 from "react";
|
|
3730
|
-
var BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536 };
|
|
3731
|
-
var BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "2xl"];
|
|
3732
|
-
function breakpointFor(width) {
|
|
3733
|
-
let name = "base";
|
|
3734
|
-
for (const k of BREAKPOINT_ORDER.slice(1)) if (width >= BREAKPOINTS[k]) name = k;
|
|
3735
|
-
return name;
|
|
3736
|
-
}
|
|
3737
|
-
function toPx(bp) {
|
|
3738
|
-
return typeof bp === "number" ? bp : BREAKPOINTS[bp] != null ? BREAKPOINTS[bp] : 0;
|
|
3739
|
-
}
|
|
3740
|
-
function atLeast(a, b) {
|
|
3741
|
-
return BREAKPOINT_ORDER.indexOf(a) >= BREAKPOINT_ORDER.indexOf(b);
|
|
3742
|
-
}
|
|
3743
|
-
var useIsoLayoutEffect = typeof window !== "undefined" ? React62.useLayoutEffect : React62.useEffect;
|
|
3744
|
-
function useElementWidth(ref) {
|
|
3745
|
-
const [w, setW] = React62.useState(null);
|
|
3746
|
-
useIsoLayoutEffect(() => {
|
|
3747
|
-
const el = ref.current;
|
|
3748
|
-
if (!el) return void 0;
|
|
3749
|
-
const read2 = () => {
|
|
3750
|
-
const n = el.offsetWidth;
|
|
3751
|
-
setW((p) => p === n ? p : n);
|
|
3752
|
-
};
|
|
3753
|
-
read2();
|
|
3754
|
-
if (typeof ResizeObserver === "undefined") return void 0;
|
|
3755
|
-
const ro = new ResizeObserver(read2);
|
|
3756
|
-
ro.observe(el);
|
|
3757
|
-
return () => ro.disconnect();
|
|
3758
|
-
}, [ref]);
|
|
3759
|
-
return w;
|
|
3760
|
-
}
|
|
3761
|
-
function useBreakpoint(ref) {
|
|
3762
|
-
const w = useElementWidth(ref);
|
|
3763
|
-
return w == null ? null : breakpointFor(w);
|
|
3764
|
-
}
|
|
3765
|
-
var FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
|
|
3766
|
-
function useOverlayFocus(ref, open, onClose) {
|
|
3767
|
-
const closeRef = React62.useRef(onClose);
|
|
3768
|
-
closeRef.current = onClose;
|
|
3769
|
-
React62.useEffect(() => {
|
|
3770
|
-
if (!open) return void 0;
|
|
3771
|
-
const el = ref.current;
|
|
3772
|
-
if (!el) return void 0;
|
|
3773
|
-
const prev = typeof document !== "undefined" ? document.activeElement : null;
|
|
3774
|
-
if (!el.contains(document.activeElement)) el.focus({ preventScroll: true });
|
|
3775
|
-
const onKey = (e) => {
|
|
3776
|
-
if (e.key === "Escape") {
|
|
3777
|
-
if (closeRef.current) {
|
|
3778
|
-
e.stopPropagation();
|
|
3779
|
-
closeRef.current();
|
|
3780
|
-
}
|
|
3781
|
-
return;
|
|
3782
|
-
}
|
|
3783
|
-
if (e.key !== "Tab" || !el.contains(document.activeElement)) return;
|
|
3784
|
-
const f = Array.from(el.querySelectorAll(FOCUSABLE)).filter((n) => n.offsetParent !== null || n === document.activeElement);
|
|
3785
|
-
if (!f.length) {
|
|
3786
|
-
e.preventDefault();
|
|
3787
|
-
el.focus({ preventScroll: true });
|
|
3788
|
-
return;
|
|
3789
|
-
}
|
|
3790
|
-
const first = f[0], last = f[f.length - 1];
|
|
3791
|
-
if (e.shiftKey && (document.activeElement === first || document.activeElement === el)) {
|
|
3792
|
-
e.preventDefault();
|
|
3793
|
-
last.focus();
|
|
3794
|
-
} else if (!e.shiftKey && document.activeElement === last) {
|
|
3795
|
-
e.preventDefault();
|
|
3796
|
-
first.focus();
|
|
3797
|
-
}
|
|
3798
|
-
};
|
|
3799
|
-
el.addEventListener("keydown", onKey);
|
|
3800
|
-
return () => {
|
|
3801
|
-
el.removeEventListener("keydown", onKey);
|
|
3802
|
-
const a = document.activeElement;
|
|
3803
|
-
if (prev && prev.focus && document.contains(prev) && (!a || a === document.body || el.contains(a))) prev.focus({ preventScroll: true });
|
|
3804
|
-
};
|
|
3805
|
-
}, [open, ref]);
|
|
3806
|
-
}
|
|
3807
|
-
|
|
3808
|
-
// src/feedback/SidePanel.jsx
|
|
3809
3905
|
import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
|
|
3810
3906
|
function SidePanel({ open = true, onClose, title, eyebrow, subtitle, tabs, actions, footer, size = "md", width, mode = "overlay", scrim = true, children, labels, className, style, ...rest }) {
|
|
3811
3907
|
const L = { close: "Close", ...labels };
|
|
@@ -3998,9 +4094,9 @@ function GridItem({ span = 12, start, rowSpan, as: Comp = "div", children, class
|
|
|
3998
4094
|
}
|
|
3999
4095
|
|
|
4000
4096
|
// src/layout/Room.jsx
|
|
4001
|
-
import React66, { useState as useState9, useLayoutEffect, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
4097
|
+
import React66, { useState as useState9, useLayoutEffect as useLayoutEffect2, useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
4002
4098
|
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
4003
|
-
var useIsoLayoutEffect2 = typeof window !== "undefined" ?
|
|
4099
|
+
var useIsoLayoutEffect2 = typeof window !== "undefined" ? useLayoutEffect2 : useEffect3;
|
|
4004
4100
|
function Room({ theme, padding = "lg", as: Comp = "section", children, className, ...rest }) {
|
|
4005
4101
|
const ref = useRef3(null);
|
|
4006
4102
|
const [auto, setAuto] = useState9("dark");
|
|
@@ -4994,9 +5090,113 @@ function Stepper({ steps = [], current = 0, vertical, size = "md", errorSteps =
|
|
|
4994
5090
|
}) });
|
|
4995
5091
|
}
|
|
4996
5092
|
|
|
4997
|
-
// src/
|
|
5093
|
+
// src/navigation/ActivityBar.jsx
|
|
5094
|
+
import React87 from "react";
|
|
5095
|
+
|
|
5096
|
+
// src/feedback/Tooltip.jsx
|
|
4998
5097
|
import React86 from "react";
|
|
4999
5098
|
import { jsx as jsx84, jsxs as jsxs77 } from "react/jsx-runtime";
|
|
5099
|
+
function Tooltip({ content, kbd, placement = "top", delay = 400, open: openProp, children, className, ...rest }) {
|
|
5100
|
+
const [own, setOwn] = React86.useState(false);
|
|
5101
|
+
const open = openProp != null ? openProp : own;
|
|
5102
|
+
const timer = React86.useRef(null);
|
|
5103
|
+
const id = React86.useMemo(() => uid("tip"), []);
|
|
5104
|
+
const show2 = () => {
|
|
5105
|
+
clearTimeout(timer.current);
|
|
5106
|
+
timer.current = setTimeout(() => setOwn(true), delay);
|
|
5107
|
+
};
|
|
5108
|
+
const hide = () => {
|
|
5109
|
+
clearTimeout(timer.current);
|
|
5110
|
+
setOwn(false);
|
|
5111
|
+
};
|
|
5112
|
+
React86.useEffect(() => () => clearTimeout(timer.current), []);
|
|
5113
|
+
React86.useEffect(() => {
|
|
5114
|
+
if (!open) return;
|
|
5115
|
+
const k = (e) => e.key === "Escape" && hide();
|
|
5116
|
+
document.addEventListener("keydown", k);
|
|
5117
|
+
return () => document.removeEventListener("keydown", k);
|
|
5118
|
+
}, [open]);
|
|
5119
|
+
const child = React86.Children.only(children);
|
|
5120
|
+
return (
|
|
5121
|
+
// biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only listens: hover and focus bubble up from the focusable trigger it wraps; it is not itself operable
|
|
5122
|
+
/* @__PURE__ */ jsxs77("span", { className: cx("agn-tip-wrap", className), onMouseEnter: show2, onMouseLeave: hide, onFocus: show2, onBlur: hide, ...rest, children: [
|
|
5123
|
+
React86.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] }),
|
|
5124
|
+
open && /* @__PURE__ */ jsxs77("span", { role: "tooltip", id, className: cx("agn-tip", "agn-tip--" + placement), children: [
|
|
5125
|
+
content,
|
|
5126
|
+
kbd && /* @__PURE__ */ jsx84("kbd", { className: "agn-tip__kbd", children: kbd })
|
|
5127
|
+
] })
|
|
5128
|
+
] })
|
|
5129
|
+
);
|
|
5130
|
+
}
|
|
5131
|
+
|
|
5132
|
+
// src/navigation/ActivityBar.jsx
|
|
5133
|
+
import { jsx as jsx85, jsxs as jsxs78 } from "react/jsx-runtime";
|
|
5134
|
+
var DEFAULT_LABELS50 = { navigation: "Views" };
|
|
5135
|
+
function ActivityBar({ items = [], footerItems = [], active, onSelect, side = "left", labels, className, ...rest }) {
|
|
5136
|
+
const l = { ...DEFAULT_LABELS50, ...labels };
|
|
5137
|
+
const all = [...items, ...footerItems];
|
|
5138
|
+
const enabled = all.filter((it) => !it.disabled);
|
|
5139
|
+
const activeEnabled = enabled.some((it) => it.id === active);
|
|
5140
|
+
const [focusId, setFocusId] = React87.useState(null);
|
|
5141
|
+
const stop = focusId != null && enabled.some((it) => it.id === focusId) ? focusId : activeEnabled ? active : enabled[0] && enabled[0].id;
|
|
5142
|
+
const refs = React87.useRef({});
|
|
5143
|
+
const move = (id) => {
|
|
5144
|
+
setFocusId(id);
|
|
5145
|
+
const el = refs.current[id];
|
|
5146
|
+
if (el) el.focus();
|
|
5147
|
+
};
|
|
5148
|
+
const onKey = (e, id) => {
|
|
5149
|
+
const i = enabled.findIndex((it) => it.id === id);
|
|
5150
|
+
if (i < 0) return;
|
|
5151
|
+
let next = null;
|
|
5152
|
+
if (e.key === "ArrowDown") next = enabled[(i + 1) % enabled.length];
|
|
5153
|
+
else if (e.key === "ArrowUp") next = enabled[(i - 1 + enabled.length) % enabled.length];
|
|
5154
|
+
else if (e.key === "Home") next = enabled[0];
|
|
5155
|
+
else if (e.key === "End") next = enabled[enabled.length - 1];
|
|
5156
|
+
if (next) {
|
|
5157
|
+
e.preventDefault();
|
|
5158
|
+
move(next.id);
|
|
5159
|
+
}
|
|
5160
|
+
};
|
|
5161
|
+
const renderItem = (it) => {
|
|
5162
|
+
const sel = it.id === active;
|
|
5163
|
+
const glyph = typeof it.icon === "string" ? /* @__PURE__ */ jsx85(Icon, { name: it.icon, size: 20, strokeWidth: sel ? 2 : 1.75 }) : it.icon;
|
|
5164
|
+
return /* @__PURE__ */ jsx85(Tooltip, { content: it.label, placement: side === "right" ? "left" : "right", className: "agn-activitybar__tip", children: /* @__PURE__ */ jsx85(
|
|
5165
|
+
"button",
|
|
5166
|
+
{
|
|
5167
|
+
ref: (el) => {
|
|
5168
|
+
refs.current[it.id] = el;
|
|
5169
|
+
},
|
|
5170
|
+
type: "button",
|
|
5171
|
+
role: "tab",
|
|
5172
|
+
id: it.tabId,
|
|
5173
|
+
className: cx("agn-activitybar__item", "agn-focus-inset", sel && "agn-activitybar__item--active"),
|
|
5174
|
+
"aria-selected": sel,
|
|
5175
|
+
"aria-controls": it.controls,
|
|
5176
|
+
"aria-label": it.badge != null && it.badge !== "" ? it.label + " (" + it.badge + ")" : it.label,
|
|
5177
|
+
disabled: it.disabled,
|
|
5178
|
+
tabIndex: it.id === stop ? 0 : -1,
|
|
5179
|
+
onFocus: () => setFocusId(it.id),
|
|
5180
|
+
onKeyDown: (e) => onKey(e, it.id),
|
|
5181
|
+
onClick: () => {
|
|
5182
|
+
if (!it.disabled && onSelect) onSelect(it.id, it);
|
|
5183
|
+
},
|
|
5184
|
+
children: /* @__PURE__ */ jsxs78("span", { className: "agn-activitybar__glyph", children: [
|
|
5185
|
+
glyph,
|
|
5186
|
+
it.badge != null && it.badge !== "" && /* @__PURE__ */ jsx85(Badge, { tone: "signal", solid: true, size: "sm", count: typeof it.badge === "number" ? it.badge : void 0, className: "agn-activitybar__badge", "aria-hidden": "true", children: typeof it.badge === "number" ? void 0 : it.badge })
|
|
5187
|
+
] })
|
|
5188
|
+
}
|
|
5189
|
+
) }, it.id);
|
|
5190
|
+
};
|
|
5191
|
+
return /* @__PURE__ */ jsxs78("div", { role: "tablist", "aria-orientation": "vertical", "aria-label": l.navigation, className: cx("agn-activitybar", side === "right" && "agn-activitybar--right", className), ...rest, children: [
|
|
5192
|
+
/* @__PURE__ */ jsx85("div", { role: "presentation", className: "agn-activitybar__group", children: items.map(renderItem) }),
|
|
5193
|
+
footerItems.length > 0 && /* @__PURE__ */ jsx85("div", { role: "presentation", className: "agn-activitybar__group agn-activitybar__group--footer", children: footerItems.map(renderItem) })
|
|
5194
|
+
] });
|
|
5195
|
+
}
|
|
5196
|
+
|
|
5197
|
+
// src/feedback/AginiesLoader.jsx
|
|
5198
|
+
import React88 from "react";
|
|
5199
|
+
import { jsx as jsx86, jsxs as jsxs79 } from "react/jsx-runtime";
|
|
5000
5200
|
var SIZE = { page: 96, region: 40, inline: 16 };
|
|
5001
5201
|
function AginiesLoader({ tier = "region", variant = "orbit", label, showLabel, labels, className, ...rest }) {
|
|
5002
5202
|
const L = { loading: "Loading", ...labels };
|
|
@@ -5005,23 +5205,23 @@ function AginiesLoader({ tier = "region", variant = "orbit", label, showLabel, l
|
|
|
5005
5205
|
const visible = showLabel != null ? showLabel : tier === "page";
|
|
5006
5206
|
return (
|
|
5007
5207
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5008
|
-
/* @__PURE__ */
|
|
5009
|
-
/* @__PURE__ */
|
|
5010
|
-
tier === "page" && /* @__PURE__ */
|
|
5011
|
-
visible ? /* @__PURE__ */
|
|
5208
|
+
/* @__PURE__ */ jsxs79(Tag2, { className: cx("agn-loader", "agn-loader--" + tier, "agn-loader--" + variant, className), role: "status", "aria-busy": "true", "aria-live": "polite", ...rest, children: [
|
|
5209
|
+
/* @__PURE__ */ jsx86("span", { className: "agn-loader__mark", children: /* @__PURE__ */ jsx86(AginiesMark, { size: SIZE[tier] || SIZE.region, decorative: true }) }),
|
|
5210
|
+
tier === "page" && /* @__PURE__ */ jsx86("span", { className: "agn-loader__word", children: "Aginies" }),
|
|
5211
|
+
visible ? /* @__PURE__ */ jsx86("span", { className: "agn-loader__label", children: text }) : /* @__PURE__ */ jsx86("span", { className: "agn-sr", children: text })
|
|
5012
5212
|
] })
|
|
5013
5213
|
);
|
|
5014
5214
|
}
|
|
5015
5215
|
|
|
5016
5216
|
// src/feedback/Skeleton.jsx
|
|
5017
|
-
import
|
|
5018
|
-
import { jsx as
|
|
5217
|
+
import React89 from "react";
|
|
5218
|
+
import { jsx as jsx87, jsxs as jsxs80 } from "react/jsx-runtime";
|
|
5019
5219
|
var WIDTHS2 = ["72%", "48%", "60%", "36%", "82%", "54%"];
|
|
5020
5220
|
function Skeleton({ shape = "text", lines = 3, width, height, className, style, ...rest }) {
|
|
5021
5221
|
if (shape === "text") {
|
|
5022
|
-
return /* @__PURE__ */
|
|
5222
|
+
return /* @__PURE__ */ jsx87("div", { className: cx("agn-skeleton-text", className), style: { width, ...style }, "aria-hidden": "true", ...rest, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx87("span", { className: "agn-skeleton agn-skeleton--line", style: lines > 1 && i === lines - 1 ? { width: "62%" } : void 0 }, i)) });
|
|
5023
5223
|
}
|
|
5024
|
-
return /* @__PURE__ */
|
|
5224
|
+
return /* @__PURE__ */ jsx87("span", { className: cx("agn-skeleton", "agn-skeleton--" + shape, className), style: { width, height, ...style }, "aria-hidden": "true", ...rest });
|
|
5025
5225
|
}
|
|
5026
5226
|
function PageSkeleton({ header = true, rows = 6, columns = 4, labels, className, ...rest }) {
|
|
5027
5227
|
const L = { loading: "Loading page", ...labels };
|
|
@@ -5029,96 +5229,96 @@ function PageSkeleton({ header = true, rows = 6, columns = 4, labels, className,
|
|
|
5029
5229
|
const grid = { gridTemplateColumns: cols.map((i) => i === 0 ? "2fr" : "1fr").join(" ") };
|
|
5030
5230
|
return (
|
|
5031
5231
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5032
|
-
/* @__PURE__ */
|
|
5033
|
-
/* @__PURE__ */
|
|
5034
|
-
header && /* @__PURE__ */
|
|
5035
|
-
/* @__PURE__ */
|
|
5036
|
-
/* @__PURE__ */
|
|
5037
|
-
/* @__PURE__ */
|
|
5232
|
+
/* @__PURE__ */ jsxs80("div", { className: cx("agn-page-skeleton", className), role: "status", "aria-busy": "true", ...rest, children: [
|
|
5233
|
+
/* @__PURE__ */ jsx87("span", { className: "agn-sr", children: L.loading }),
|
|
5234
|
+
header && /* @__PURE__ */ jsxs80("div", { className: "agn-page-skeleton__header", "aria-hidden": "true", children: [
|
|
5235
|
+
/* @__PURE__ */ jsxs80("div", { children: [
|
|
5236
|
+
/* @__PURE__ */ jsx87(Skeleton, { shape: "line", width: 88, height: 8 }),
|
|
5237
|
+
/* @__PURE__ */ jsx87(Skeleton, { shape: "rect", width: 236, height: 22, style: { marginTop: 10 } })
|
|
5038
5238
|
] }),
|
|
5039
|
-
/* @__PURE__ */
|
|
5239
|
+
/* @__PURE__ */ jsx87(Skeleton, { shape: "rect", width: 108, height: "var(--control-h)" })
|
|
5040
5240
|
] }),
|
|
5041
|
-
/* @__PURE__ */
|
|
5042
|
-
/* @__PURE__ */
|
|
5043
|
-
Array.from({ length: rows }, (_, r) => /* @__PURE__ */
|
|
5241
|
+
/* @__PURE__ */ jsxs80("div", { className: "agn-page-skeleton__table", "aria-hidden": "true", children: [
|
|
5242
|
+
/* @__PURE__ */ jsx87("div", { className: "agn-page-skeleton__row agn-page-skeleton__row--head", style: grid, children: cols.map((c) => /* @__PURE__ */ jsx87(Skeleton, { shape: "line", width: "46%", height: 8 }, c)) }),
|
|
5243
|
+
Array.from({ length: rows }, (_, r) => /* @__PURE__ */ jsx87("div", { className: "agn-page-skeleton__row", style: grid, children: cols.map((c) => /* @__PURE__ */ jsx87(Skeleton, { shape: "line", width: WIDTHS2[(r + c) % WIDTHS2.length] }, c)) }, r))
|
|
5044
5244
|
] })
|
|
5045
5245
|
] })
|
|
5046
5246
|
);
|
|
5047
5247
|
}
|
|
5048
5248
|
|
|
5049
5249
|
// src/feedback/Alert.jsx
|
|
5050
|
-
import
|
|
5051
|
-
import { jsx as
|
|
5250
|
+
import React90 from "react";
|
|
5251
|
+
import { jsx as jsx88, jsxs as jsxs81 } from "react/jsx-runtime";
|
|
5052
5252
|
var TONE_ICON = { info: "info", ok: "circle-check", warn: "triangle-alert", bad: "circle-alert", neutral: "info", signal: "info" };
|
|
5053
5253
|
function Alert({ tone = "info", icon, title, children, actions, onDismiss, labels, className, ...rest }) {
|
|
5054
5254
|
const L = { dismiss: "Dismiss", ...labels };
|
|
5055
|
-
return /* @__PURE__ */
|
|
5056
|
-
/* @__PURE__ */
|
|
5057
|
-
/* @__PURE__ */
|
|
5058
|
-
title && /* @__PURE__ */
|
|
5059
|
-
children != null && /* @__PURE__ */
|
|
5060
|
-
actions && /* @__PURE__ */
|
|
5255
|
+
return /* @__PURE__ */ jsxs81("div", { className: cx("agn-alert", "agn-alert--" + tone, className), role: tone === "bad" ? "alert" : "status", ...rest, children: [
|
|
5256
|
+
/* @__PURE__ */ jsx88(Icon, { name: icon || TONE_ICON[tone] || "info", size: 16, className: "agn-alert__icon" }),
|
|
5257
|
+
/* @__PURE__ */ jsxs81("div", { className: "agn-alert__body", children: [
|
|
5258
|
+
title && /* @__PURE__ */ jsx88("div", { className: "agn-alert__title", children: title }),
|
|
5259
|
+
children != null && /* @__PURE__ */ jsx88("div", { className: "agn-alert__text", children }),
|
|
5260
|
+
actions && /* @__PURE__ */ jsx88("div", { className: "agn-alert__actions", children: actions })
|
|
5061
5261
|
] }),
|
|
5062
|
-
onDismiss && /* @__PURE__ */
|
|
5262
|
+
onDismiss && /* @__PURE__ */ jsx88(ButtonIcon, { icon: "x", label: L.dismiss, size: "xs", onClick: onDismiss, className: "agn-alert__close" })
|
|
5063
5263
|
] });
|
|
5064
5264
|
}
|
|
5065
5265
|
|
|
5066
5266
|
// src/feedback/Toast.jsx
|
|
5067
|
-
import
|
|
5068
|
-
import { jsx as
|
|
5267
|
+
import React91 from "react";
|
|
5268
|
+
import { jsx as jsx89, jsxs as jsxs82 } from "react/jsx-runtime";
|
|
5069
5269
|
function Toast({ tone = "ok", title, children, action, onDismiss, duration, labels, className, ...rest }) {
|
|
5070
5270
|
const L = { dismiss: "Dismiss", ...labels };
|
|
5071
|
-
|
|
5271
|
+
React91.useEffect(() => {
|
|
5072
5272
|
if (!duration || !onDismiss) return;
|
|
5073
5273
|
const t = setTimeout(onDismiss, duration);
|
|
5074
5274
|
return () => clearTimeout(t);
|
|
5075
5275
|
}, [duration, onDismiss]);
|
|
5076
|
-
return /* @__PURE__ */
|
|
5077
|
-
/* @__PURE__ */
|
|
5078
|
-
/* @__PURE__ */
|
|
5079
|
-
title && /* @__PURE__ */
|
|
5080
|
-
children != null && /* @__PURE__ */
|
|
5081
|
-
action && /* @__PURE__ */
|
|
5276
|
+
return /* @__PURE__ */ jsxs82("div", { className: cx("agn-toast", "agn-toast--" + tone, className), role: tone === "bad" ? "alert" : "status", ...rest, children: [
|
|
5277
|
+
/* @__PURE__ */ jsx89(Icon, { name: TONE_ICON[tone] || "info", size: 16, className: "agn-toast__icon" }),
|
|
5278
|
+
/* @__PURE__ */ jsxs82("div", { className: "agn-toast__body", children: [
|
|
5279
|
+
title && /* @__PURE__ */ jsx89("div", { className: "agn-toast__title", children: title }),
|
|
5280
|
+
children != null && /* @__PURE__ */ jsx89("div", { className: "agn-toast__text", children }),
|
|
5281
|
+
action && /* @__PURE__ */ jsx89("div", { className: "agn-toast__action", children: action })
|
|
5082
5282
|
] }),
|
|
5083
|
-
onDismiss && /* @__PURE__ */
|
|
5283
|
+
onDismiss && /* @__PURE__ */ jsx89(ButtonIcon, { icon: "x", label: L.dismiss, size: "xs", onClick: onDismiss, className: "agn-toast__close" })
|
|
5084
5284
|
] });
|
|
5085
5285
|
}
|
|
5086
5286
|
function ToastContainer({ position = "bottom-right", static: isStatic, contained, children, className, ...rest }) {
|
|
5087
5287
|
const st = isStatic || position === "static";
|
|
5088
|
-
return /* @__PURE__ */
|
|
5288
|
+
return /* @__PURE__ */ jsx89("div", { className: cx("agn-toasts", !st && "agn-toasts--" + position, st && "agn-toasts--static", contained && !st && "agn-toasts--contained", className), "aria-live": "polite", ...rest, children });
|
|
5089
5289
|
}
|
|
5090
5290
|
function useToasts({ duration = 5e3, max = 3 } = {}) {
|
|
5091
|
-
const [live, setLive] =
|
|
5092
|
-
const [tick, setTick] =
|
|
5093
|
-
const queue =
|
|
5094
|
-
const timers =
|
|
5095
|
-
const dismiss =
|
|
5291
|
+
const [live, setLive] = React91.useState([]);
|
|
5292
|
+
const [tick, setTick] = React91.useState(0);
|
|
5293
|
+
const queue = React91.useRef([]);
|
|
5294
|
+
const timers = React91.useRef({});
|
|
5295
|
+
const dismiss = React91.useCallback((id) => {
|
|
5096
5296
|
clearTimeout(timers.current[id]);
|
|
5097
5297
|
delete timers.current[id];
|
|
5098
5298
|
setLive((l) => l.filter((t) => t.id !== id));
|
|
5099
5299
|
}, []);
|
|
5100
|
-
|
|
5300
|
+
React91.useEffect(() => {
|
|
5101
5301
|
const room = max - live.length;
|
|
5102
5302
|
if (room > 0 && queue.current.length) {
|
|
5103
5303
|
const take = queue.current.splice(0, room);
|
|
5104
5304
|
setLive((l) => l.concat(take));
|
|
5105
5305
|
}
|
|
5106
5306
|
}, [live, max, tick]);
|
|
5107
|
-
|
|
5307
|
+
React91.useEffect(() => {
|
|
5108
5308
|
live.forEach((t) => {
|
|
5109
5309
|
const ms = t.duration == null ? duration : t.duration;
|
|
5110
5310
|
if (timers.current[t.id] || !ms) return;
|
|
5111
5311
|
timers.current[t.id] = setTimeout(() => dismiss(t.id), ms);
|
|
5112
5312
|
});
|
|
5113
5313
|
}, [live, duration, dismiss]);
|
|
5114
|
-
|
|
5115
|
-
const push =
|
|
5314
|
+
React91.useEffect(() => () => Object.values(timers.current).forEach(clearTimeout), []);
|
|
5315
|
+
const push = React91.useCallback((toast) => {
|
|
5116
5316
|
const t = { id: uid("toast"), tone: "ok", ...toast };
|
|
5117
5317
|
queue.current.push(t);
|
|
5118
5318
|
setTick((n) => n + 1);
|
|
5119
5319
|
return t.id;
|
|
5120
5320
|
}, []);
|
|
5121
|
-
const clear =
|
|
5321
|
+
const clear = React91.useCallback(() => {
|
|
5122
5322
|
queue.current = [];
|
|
5123
5323
|
Object.values(timers.current).forEach(clearTimeout);
|
|
5124
5324
|
timers.current = {};
|
|
@@ -5128,39 +5328,39 @@ function useToasts({ duration = 5e3, max = 3 } = {}) {
|
|
|
5128
5328
|
}
|
|
5129
5329
|
|
|
5130
5330
|
// src/feedback/ScopedNotification.jsx
|
|
5131
|
-
import
|
|
5132
|
-
import { jsx as
|
|
5331
|
+
import React92 from "react";
|
|
5332
|
+
import { jsx as jsx90, jsxs as jsxs83 } from "react/jsx-runtime";
|
|
5133
5333
|
function ScopedNotification({ tone = "neutral", icon, children, action, className, ...rest }) {
|
|
5134
|
-
return /* @__PURE__ */
|
|
5135
|
-
/* @__PURE__ */
|
|
5136
|
-
/* @__PURE__ */
|
|
5137
|
-
action && /* @__PURE__ */
|
|
5334
|
+
return /* @__PURE__ */ jsxs83("div", { className: cx("agn-scoped", "agn-scoped--" + tone, className), role: tone === "bad" ? "alert" : "status", ...rest, children: [
|
|
5335
|
+
/* @__PURE__ */ jsx90(Icon, { name: icon || TONE_ICON[tone] || "info", size: 14, className: "agn-scoped__icon" }),
|
|
5336
|
+
/* @__PURE__ */ jsx90("div", { className: "agn-scoped__text", children }),
|
|
5337
|
+
action && /* @__PURE__ */ jsx90("div", { className: "agn-scoped__action", children: action })
|
|
5138
5338
|
] });
|
|
5139
5339
|
}
|
|
5140
5340
|
|
|
5141
5341
|
// src/feedback/Notification.jsx
|
|
5142
|
-
import
|
|
5143
|
-
import { jsx as
|
|
5342
|
+
import React93 from "react";
|
|
5343
|
+
import { jsx as jsx91, jsxs as jsxs84 } from "react/jsx-runtime";
|
|
5144
5344
|
var initials2 = (name = "") => String(name).trim().split(/\s+/).slice(0, 2).map((w) => w.charAt(0).toLocaleUpperCase("tr-TR")).join("");
|
|
5145
5345
|
function Notification({ title, message, time, unread, avatar, icon, object, onClick, as, labels, className, ...rest }) {
|
|
5146
5346
|
const NL = { unread: "unread", ...labels };
|
|
5147
5347
|
const Tag2 = as || (onClick ? "button" : "div");
|
|
5148
|
-
return /* @__PURE__ */
|
|
5149
|
-
/* @__PURE__ */
|
|
5150
|
-
avatar ? /* @__PURE__ */
|
|
5151
|
-
/* @__PURE__ */
|
|
5152
|
-
/* @__PURE__ */
|
|
5348
|
+
return /* @__PURE__ */ jsxs84(Tag2, { type: Tag2 === "button" ? "button" : void 0, className: cx("agn-notif", unread && "agn-notif--unread", onClick && "agn-notif--clickable agn-focus-inset", className), onClick, ...rest, children: [
|
|
5349
|
+
/* @__PURE__ */ jsx91("span", { className: "agn-notif__dot", "aria-hidden": "true" }),
|
|
5350
|
+
avatar ? /* @__PURE__ */ jsx91("span", { className: "agn-notif__avatar", "aria-hidden": "true", children: initials2(avatar) }) : /* @__PURE__ */ jsx91("span", { className: "agn-notif__tile", "aria-hidden": "true", children: /* @__PURE__ */ jsx91(Icon, { name: icon || "bell", size: 16 }) }),
|
|
5351
|
+
/* @__PURE__ */ jsxs84("span", { className: "agn-notif__body", children: [
|
|
5352
|
+
/* @__PURE__ */ jsxs84("span", { className: "agn-notif__title", children: [
|
|
5153
5353
|
title,
|
|
5154
|
-
unread && /* @__PURE__ */
|
|
5354
|
+
unread && /* @__PURE__ */ jsxs84("span", { className: "agn-sr", children: [
|
|
5155
5355
|
" (",
|
|
5156
5356
|
NL.unread,
|
|
5157
5357
|
")"
|
|
5158
5358
|
] })
|
|
5159
5359
|
] }),
|
|
5160
|
-
message && /* @__PURE__ */
|
|
5161
|
-
object && /* @__PURE__ */
|
|
5360
|
+
message && /* @__PURE__ */ jsx91("span", { className: "agn-notif__msg", children: message }),
|
|
5361
|
+
object && /* @__PURE__ */ jsx91("span", { className: "agn-notif__object", children: object })
|
|
5162
5362
|
] }),
|
|
5163
|
-
time && /* @__PURE__ */
|
|
5363
|
+
time && /* @__PURE__ */ jsx91("span", { className: "agn-notif__time", children: time })
|
|
5164
5364
|
] });
|
|
5165
5365
|
}
|
|
5166
5366
|
function dayLabel(date, L, locale) {
|
|
@@ -5186,36 +5386,36 @@ function NotificationList({ title, items = [], children, onMarkAll, locale = "tr
|
|
|
5186
5386
|
g.items.push(it);
|
|
5187
5387
|
});
|
|
5188
5388
|
const unread = items.filter((i) => i.unread).length;
|
|
5189
|
-
return /* @__PURE__ */
|
|
5190
|
-
header && /* @__PURE__ */
|
|
5191
|
-
/* @__PURE__ */
|
|
5389
|
+
return /* @__PURE__ */ jsxs84("section", { className: cx("agn-notif-list", bare && "agn-notif-list--bare", className), "aria-label": title || L.title, ...rest, children: [
|
|
5390
|
+
header && /* @__PURE__ */ jsxs84("header", { className: "agn-notif-list__head", children: [
|
|
5391
|
+
/* @__PURE__ */ jsxs84("h3", { className: "agn-notif-list__title", children: [
|
|
5192
5392
|
title || L.title,
|
|
5193
|
-
unread > 0 && /* @__PURE__ */
|
|
5393
|
+
unread > 0 && /* @__PURE__ */ jsx91("span", { className: "agn-notif-list__count", children: unread })
|
|
5194
5394
|
] }),
|
|
5195
|
-
onMarkAll && /* @__PURE__ */
|
|
5395
|
+
onMarkAll && /* @__PURE__ */ jsx91(Button, { variant: "link", size: "sm", onClick: onMarkAll, children: L.markAll })
|
|
5196
5396
|
] }),
|
|
5197
|
-
/* @__PURE__ */
|
|
5198
|
-
groups.map((g) => /* @__PURE__ */
|
|
5199
|
-
g.key && /* @__PURE__ */
|
|
5397
|
+
/* @__PURE__ */ jsxs84("div", { className: "agn-notif-list__body", children: [
|
|
5398
|
+
groups.map((g) => /* @__PURE__ */ jsxs84("div", { className: "agn-notif-list__group", children: [
|
|
5399
|
+
g.key && /* @__PURE__ */ jsx91("div", { className: "agn-eyebrow agn-eyebrow--quiet agn-notif-list__day", children: g.key }),
|
|
5200
5400
|
g.items.map((it, i) => {
|
|
5201
5401
|
const { id, day: _day, date: _date, ...p } = it;
|
|
5202
|
-
return /* @__PURE__ */
|
|
5402
|
+
return /* @__PURE__ */ jsx91(Notification, { labels: { unread: L.unread }, ...p }, id || i);
|
|
5203
5403
|
})
|
|
5204
5404
|
] }, g.key || "all")),
|
|
5205
5405
|
children,
|
|
5206
|
-
!items.length && !children && /* @__PURE__ */
|
|
5406
|
+
!items.length && !children && /* @__PURE__ */ jsx91("div", { className: "agn-notif-list__empty", children: L.empty })
|
|
5207
5407
|
] })
|
|
5208
5408
|
] });
|
|
5209
5409
|
}
|
|
5210
5410
|
|
|
5211
5411
|
// src/feedback/Modal.jsx
|
|
5212
|
-
import
|
|
5213
|
-
import { jsx as
|
|
5412
|
+
import React94 from "react";
|
|
5413
|
+
import { jsx as jsx92, jsxs as jsxs85 } from "react/jsx-runtime";
|
|
5214
5414
|
var FOCUSABLE2 = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
|
|
5215
5415
|
function useDialog(open, onClose, ref, { lockScroll = true, autoFocus = true } = {}) {
|
|
5216
|
-
const closeRef =
|
|
5416
|
+
const closeRef = React94.useRef(onClose);
|
|
5217
5417
|
closeRef.current = onClose;
|
|
5218
|
-
|
|
5418
|
+
React94.useEffect(() => {
|
|
5219
5419
|
if (!open) return;
|
|
5220
5420
|
const previous = document.activeElement;
|
|
5221
5421
|
const onKey = (e) => {
|
|
@@ -5259,99 +5459,99 @@ function useDialog(open, onClose, ref, { lockScroll = true, autoFocus = true } =
|
|
|
5259
5459
|
}
|
|
5260
5460
|
function Modal({ open, onClose, title, description, size = "md", footer, children, hideClose, scrimClose = true, labels, className, bodyClassName, ...rest }) {
|
|
5261
5461
|
const L = { close: "Close", ...labels };
|
|
5262
|
-
const ref =
|
|
5263
|
-
const ids =
|
|
5462
|
+
const ref = React94.useRef(null);
|
|
5463
|
+
const ids = React94.useMemo(() => ({ t: uid("modal-title"), d: uid("modal-desc") }), []);
|
|
5264
5464
|
useDialog(open, onClose, ref);
|
|
5265
5465
|
if (!open) return null;
|
|
5266
5466
|
return (
|
|
5267
5467
|
// biome-ignore lint/a11y/noStaticElementInteractions: pointer-only convenience; Esc closes the dialog from the keyboard
|
|
5268
|
-
/* @__PURE__ */
|
|
5468
|
+
/* @__PURE__ */ jsx92("div", { className: "agn-scrim", onMouseDown: (e) => {
|
|
5269
5469
|
if (scrimClose && e.target === e.currentTarget && onClose) onClose();
|
|
5270
|
-
}, children: /* @__PURE__ */
|
|
5271
|
-
(title || !hideClose) && /* @__PURE__ */
|
|
5272
|
-
/* @__PURE__ */
|
|
5273
|
-
title && /* @__PURE__ */
|
|
5274
|
-
description && /* @__PURE__ */
|
|
5470
|
+
}, children: /* @__PURE__ */ jsxs85("div", { ref, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? ids.t : void 0, "aria-describedby": description ? ids.d : void 0, tabIndex: -1, className: cx("agn-modal", "agn-modal--" + size, className), ...rest, children: [
|
|
5471
|
+
(title || !hideClose) && /* @__PURE__ */ jsxs85("header", { className: "agn-modal__head", children: [
|
|
5472
|
+
/* @__PURE__ */ jsxs85("div", { className: "agn-modal__heading", children: [
|
|
5473
|
+
title && /* @__PURE__ */ jsx92("h2", { id: ids.t, className: "agn-modal__title", children: title }),
|
|
5474
|
+
description && /* @__PURE__ */ jsx92("p", { id: ids.d, className: "agn-modal__desc", children: description })
|
|
5275
5475
|
] }),
|
|
5276
|
-
!hideClose && /* @__PURE__ */
|
|
5476
|
+
!hideClose && /* @__PURE__ */ jsx92(ButtonIcon, { icon: "x", label: L.close, size: "sm", onClick: onClose, "data-dialog-close": "", className: "agn-modal__close" })
|
|
5277
5477
|
] }),
|
|
5278
|
-
/* @__PURE__ */
|
|
5279
|
-
footer && /* @__PURE__ */
|
|
5478
|
+
/* @__PURE__ */ jsx92("div", { className: cx("agn-modal__body", bodyClassName), children }),
|
|
5479
|
+
footer && /* @__PURE__ */ jsx92("footer", { className: "agn-modal__foot", children: footer })
|
|
5280
5480
|
] }) })
|
|
5281
5481
|
);
|
|
5282
5482
|
}
|
|
5283
5483
|
var PROMPT_ICON = { bad: "trash-2", warn: "triangle-alert", info: "info", ok: "circle-check" };
|
|
5284
5484
|
function Prompt({ open, onClose, onConfirm, title, children, consequence, tone = "warn", icon, confirmLabel, cancelLabel, loading: loading2, labels, className, ...rest }) {
|
|
5285
5485
|
const L = { confirm: "Confirm", cancel: "Cancel", ...labels };
|
|
5286
|
-
const ref =
|
|
5287
|
-
const ids =
|
|
5486
|
+
const ref = React94.useRef(null);
|
|
5487
|
+
const ids = React94.useMemo(() => ({ t: uid("prompt-title"), d: uid("prompt-desc") }), []);
|
|
5288
5488
|
useDialog(open, onClose, ref);
|
|
5289
5489
|
if (!open) return null;
|
|
5290
|
-
return /* @__PURE__ */
|
|
5291
|
-
/* @__PURE__ */
|
|
5292
|
-
/* @__PURE__ */
|
|
5293
|
-
/* @__PURE__ */
|
|
5294
|
-
/* @__PURE__ */
|
|
5295
|
-
/* @__PURE__ */
|
|
5490
|
+
return /* @__PURE__ */ jsx92("div", { className: "agn-scrim", children: /* @__PURE__ */ jsxs85("div", { ref, role: "alertdialog", "aria-modal": "true", "aria-labelledby": ids.t, "aria-describedby": ids.d, tabIndex: -1, className: cx("agn-modal agn-modal--sm agn-prompt", "agn-prompt--" + tone, className), ...rest, children: [
|
|
5491
|
+
/* @__PURE__ */ jsxs85("div", { className: "agn-prompt__body", children: [
|
|
5492
|
+
/* @__PURE__ */ jsx92("span", { className: "agn-prompt__icon", children: /* @__PURE__ */ jsx92(Icon, { name: icon || PROMPT_ICON[tone] || "info", size: 20 }) }),
|
|
5493
|
+
/* @__PURE__ */ jsxs85("div", { children: [
|
|
5494
|
+
/* @__PURE__ */ jsx92("h2", { id: ids.t, className: "agn-modal__title", children: title }),
|
|
5495
|
+
/* @__PURE__ */ jsxs85("div", { id: ids.d, className: "agn-prompt__text", children: [
|
|
5296
5496
|
children,
|
|
5297
|
-
consequence && /* @__PURE__ */
|
|
5497
|
+
consequence && /* @__PURE__ */ jsx92("p", { className: "agn-prompt__consequence", children: consequence })
|
|
5298
5498
|
] })
|
|
5299
5499
|
] })
|
|
5300
5500
|
] }),
|
|
5301
|
-
/* @__PURE__ */
|
|
5302
|
-
/* @__PURE__ */
|
|
5303
|
-
/* @__PURE__ */
|
|
5501
|
+
/* @__PURE__ */ jsxs85("footer", { className: "agn-modal__foot", children: [
|
|
5502
|
+
/* @__PURE__ */ jsx92(Button, { onClick: onClose, disabled: loading2, children: cancelLabel || L.cancel }),
|
|
5503
|
+
/* @__PURE__ */ jsx92(Button, { variant: tone === "bad" ? "destructive" : "primary", onClick: onConfirm, loading: loading2, "data-autofocus": "", children: confirmLabel || L.confirm })
|
|
5304
5504
|
] })
|
|
5305
5505
|
] }) });
|
|
5306
5506
|
}
|
|
5307
5507
|
|
|
5308
5508
|
// src/feedback/Sheet.jsx
|
|
5309
|
-
import
|
|
5310
|
-
import { jsx as
|
|
5509
|
+
import React95 from "react";
|
|
5510
|
+
import { jsx as jsx93, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
5311
5511
|
function Sheet({ open, onClose, title, description, footer, children, hideClose, scrimClose = true, contained, maxHeight, labels, className, style, ...rest }) {
|
|
5312
5512
|
const L = { close: "Close", ...labels };
|
|
5313
|
-
const ref =
|
|
5314
|
-
const ids =
|
|
5513
|
+
const ref = React95.useRef(null);
|
|
5514
|
+
const ids = React95.useMemo(() => ({ t: uid("sheet-title"), d: uid("sheet-desc") }), []);
|
|
5315
5515
|
useDialog(open, onClose, ref, { lockScroll: !contained });
|
|
5316
5516
|
if (!open) return null;
|
|
5317
5517
|
return (
|
|
5318
5518
|
// biome-ignore lint/a11y/noStaticElementInteractions: pointer-only convenience; Esc closes the dialog from the keyboard
|
|
5319
|
-
/* @__PURE__ */
|
|
5519
|
+
/* @__PURE__ */ jsx93("div", { className: cx("agn-sheet-scrim", contained && "agn-sheet-scrim--contained"), onMouseDown: (e) => {
|
|
5320
5520
|
if (scrimClose && e.target === e.currentTarget && onClose) onClose();
|
|
5321
|
-
}, children: /* @__PURE__ */
|
|
5322
|
-
/* @__PURE__ */
|
|
5323
|
-
(title || !hideClose) && /* @__PURE__ */
|
|
5324
|
-
/* @__PURE__ */
|
|
5325
|
-
title && /* @__PURE__ */
|
|
5326
|
-
description && /* @__PURE__ */
|
|
5521
|
+
}, children: /* @__PURE__ */ jsxs86("div", { ref, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? ids.t : void 0, "aria-describedby": description ? ids.d : void 0, tabIndex: -1, className: cx("agn-sheet", className), style: maxHeight != null ? { maxHeight: typeof maxHeight === "number" ? maxHeight + "px" : maxHeight, ...style } : style, ...rest, children: [
|
|
5522
|
+
/* @__PURE__ */ jsx93("span", { className: "agn-sheet__handle", "aria-hidden": "true" }),
|
|
5523
|
+
(title || !hideClose) && /* @__PURE__ */ jsxs86("header", { className: "agn-sheet__head", children: [
|
|
5524
|
+
/* @__PURE__ */ jsxs86("div", { className: "agn-sheet__heading", children: [
|
|
5525
|
+
title && /* @__PURE__ */ jsx93("h2", { id: ids.t, className: "agn-sheet__title", children: title }),
|
|
5526
|
+
description && /* @__PURE__ */ jsx93("p", { id: ids.d, className: "agn-sheet__desc", children: description })
|
|
5327
5527
|
] }),
|
|
5328
|
-
!hideClose && /* @__PURE__ */
|
|
5528
|
+
!hideClose && /* @__PURE__ */ jsx93(ButtonIcon, { icon: "x", label: L.close, size: "sm", onClick: onClose, "data-dialog-close": "" })
|
|
5329
5529
|
] }),
|
|
5330
|
-
/* @__PURE__ */
|
|
5331
|
-
footer && /* @__PURE__ */
|
|
5530
|
+
/* @__PURE__ */ jsx93("div", { className: "agn-sheet__body", children }),
|
|
5531
|
+
footer && /* @__PURE__ */ jsx93("footer", { className: "agn-sheet__foot", children: footer })
|
|
5332
5532
|
] }) })
|
|
5333
5533
|
);
|
|
5334
5534
|
}
|
|
5335
5535
|
|
|
5336
5536
|
// src/feedback/Popover.jsx
|
|
5337
|
-
import
|
|
5338
|
-
import { jsx as
|
|
5537
|
+
import React96 from "react";
|
|
5538
|
+
import { jsx as jsx94, jsxs as jsxs87 } from "react/jsx-runtime";
|
|
5339
5539
|
function Popover({ trigger, open: openProp, defaultOpen = false, onOpenChange, placement = "bottom-start", arrow = false, title, footer, children, width = 288, hideClose, static: isStatic, labels, className, ...rest }) {
|
|
5340
5540
|
const L = { close: "Close", ...labels };
|
|
5341
|
-
const [own, setOwn] =
|
|
5541
|
+
const [own, setOwn] = React96.useState(defaultOpen);
|
|
5342
5542
|
const controlled = openProp != null;
|
|
5343
5543
|
const open = controlled ? openProp : own;
|
|
5344
|
-
const wrap =
|
|
5345
|
-
const pop =
|
|
5346
|
-
const byUser =
|
|
5347
|
-
const id =
|
|
5544
|
+
const wrap = React96.useRef(null);
|
|
5545
|
+
const pop = React96.useRef(null);
|
|
5546
|
+
const byUser = React96.useRef(false);
|
|
5547
|
+
const id = React96.useMemo(() => uid("pop"), []);
|
|
5348
5548
|
const set = (v) => {
|
|
5349
5549
|
if (!controlled) setOwn(v);
|
|
5350
5550
|
onOpenChange && onOpenChange(v);
|
|
5351
5551
|
};
|
|
5352
|
-
const setRef =
|
|
5552
|
+
const setRef = React96.useRef(set);
|
|
5353
5553
|
setRef.current = set;
|
|
5354
|
-
|
|
5554
|
+
React96.useEffect(() => {
|
|
5355
5555
|
if (!open || isStatic) return;
|
|
5356
5556
|
const down = (e) => {
|
|
5357
5557
|
if (wrap.current && !wrap.current.contains(e.target)) setRef.current(false);
|
|
@@ -5374,18 +5574,18 @@ function Popover({ trigger, open: openProp, defaultOpen = false, onOpenChange, p
|
|
|
5374
5574
|
document.removeEventListener("keydown", key);
|
|
5375
5575
|
};
|
|
5376
5576
|
}, [open]);
|
|
5377
|
-
const layer = /* @__PURE__ */
|
|
5378
|
-
arrow && !isStatic && /* @__PURE__ */
|
|
5379
|
-
(title || !hideClose) && /* @__PURE__ */
|
|
5380
|
-
title && /* @__PURE__ */
|
|
5381
|
-
!hideClose && /* @__PURE__ */
|
|
5577
|
+
const layer = /* @__PURE__ */ jsxs87("div", { ref: pop, id, role: "dialog", "aria-label": typeof title === "string" ? title : void 0, tabIndex: -1, className: cx("agn-pop", isStatic ? "agn-pop--static" : "agn-pop--" + placement, arrow && "agn-pop--arrow", className), style: { width }, ...rest, children: [
|
|
5578
|
+
arrow && !isStatic && /* @__PURE__ */ jsx94("span", { className: "agn-pop__arrow", "aria-hidden": "true" }),
|
|
5579
|
+
(title || !hideClose) && /* @__PURE__ */ jsxs87("div", { className: "agn-pop__head", children: [
|
|
5580
|
+
title && /* @__PURE__ */ jsx94("div", { className: "agn-pop__title", children: title }),
|
|
5581
|
+
!hideClose && /* @__PURE__ */ jsx94(ButtonIcon, { icon: "x", label: L.close, size: "xs", onClick: () => set(false), className: "agn-pop__close" })
|
|
5382
5582
|
] }),
|
|
5383
|
-
/* @__PURE__ */
|
|
5384
|
-
footer && /* @__PURE__ */
|
|
5583
|
+
/* @__PURE__ */ jsx94("div", { className: "agn-pop__body", children }),
|
|
5584
|
+
footer && /* @__PURE__ */ jsx94("div", { className: "agn-pop__foot", children: footer })
|
|
5385
5585
|
] });
|
|
5386
5586
|
if (isStatic) return layer;
|
|
5387
|
-
return /* @__PURE__ */
|
|
5388
|
-
trigger &&
|
|
5587
|
+
return /* @__PURE__ */ jsxs87("span", { className: "agn-pop-wrap", ref: wrap, children: [
|
|
5588
|
+
trigger && React96.cloneElement(trigger, { onClick: (e) => {
|
|
5389
5589
|
trigger.props.onClick && trigger.props.onClick(e);
|
|
5390
5590
|
byUser.current = !open;
|
|
5391
5591
|
set(!open);
|
|
@@ -5394,147 +5594,111 @@ function Popover({ trigger, open: openProp, defaultOpen = false, onOpenChange, p
|
|
|
5394
5594
|
] });
|
|
5395
5595
|
}
|
|
5396
5596
|
|
|
5397
|
-
// src/feedback/Tooltip.jsx
|
|
5398
|
-
import React95 from "react";
|
|
5399
|
-
import { jsx as jsx93, jsxs as jsxs86 } from "react/jsx-runtime";
|
|
5400
|
-
function Tooltip({ content, kbd, placement = "top", delay = 400, open: openProp, children, className, ...rest }) {
|
|
5401
|
-
const [own, setOwn] = React95.useState(false);
|
|
5402
|
-
const open = openProp != null ? openProp : own;
|
|
5403
|
-
const timer = React95.useRef(null);
|
|
5404
|
-
const id = React95.useMemo(() => uid("tip"), []);
|
|
5405
|
-
const show2 = () => {
|
|
5406
|
-
clearTimeout(timer.current);
|
|
5407
|
-
timer.current = setTimeout(() => setOwn(true), delay);
|
|
5408
|
-
};
|
|
5409
|
-
const hide = () => {
|
|
5410
|
-
clearTimeout(timer.current);
|
|
5411
|
-
setOwn(false);
|
|
5412
|
-
};
|
|
5413
|
-
React95.useEffect(() => () => clearTimeout(timer.current), []);
|
|
5414
|
-
React95.useEffect(() => {
|
|
5415
|
-
if (!open) return;
|
|
5416
|
-
const k = (e) => e.key === "Escape" && hide();
|
|
5417
|
-
document.addEventListener("keydown", k);
|
|
5418
|
-
return () => document.removeEventListener("keydown", k);
|
|
5419
|
-
}, [open]);
|
|
5420
|
-
const child = React95.Children.only(children);
|
|
5421
|
-
return (
|
|
5422
|
-
// biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only listens: hover and focus bubble up from the focusable trigger it wraps; it is not itself operable
|
|
5423
|
-
/* @__PURE__ */ jsxs86("span", { className: cx("agn-tip-wrap", className), onMouseEnter: show2, onMouseLeave: hide, onFocus: show2, onBlur: hide, ...rest, children: [
|
|
5424
|
-
React95.cloneElement(child, { "aria-describedby": open ? id : child.props["aria-describedby"] }),
|
|
5425
|
-
open && /* @__PURE__ */ jsxs86("span", { role: "tooltip", id, className: cx("agn-tip", "agn-tip--" + placement), children: [
|
|
5426
|
-
content,
|
|
5427
|
-
kbd && /* @__PURE__ */ jsx93("kbd", { className: "agn-tip__kbd", children: kbd })
|
|
5428
|
-
] })
|
|
5429
|
-
] })
|
|
5430
|
-
);
|
|
5431
|
-
}
|
|
5432
|
-
|
|
5433
5597
|
// src/feedback/Spinner.jsx
|
|
5434
|
-
import
|
|
5435
|
-
import { jsx as
|
|
5598
|
+
import React97 from "react";
|
|
5599
|
+
import { jsx as jsx95, jsxs as jsxs88 } from "react/jsx-runtime";
|
|
5436
5600
|
var PX = { xs: 12, sm: 16, md: 20, lg: 32 };
|
|
5437
5601
|
function Spinner({ size = "md", tone = "signal", label, cover, labels, className, ...rest }) {
|
|
5438
5602
|
const L = { loading: "Loading", ...labels };
|
|
5439
5603
|
const px2 = PX[size] || PX.md;
|
|
5440
|
-
const svg = /* @__PURE__ */
|
|
5441
|
-
/* @__PURE__ */
|
|
5442
|
-
/* @__PURE__ */
|
|
5604
|
+
const svg = /* @__PURE__ */ jsxs88("svg", { className: "agn-spinner__svg", width: px2, height: px2, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
|
|
5605
|
+
/* @__PURE__ */ jsx95("circle", { className: "agn-spinner__track", cx: "12", cy: "12", r: "9.5", strokeWidth: "2.5" }),
|
|
5606
|
+
/* @__PURE__ */ jsx95("circle", { className: "agn-spinner__arc", cx: "12", cy: "12", r: "9.5", strokeWidth: "2.5", strokeLinecap: "round", strokeDasharray: "18 42" })
|
|
5443
5607
|
] });
|
|
5444
5608
|
return (
|
|
5445
5609
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5446
|
-
/* @__PURE__ */
|
|
5610
|
+
/* @__PURE__ */ jsxs88("span", { className: cx("agn-spinner", "agn-spinner--" + size, "agn-spinner--" + tone, cover && "agn-spinner--cover", className), role: "status", "aria-busy": "true", ...rest, children: [
|
|
5447
5611
|
svg,
|
|
5448
|
-
label ? /* @__PURE__ */
|
|
5612
|
+
label ? /* @__PURE__ */ jsx95("span", { className: "agn-spinner__label", children: label }) : /* @__PURE__ */ jsx95("span", { className: "agn-sr", children: L.loading })
|
|
5449
5613
|
] })
|
|
5450
5614
|
);
|
|
5451
5615
|
}
|
|
5452
5616
|
|
|
5453
5617
|
// src/feedback/ProgressBar.jsx
|
|
5454
|
-
import
|
|
5455
|
-
import { jsx as
|
|
5618
|
+
import React98 from "react";
|
|
5619
|
+
import { jsx as jsx96, jsxs as jsxs89 } from "react/jsx-runtime";
|
|
5456
5620
|
function ProgressBar({ value = 0, max = 100, indeterminate, tone = "signal", size = "md", label, showValue, valueText, labels, className, ...rest }) {
|
|
5457
5621
|
const L = { working: "Working", ...labels };
|
|
5458
|
-
const id =
|
|
5622
|
+
const id = React98.useMemo(() => uid("progress"), []);
|
|
5459
5623
|
const pct2 = Math.max(0, Math.min(100, value / (max || 1) * 100));
|
|
5460
5624
|
const text = valueText != null ? valueText : Math.round(pct2) + "%";
|
|
5461
|
-
return /* @__PURE__ */
|
|
5462
|
-
(label || showValue) && /* @__PURE__ */
|
|
5463
|
-
label && /* @__PURE__ */
|
|
5464
|
-
showValue && !indeterminate && /* @__PURE__ */
|
|
5625
|
+
return /* @__PURE__ */ jsxs89("div", { className: cx("agn-progress", "agn-progress--" + size, "agn-progress--" + tone, indeterminate && "agn-progress--indeterminate", className), ...rest, children: [
|
|
5626
|
+
(label || showValue) && /* @__PURE__ */ jsxs89("div", { className: "agn-progress__row", children: [
|
|
5627
|
+
label && /* @__PURE__ */ jsx96("span", { id, className: "agn-progress__label", children: label }),
|
|
5628
|
+
showValue && !indeterminate && /* @__PURE__ */ jsx96("span", { className: "agn-progress__value agn-num", children: text })
|
|
5465
5629
|
] }),
|
|
5466
|
-
/* @__PURE__ */
|
|
5630
|
+
/* @__PURE__ */ jsx96("div", { className: "agn-progress__track", role: "progressbar", "aria-labelledby": label ? id : void 0, "aria-label": !label ? L.working : void 0, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": indeterminate ? void 0 : value, "aria-valuetext": indeterminate ? L.working : text, children: /* @__PURE__ */ jsx96("div", { className: "agn-progress__fill", style: indeterminate ? void 0 : { width: pct2 + "%" } }) })
|
|
5467
5631
|
] });
|
|
5468
5632
|
}
|
|
5469
5633
|
|
|
5470
5634
|
// src/feedback/ProgressRing.jsx
|
|
5471
|
-
import
|
|
5472
|
-
import { jsx as
|
|
5635
|
+
import React99 from "react";
|
|
5636
|
+
import { jsx as jsx97, jsxs as jsxs90 } from "react/jsx-runtime";
|
|
5473
5637
|
function ProgressRing({ value = 0, max = 100, size = 64, strokeWidth = 6, tone = "signal", showValue = true, valueText, label, children, className, ...rest }) {
|
|
5474
5638
|
const pct2 = Math.max(0, Math.min(100, value / (max || 1) * 100));
|
|
5475
5639
|
const r = (size - strokeWidth) / 2, c = 2 * Math.PI * r;
|
|
5476
5640
|
const text = valueText != null ? valueText : Math.round(pct2) + "%";
|
|
5477
|
-
return /* @__PURE__ */
|
|
5478
|
-
/* @__PURE__ */
|
|
5479
|
-
/* @__PURE__ */
|
|
5480
|
-
/* @__PURE__ */
|
|
5481
|
-
/* @__PURE__ */
|
|
5641
|
+
return /* @__PURE__ */ jsxs90("div", { className: cx("agn-ring", "agn-ring--" + tone, className), style: { width: size }, ...rest, children: [
|
|
5642
|
+
/* @__PURE__ */ jsxs90("div", { className: "agn-ring__box", style: { width: size, height: size }, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": text, "aria-label": typeof label === "string" ? label : void 0, children: [
|
|
5643
|
+
/* @__PURE__ */ jsxs90("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true", children: [
|
|
5644
|
+
/* @__PURE__ */ jsx97("circle", { className: "agn-ring__track", cx: size / 2, cy: size / 2, r, strokeWidth, fill: "none" }),
|
|
5645
|
+
/* @__PURE__ */ jsx97("circle", { className: "agn-ring__arc", cx: size / 2, cy: size / 2, r, strokeWidth, fill: "none", strokeLinecap: pct2 > 0 && pct2 < 100 ? "round" : "butt", strokeDasharray: c, strokeDashoffset: c * (1 - pct2 / 100), transform: `rotate(-90 ${size / 2} ${size / 2})` })
|
|
5482
5646
|
] }),
|
|
5483
|
-
/* @__PURE__ */
|
|
5647
|
+
/* @__PURE__ */ jsx97("div", { className: "agn-ring__center", style: { fontSize: Math.max(11, Math.round(size * 0.24)) }, children: children != null ? children : showValue ? /* @__PURE__ */ jsx97("span", { className: "agn-ring__value agn-num", children: text }) : null })
|
|
5484
5648
|
] }),
|
|
5485
|
-
label && /* @__PURE__ */
|
|
5649
|
+
label && /* @__PURE__ */ jsx97("div", { className: "agn-ring__label", children: label })
|
|
5486
5650
|
] });
|
|
5487
5651
|
}
|
|
5488
5652
|
|
|
5489
5653
|
// src/feedback/DockedComposer.jsx
|
|
5490
|
-
import
|
|
5491
|
-
import { Fragment as Fragment12, jsx as
|
|
5654
|
+
import React100 from "react";
|
|
5655
|
+
import { Fragment as Fragment12, jsx as jsx98, jsxs as jsxs91 } from "react/jsx-runtime";
|
|
5492
5656
|
function DockedComposer({ title, icon = "pen-line", minimized: minProp, defaultMinimized = false, onMinimize, onClose, toolbar, footer, children, side = "right", static: isStatic, labels, className, ...rest }) {
|
|
5493
5657
|
const L = { minimize: "Minimise", restore: "Restore", close: "Close", ...labels };
|
|
5494
|
-
const [own, setOwn] =
|
|
5658
|
+
const [own, setOwn] = React100.useState(defaultMinimized);
|
|
5495
5659
|
const min = minProp != null ? minProp : own;
|
|
5496
5660
|
const toggle = () => {
|
|
5497
5661
|
const v = !min;
|
|
5498
5662
|
if (minProp == null) setOwn(v);
|
|
5499
5663
|
onMinimize && onMinimize(v);
|
|
5500
5664
|
};
|
|
5501
|
-
return /* @__PURE__ */
|
|
5502
|
-
/* @__PURE__ */
|
|
5503
|
-
/* @__PURE__ */
|
|
5504
|
-
/* @__PURE__ */
|
|
5505
|
-
/* @__PURE__ */
|
|
5506
|
-
/* @__PURE__ */
|
|
5507
|
-
onClose && /* @__PURE__ */
|
|
5665
|
+
return /* @__PURE__ */ jsxs91("section", { className: cx("agn-composer", "agn-composer--" + side, min && "agn-composer--min", isStatic && "agn-composer--static", className), "aria-label": typeof title === "string" ? title : void 0, ...rest, children: [
|
|
5666
|
+
/* @__PURE__ */ jsxs91("header", { className: "agn-composer__head", children: [
|
|
5667
|
+
/* @__PURE__ */ jsx98(Icon, { name: icon, size: 16, className: "agn-composer__icon" }),
|
|
5668
|
+
/* @__PURE__ */ jsx98("h3", { className: "agn-composer__title", children: title }),
|
|
5669
|
+
/* @__PURE__ */ jsxs91("div", { className: "agn-composer__ctl", children: [
|
|
5670
|
+
/* @__PURE__ */ jsx98(ButtonIcon, { icon: min ? "chevron-up" : "minus", label: min ? L.restore : L.minimize, size: "xs", onClick: toggle, "aria-expanded": !min }),
|
|
5671
|
+
onClose && /* @__PURE__ */ jsx98(ButtonIcon, { icon: "x", label: L.close, size: "xs", onClick: onClose })
|
|
5508
5672
|
] })
|
|
5509
5673
|
] }),
|
|
5510
|
-
!min && /* @__PURE__ */
|
|
5511
|
-
/* @__PURE__ */
|
|
5512
|
-
(toolbar || footer) && /* @__PURE__ */
|
|
5513
|
-
/* @__PURE__ */
|
|
5514
|
-
/* @__PURE__ */
|
|
5674
|
+
!min && /* @__PURE__ */ jsxs91(Fragment12, { children: [
|
|
5675
|
+
/* @__PURE__ */ jsx98("div", { className: "agn-composer__body", children }),
|
|
5676
|
+
(toolbar || footer) && /* @__PURE__ */ jsxs91("footer", { className: "agn-composer__foot", children: [
|
|
5677
|
+
/* @__PURE__ */ jsx98("div", { className: "agn-composer__tools", children: toolbar }),
|
|
5678
|
+
/* @__PURE__ */ jsx98("div", { className: "agn-composer__actions", children: footer })
|
|
5515
5679
|
] })
|
|
5516
5680
|
] })
|
|
5517
5681
|
] });
|
|
5518
5682
|
}
|
|
5519
5683
|
function DockedUtilityBar({ items = [], active, onChange, panel, static: isStatic, labels, className, ...rest }) {
|
|
5520
5684
|
const L = { utilities: "Utilities", ...labels };
|
|
5521
|
-
return /* @__PURE__ */
|
|
5522
|
-
active && panel && /* @__PURE__ */
|
|
5523
|
-
/* @__PURE__ */
|
|
5524
|
-
/* @__PURE__ */
|
|
5525
|
-
/* @__PURE__ */
|
|
5526
|
-
it.badge != null && /* @__PURE__ */
|
|
5685
|
+
return /* @__PURE__ */ jsxs91("div", { className: cx("agn-utility", isStatic && "agn-utility--static", className), ...rest, children: [
|
|
5686
|
+
active && panel && /* @__PURE__ */ jsx98("section", { className: "agn-utility__panel", "aria-label": (items.find((i) => i.id === active) || {}).label, children: panel }),
|
|
5687
|
+
/* @__PURE__ */ jsx98("div", { className: "agn-utility__bar", role: "toolbar", "aria-label": L.utilities, children: items.map((it) => /* @__PURE__ */ jsxs91("button", { type: "button", className: cx("agn-utility__item", it.id === active && "agn-utility__item--active"), "aria-pressed": it.id === active, onClick: () => onChange && onChange(it.id === active ? null : it.id), children: [
|
|
5688
|
+
/* @__PURE__ */ jsx98(Icon, { name: it.icon || "panel-bottom", size: 14 }),
|
|
5689
|
+
/* @__PURE__ */ jsx98("span", { children: it.label }),
|
|
5690
|
+
it.badge != null && /* @__PURE__ */ jsx98("span", { className: "agn-utility__badge agn-num", children: it.badge })
|
|
5527
5691
|
] }, it.id)) })
|
|
5528
5692
|
] });
|
|
5529
5693
|
}
|
|
5530
5694
|
|
|
5531
5695
|
// src/feedback/Publisher.jsx
|
|
5532
|
-
import
|
|
5533
|
-
import { jsx as
|
|
5696
|
+
import React101 from "react";
|
|
5697
|
+
import { jsx as jsx99, jsxs as jsxs92 } from "react/jsx-runtime";
|
|
5534
5698
|
function Publisher({ user, placeholder, value, defaultValue = "", onChange, onSubmit, onAttach, onMention, submitLabel, expanded: expProp, labels, className, ...rest }) {
|
|
5535
5699
|
const L = { placeholder: "Write a note\u2026", submit: "Post", attach: "Attach file", mention: "Mention someone", ...labels };
|
|
5536
|
-
const [own, setOwn] =
|
|
5537
|
-
const [focus, setFocus] =
|
|
5700
|
+
const [own, setOwn] = React101.useState(defaultValue);
|
|
5701
|
+
const [focus, setFocus] = React101.useState(false);
|
|
5538
5702
|
const val = value != null ? value : own;
|
|
5539
5703
|
const expanded = expProp != null ? expProp : focus || val.length > 0;
|
|
5540
5704
|
const name = typeof user === "string" ? user : user && user.name;
|
|
@@ -5543,10 +5707,10 @@ function Publisher({ user, placeholder, value, defaultValue = "", onChange, onSu
|
|
|
5543
5707
|
onSubmit && onSubmit(val);
|
|
5544
5708
|
if (value == null) setOwn("");
|
|
5545
5709
|
};
|
|
5546
|
-
return /* @__PURE__ */
|
|
5547
|
-
name && /* @__PURE__ */
|
|
5548
|
-
/* @__PURE__ */
|
|
5549
|
-
/* @__PURE__ */
|
|
5710
|
+
return /* @__PURE__ */ jsxs92("div", { className: cx("agn-publisher", expanded && "agn-publisher--open", className), ...rest, children: [
|
|
5711
|
+
name && /* @__PURE__ */ jsx99("span", { className: "agn-publisher__avatar", "aria-hidden": "true", children: initials2(name) }),
|
|
5712
|
+
/* @__PURE__ */ jsxs92("div", { className: "agn-publisher__field", children: [
|
|
5713
|
+
/* @__PURE__ */ jsx99(
|
|
5550
5714
|
"textarea",
|
|
5551
5715
|
{
|
|
5552
5716
|
className: "agn-publisher__input",
|
|
@@ -5568,29 +5732,29 @@ function Publisher({ user, placeholder, value, defaultValue = "", onChange, onSu
|
|
|
5568
5732
|
}
|
|
5569
5733
|
}
|
|
5570
5734
|
),
|
|
5571
|
-
expanded && /* @__PURE__ */
|
|
5572
|
-
/* @__PURE__ */
|
|
5573
|
-
/* @__PURE__ */
|
|
5574
|
-
/* @__PURE__ */
|
|
5735
|
+
expanded && /* @__PURE__ */ jsxs92("div", { className: "agn-publisher__bar", children: [
|
|
5736
|
+
/* @__PURE__ */ jsxs92("div", { className: "agn-publisher__tools", children: [
|
|
5737
|
+
/* @__PURE__ */ jsx99(ButtonIcon, { icon: "paperclip", label: L.attach, size: "sm", onClick: onAttach }),
|
|
5738
|
+
/* @__PURE__ */ jsx99(ButtonIcon, { icon: "at-sign", label: L.mention, size: "sm", onClick: onMention })
|
|
5575
5739
|
] }),
|
|
5576
|
-
/* @__PURE__ */
|
|
5740
|
+
/* @__PURE__ */ jsx99(Button, { variant: "primary", size: "sm", disabled: !val.trim(), onClick: submit, children: submitLabel || L.submit })
|
|
5577
5741
|
] })
|
|
5578
5742
|
] })
|
|
5579
5743
|
] });
|
|
5580
5744
|
}
|
|
5581
5745
|
|
|
5582
5746
|
// src/feedback/EmptyState.jsx
|
|
5583
|
-
import
|
|
5584
|
-
import { jsx as
|
|
5747
|
+
import React102 from "react";
|
|
5748
|
+
import { jsx as jsx100, jsxs as jsxs93 } from "react/jsx-runtime";
|
|
5585
5749
|
function EmptyState({ illustration, icon, product, title, children, action, secondary, compact, className, ...rest }) {
|
|
5586
5750
|
return (
|
|
5587
5751
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5588
|
-
/* @__PURE__ */
|
|
5589
|
-
illustration ? /* @__PURE__ */
|
|
5590
|
-
/* @__PURE__ */
|
|
5591
|
-
title && /* @__PURE__ */
|
|
5592
|
-
children != null && /* @__PURE__ */
|
|
5593
|
-
(action || secondary) && /* @__PURE__ */
|
|
5752
|
+
/* @__PURE__ */ jsxs93("div", { className: cx("agn-empty", compact && "agn-empty--compact", className), role: "status", ...rest, children: [
|
|
5753
|
+
illustration ? /* @__PURE__ */ jsx100("div", { className: "agn-empty__art", children: illustration }) : (icon || product) && /* @__PURE__ */ jsx100("span", { className: "agn-empty__icon", children: product ? /* @__PURE__ */ jsx100(ProductIcon, { product, size: compact ? 20 : 24 }) : /* @__PURE__ */ jsx100(Icon, { name: icon, size: compact ? 18 : 22 }) }),
|
|
5754
|
+
/* @__PURE__ */ jsxs93("div", { className: "agn-empty__body", children: [
|
|
5755
|
+
title && /* @__PURE__ */ jsx100("h4", { className: "agn-empty__title", children: title }),
|
|
5756
|
+
children != null && /* @__PURE__ */ jsx100("p", { className: "agn-empty__text", children }),
|
|
5757
|
+
(action || secondary) && /* @__PURE__ */ jsxs93("div", { className: "agn-empty__actions", children: [
|
|
5594
5758
|
action,
|
|
5595
5759
|
secondary
|
|
5596
5760
|
] })
|
|
@@ -5600,27 +5764,27 @@ function EmptyState({ illustration, icon, product, title, children, action, seco
|
|
|
5600
5764
|
}
|
|
5601
5765
|
|
|
5602
5766
|
// src/chat/ChatThread.jsx
|
|
5603
|
-
import
|
|
5604
|
-
import { jsx as
|
|
5767
|
+
import React103 from "react";
|
|
5768
|
+
import { jsx as jsx101 } from "react/jsx-runtime";
|
|
5605
5769
|
function ChatThread({ children, stickToBottom = true, userSide = "start", maxHeight, labels, className, style, ...rest }) {
|
|
5606
5770
|
const L = { thread: "Conversation", ...labels };
|
|
5607
|
-
const ref =
|
|
5608
|
-
|
|
5771
|
+
const ref = React103.useRef(null);
|
|
5772
|
+
React103.useEffect(() => {
|
|
5609
5773
|
if (stickToBottom && ref.current) ref.current.scrollTop = ref.current.scrollHeight;
|
|
5610
5774
|
}, [children, stickToBottom]);
|
|
5611
|
-
return /* @__PURE__ */
|
|
5775
|
+
return /* @__PURE__ */ jsx101("div", { ref, className: cx("agn-chat", "agn-chat--user-" + userSide, className), role: "log", "aria-live": "polite", "aria-label": L.thread, style: { maxHeight, ...style }, ...rest, children });
|
|
5612
5776
|
}
|
|
5613
5777
|
function ChatDivider({ variant = "day", children, labels, className, ...rest }) {
|
|
5614
5778
|
const L = { newMessages: "New messages", ...labels };
|
|
5615
|
-
return /* @__PURE__ */
|
|
5779
|
+
return /* @__PURE__ */ jsx101("div", { className: cx("agn-chat__divider", "agn-chat__divider--" + variant, className), ...rest, children: /* @__PURE__ */ jsx101("span", { children: children != null ? children : variant === "new" ? L.newMessages : null }) });
|
|
5616
5780
|
}
|
|
5617
5781
|
|
|
5618
5782
|
// src/chat/ChatMessage.jsx
|
|
5619
|
-
import
|
|
5783
|
+
import React107 from "react";
|
|
5620
5784
|
|
|
5621
5785
|
// src/chat/ChatMarkdown.jsx
|
|
5622
|
-
import
|
|
5623
|
-
import { jsx as
|
|
5786
|
+
import React104 from "react";
|
|
5787
|
+
import { jsx as jsx102, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
5624
5788
|
var INLINE = /(`[^`\n]+`)|(\*\*[^*\n]+\*\*)|(__[^_\n]+__)|(\*[^*\n]+\*)|(\b_[^_\n]+_\b)|(\[[^\]\n]+\]\([^)\s]+\))|(https?:\/\/[^\s<>()]+)/g;
|
|
5625
5789
|
var safeHref = (u) => /^(https?:|mailto:|tel:|\/|#)/i.test(u) ? u : "#";
|
|
5626
5790
|
function renderInline(text, depth = 0) {
|
|
@@ -5630,13 +5794,13 @@ function renderInline(text, depth = 0) {
|
|
|
5630
5794
|
while (m = re.exec(text)) {
|
|
5631
5795
|
if (m.index > last) out.push(text.slice(last, m.index));
|
|
5632
5796
|
const s = m[0];
|
|
5633
|
-
if (m[1]) out.push(/* @__PURE__ */
|
|
5634
|
-
else if (m[2] || m[3]) out.push(/* @__PURE__ */
|
|
5635
|
-
else if (m[4] || m[5]) out.push(/* @__PURE__ */
|
|
5797
|
+
if (m[1]) out.push(/* @__PURE__ */ jsx102("code", { className: "agn-md__code", children: s.slice(1, -1) }, k++));
|
|
5798
|
+
else if (m[2] || m[3]) out.push(/* @__PURE__ */ jsx102("strong", { children: depth < 2 ? renderInline(s.slice(2, -2), depth + 1) : s.slice(2, -2) }, k++));
|
|
5799
|
+
else if (m[4] || m[5]) out.push(/* @__PURE__ */ jsx102("em", { children: depth < 2 ? renderInline(s.slice(1, -1), depth + 1) : s.slice(1, -1) }, k++));
|
|
5636
5800
|
else if (m[6]) {
|
|
5637
5801
|
const mm = /^\[([^\]]+)\]\(([^)\s]+)\)/.exec(s);
|
|
5638
|
-
out.push(/* @__PURE__ */
|
|
5639
|
-
} else if (m[7]) out.push(/* @__PURE__ */
|
|
5802
|
+
out.push(/* @__PURE__ */ jsx102("a", { href: safeHref(mm[2]), target: "_blank", rel: "noopener noreferrer", children: mm[1] }, k++));
|
|
5803
|
+
} else if (m[7]) out.push(/* @__PURE__ */ jsx102("a", { href: safeHref(s), target: "_blank", rel: "noopener noreferrer", children: s }, k++));
|
|
5640
5804
|
last = m.index + s.length;
|
|
5641
5805
|
}
|
|
5642
5806
|
if (last < text.length) out.push(text.slice(last));
|
|
@@ -5706,160 +5870,160 @@ function parseBlocks(src) {
|
|
|
5706
5870
|
return blocks;
|
|
5707
5871
|
}
|
|
5708
5872
|
function withBreaks(text) {
|
|
5709
|
-
return text.split("\n").flatMap((l, i) => i ? [/* @__PURE__ */
|
|
5873
|
+
return text.split("\n").flatMap((l, i) => i ? [/* @__PURE__ */ jsx102("br", {}, "b" + i), ...renderInline(l)] : renderInline(l));
|
|
5710
5874
|
}
|
|
5711
5875
|
function renderBlock(b, i) {
|
|
5712
5876
|
switch (b.type) {
|
|
5713
5877
|
case "code":
|
|
5714
|
-
return /* @__PURE__ */
|
|
5878
|
+
return /* @__PURE__ */ jsx102("pre", { className: "agn-md__pre", "data-lang": b.lang || void 0, children: /* @__PURE__ */ jsx102("code", { children: b.text }) }, i);
|
|
5715
5879
|
case "h": {
|
|
5716
5880
|
const Tag2 = "h" + Math.min(6, b.level + 2);
|
|
5717
|
-
return /* @__PURE__ */
|
|
5881
|
+
return /* @__PURE__ */ jsx102(Tag2, { className: "agn-md__h agn-md__h--" + b.level, children: renderInline(b.text) }, i);
|
|
5718
5882
|
}
|
|
5719
5883
|
case "hr":
|
|
5720
|
-
return /* @__PURE__ */
|
|
5884
|
+
return /* @__PURE__ */ jsx102("hr", { className: "agn-md__hr" }, i);
|
|
5721
5885
|
case "quote":
|
|
5722
|
-
return /* @__PURE__ */
|
|
5886
|
+
return /* @__PURE__ */ jsx102("blockquote", { className: "agn-md__quote", children: b.blocks.map(renderBlock) }, i);
|
|
5723
5887
|
case "table":
|
|
5724
|
-
return /* @__PURE__ */
|
|
5725
|
-
/* @__PURE__ */
|
|
5726
|
-
/* @__PURE__ */
|
|
5888
|
+
return /* @__PURE__ */ jsx102("div", { className: "agn-md__table-wrap", children: /* @__PURE__ */ jsxs94("table", { className: "agn-md__table", children: [
|
|
5889
|
+
/* @__PURE__ */ jsx102("thead", { children: /* @__PURE__ */ jsx102("tr", { children: b.head.map((c, j) => /* @__PURE__ */ jsx102("th", { style: { textAlign: b.aligns[j] }, children: renderInline(c) }, j)) }) }),
|
|
5890
|
+
/* @__PURE__ */ jsx102("tbody", { children: b.rows.map((r, ri) => /* @__PURE__ */ jsx102("tr", { children: b.head.map((_, j) => /* @__PURE__ */ jsx102("td", { style: { textAlign: b.aligns[j] }, children: renderInline(r[j] || "") }, j)) }, ri)) })
|
|
5727
5891
|
] }) }, i);
|
|
5728
5892
|
case "list": {
|
|
5729
5893
|
const Tag2 = b.ordered ? "ol" : "ul";
|
|
5730
|
-
return /* @__PURE__ */
|
|
5894
|
+
return /* @__PURE__ */ jsx102(Tag2, { className: "agn-md__list", children: b.items.map((t, j) => /* @__PURE__ */ jsx102("li", { children: withBreaks(t) }, j)) }, i);
|
|
5731
5895
|
}
|
|
5732
5896
|
default:
|
|
5733
|
-
return /* @__PURE__ */
|
|
5897
|
+
return /* @__PURE__ */ jsx102("p", { className: "agn-md__p", children: withBreaks(b.text) }, i);
|
|
5734
5898
|
}
|
|
5735
5899
|
}
|
|
5736
5900
|
function ChatMarkdown({ source, className, ...rest }) {
|
|
5737
|
-
const blocks =
|
|
5738
|
-
return /* @__PURE__ */
|
|
5901
|
+
const blocks = React104.useMemo(() => parseBlocks(source), [source]);
|
|
5902
|
+
return /* @__PURE__ */ jsx102("div", { className: cx("agn-md", className), ...rest, children: blocks.map(renderBlock) });
|
|
5739
5903
|
}
|
|
5740
5904
|
|
|
5741
5905
|
// src/chat/ToolCallCard.jsx
|
|
5742
|
-
import
|
|
5743
|
-
import { jsx as
|
|
5906
|
+
import React105 from "react";
|
|
5907
|
+
import { jsx as jsx103, jsxs as jsxs95 } from "react/jsx-runtime";
|
|
5744
5908
|
var STATUS = { running: { icon: "loader-circle", tone: "info", label: "Running" }, ok: { icon: "check", tone: "ok", label: "Done" }, bad: { icon: "circle-x", tone: "bad", label: "Failed" }, pending: { icon: "clock", tone: "neutral", label: "Pending" } };
|
|
5745
5909
|
var show = (v) => v == null ? "" : typeof v === "string" ? v : JSON.stringify(v, null, 2);
|
|
5746
5910
|
var formatDuration = (ms, locale = "tr-TR") => ms == null ? "" : ms < 1e3 ? Math.round(ms) + " ms" : ms < 6e4 ? (ms / 1e3).toLocaleString(locale, { maximumFractionDigits: 1 }) + " s" : Math.floor(ms / 6e4) + ":" + String(Math.round(ms % 6e4 / 1e3)).padStart(2, "0");
|
|
5747
5911
|
function ToolCallCard({ name, status = "ok", duration, input, output, summary, open, defaultOpen = false, onToggle, locale = "tr-TR", labels, className, ...rest }) {
|
|
5748
5912
|
const L = { input: "Input", output: "Output", running: "Running", ok: "Done", bad: "Failed", pending: "Pending", ...labels };
|
|
5749
5913
|
const s = STATUS[status] || STATUS.ok;
|
|
5750
|
-
return /* @__PURE__ */
|
|
5751
|
-
/* @__PURE__ */
|
|
5752
|
-
/* @__PURE__ */
|
|
5753
|
-
/* @__PURE__ */
|
|
5754
|
-
/* @__PURE__ */
|
|
5755
|
-
summary && /* @__PURE__ */
|
|
5756
|
-
/* @__PURE__ */
|
|
5757
|
-
/* @__PURE__ */
|
|
5914
|
+
return /* @__PURE__ */ jsxs95("details", { className: cx("agn-tool", "agn-tool--" + status, className), open: open != null ? open : defaultOpen || void 0, onToggle: (e) => onToggle && onToggle(e.currentTarget.open), ...rest, children: [
|
|
5915
|
+
/* @__PURE__ */ jsxs95("summary", { className: "agn-tool__head agn-focus", children: [
|
|
5916
|
+
/* @__PURE__ */ jsx103(Icon, { name: "chevron-right", size: 14, className: "agn-tool__caret" }),
|
|
5917
|
+
/* @__PURE__ */ jsx103(Icon, { name: "wrench", size: 14, className: "agn-tool__icon" }),
|
|
5918
|
+
/* @__PURE__ */ jsx103("span", { className: "agn-tool__name", children: name }),
|
|
5919
|
+
summary && /* @__PURE__ */ jsx103("span", { className: "agn-tool__summary", children: summary }),
|
|
5920
|
+
/* @__PURE__ */ jsxs95("span", { className: cx("agn-tool__status", "agn-tool__status--" + s.tone), children: [
|
|
5921
|
+
/* @__PURE__ */ jsx103(Icon, { name: s.icon, size: 11, className: status === "running" ? "agn-tool__spin" : void 0 }),
|
|
5758
5922
|
L[status] || s.label
|
|
5759
5923
|
] }),
|
|
5760
|
-
duration != null && /* @__PURE__ */
|
|
5924
|
+
duration != null && /* @__PURE__ */ jsx103("span", { className: "agn-tool__duration agn-num", children: typeof duration === "number" ? formatDuration(duration, locale) : duration })
|
|
5761
5925
|
] }),
|
|
5762
|
-
/* @__PURE__ */
|
|
5763
|
-
input != null && /* @__PURE__ */
|
|
5764
|
-
/* @__PURE__ */
|
|
5765
|
-
/* @__PURE__ */
|
|
5926
|
+
/* @__PURE__ */ jsxs95("div", { className: "agn-tool__body", children: [
|
|
5927
|
+
input != null && /* @__PURE__ */ jsxs95("div", { className: "agn-tool__section", children: [
|
|
5928
|
+
/* @__PURE__ */ jsx103("div", { className: "agn-eyebrow agn-eyebrow--quiet", children: L.input }),
|
|
5929
|
+
/* @__PURE__ */ jsx103("pre", { className: "agn-tool__pre", children: /* @__PURE__ */ jsx103("code", { children: show(input) }) })
|
|
5766
5930
|
] }),
|
|
5767
|
-
output != null && /* @__PURE__ */
|
|
5768
|
-
/* @__PURE__ */
|
|
5769
|
-
/* @__PURE__ */
|
|
5931
|
+
output != null && /* @__PURE__ */ jsxs95("div", { className: "agn-tool__section", children: [
|
|
5932
|
+
/* @__PURE__ */ jsx103("div", { className: "agn-eyebrow agn-eyebrow--quiet", children: L.output }),
|
|
5933
|
+
/* @__PURE__ */ jsx103("pre", { className: "agn-tool__pre", children: /* @__PURE__ */ jsx103("code", { children: show(output) }) })
|
|
5770
5934
|
] })
|
|
5771
5935
|
] })
|
|
5772
5936
|
] });
|
|
5773
5937
|
}
|
|
5774
5938
|
|
|
5775
5939
|
// src/chat/StreamingIndicator.jsx
|
|
5776
|
-
import
|
|
5777
|
-
import { jsx as
|
|
5940
|
+
import React106 from "react";
|
|
5941
|
+
import { jsx as jsx104, jsxs as jsxs96 } from "react/jsx-runtime";
|
|
5778
5942
|
function StreamingIndicator({ label, dots = true, inline, labels, className, ...rest }) {
|
|
5779
5943
|
const L = { thinking: "Thinking\u2026", ...labels };
|
|
5780
5944
|
const Tag2 = inline ? "span" : "div";
|
|
5781
5945
|
return (
|
|
5782
5946
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5783
|
-
/* @__PURE__ */
|
|
5784
|
-
dots && /* @__PURE__ */
|
|
5785
|
-
/* @__PURE__ */
|
|
5786
|
-
/* @__PURE__ */
|
|
5787
|
-
/* @__PURE__ */
|
|
5947
|
+
/* @__PURE__ */ jsxs96(Tag2, { className: cx("agn-streaming", inline && "agn-streaming--inline", className), role: "status", "aria-live": "polite", ...rest, children: [
|
|
5948
|
+
dots && /* @__PURE__ */ jsxs96("span", { className: "agn-streaming__dots", "aria-hidden": "true", children: [
|
|
5949
|
+
/* @__PURE__ */ jsx104("i", {}),
|
|
5950
|
+
/* @__PURE__ */ jsx104("i", {}),
|
|
5951
|
+
/* @__PURE__ */ jsx104("i", {})
|
|
5788
5952
|
] }),
|
|
5789
|
-
/* @__PURE__ */
|
|
5953
|
+
/* @__PURE__ */ jsx104("span", { className: "agn-streaming__text", children: label || L.thinking })
|
|
5790
5954
|
] })
|
|
5791
5955
|
);
|
|
5792
5956
|
}
|
|
5793
5957
|
|
|
5794
5958
|
// src/chat/ChatMessage.jsx
|
|
5795
|
-
import { jsx as
|
|
5959
|
+
import { jsx as jsx105, jsxs as jsxs97 } from "react/jsx-runtime";
|
|
5796
5960
|
var TICK = { sending: "clock", sent: "check", delivered: "check-check", read: "check-check", failed: "circle-alert" };
|
|
5797
5961
|
var initials3 = (name = "") => String(name).trim().split(/\s+/).slice(0, 2).map((w) => w.charAt(0).toLocaleUpperCase("tr-TR")).join("");
|
|
5798
5962
|
function Structured({ data, onAction }) {
|
|
5799
5963
|
const act = (a) => onAction && onAction(a.value != null ? a.value : a.label, a);
|
|
5800
|
-
return /* @__PURE__ */
|
|
5801
|
-
data.image && /* @__PURE__ */
|
|
5802
|
-
/* @__PURE__ */
|
|
5803
|
-
data.image.caption && /* @__PURE__ */
|
|
5964
|
+
return /* @__PURE__ */ jsxs97("div", { className: "agn-msg__structured", children: [
|
|
5965
|
+
data.image && /* @__PURE__ */ jsxs97("figure", { className: "agn-msg__figure", children: [
|
|
5966
|
+
/* @__PURE__ */ jsx105("img", { className: "agn-msg__image", src: data.image.src, alt: data.image.alt || "" }),
|
|
5967
|
+
data.image.caption && /* @__PURE__ */ jsx105("figcaption", { children: data.image.caption })
|
|
5804
5968
|
] }),
|
|
5805
|
-
data.cards && data.cards.length > 0 && /* @__PURE__ */
|
|
5806
|
-
c.image && /* @__PURE__ */
|
|
5807
|
-
/* @__PURE__ */
|
|
5808
|
-
/* @__PURE__ */
|
|
5809
|
-
c.text && /* @__PURE__ */
|
|
5810
|
-
c.actions && /* @__PURE__ */
|
|
5969
|
+
data.cards && data.cards.length > 0 && /* @__PURE__ */ jsx105("div", { className: "agn-msg__cards", children: data.cards.map((c, i) => /* @__PURE__ */ jsxs97("div", { className: "agn-msg__card", children: [
|
|
5970
|
+
c.image && /* @__PURE__ */ jsx105("img", { className: "agn-msg__card-image", src: c.image, alt: c.imageAlt || "" }),
|
|
5971
|
+
/* @__PURE__ */ jsxs97("div", { className: "agn-msg__card-body", children: [
|
|
5972
|
+
/* @__PURE__ */ jsx105("div", { className: "agn-msg__card-title", children: c.title }),
|
|
5973
|
+
c.text && /* @__PURE__ */ jsx105("div", { className: "agn-msg__card-text", children: c.text }),
|
|
5974
|
+
c.actions && /* @__PURE__ */ jsx105("div", { className: "agn-msg__card-actions", children: c.actions.map((a, j) => /* @__PURE__ */ jsx105(Button, { size: "xs", variant: a.variant || "neutral", onClick: () => act(a), children: a.label }, j)) })
|
|
5811
5975
|
] })
|
|
5812
5976
|
] }, i)) }),
|
|
5813
|
-
data.table && /* @__PURE__ */
|
|
5814
|
-
/* @__PURE__ */
|
|
5815
|
-
/* @__PURE__ */
|
|
5977
|
+
data.table && /* @__PURE__ */ jsx105("div", { className: "agn-msg__table-wrap", children: /* @__PURE__ */ jsxs97("table", { className: "agn-msg__table", children: [
|
|
5978
|
+
/* @__PURE__ */ jsx105("thead", { children: /* @__PURE__ */ jsx105("tr", { children: data.table.columns.map((c, i) => /* @__PURE__ */ jsx105("th", { children: c }, i)) }) }),
|
|
5979
|
+
/* @__PURE__ */ jsx105("tbody", { children: data.table.rows.map((r, i) => /* @__PURE__ */ jsx105("tr", { children: r.map((v, j) => /* @__PURE__ */ jsx105("td", { children: v }, j)) }, i)) })
|
|
5816
5980
|
] }) }),
|
|
5817
|
-
data.buttons && data.buttons.length > 0 && /* @__PURE__ */
|
|
5981
|
+
data.buttons && data.buttons.length > 0 && /* @__PURE__ */ jsx105("div", { className: "agn-msg__buttons", children: data.buttons.map((b, i) => /* @__PURE__ */ jsx105(Button, { size: "sm", variant: b.variant || "neutral", icon: b.icon, onClick: () => act(b), children: b.label }, i)) })
|
|
5818
5982
|
] });
|
|
5819
5983
|
}
|
|
5820
5984
|
function ChatMessage({ role = "agent", name, time, status, avatar, children, markdown = true, structured, sources, tools, streaming, onAction, labels, className, ...rest }) {
|
|
5821
5985
|
const L = { sending: "Sending", sent: "Sent", delivered: "Delivered", read: "Read", failed: "Not delivered", sources: "Sources", tools: "tool calls", tool: "tool call", agent: "Agent", you: "You", ...labels };
|
|
5822
|
-
if (role === "system") return /* @__PURE__ */
|
|
5823
|
-
/* @__PURE__ */
|
|
5824
|
-
time && /* @__PURE__ */
|
|
5986
|
+
if (role === "system") return /* @__PURE__ */ jsxs97("div", { className: cx("agn-msg agn-msg--system", className), ...rest, children: [
|
|
5987
|
+
/* @__PURE__ */ jsx105("span", { className: "agn-msg__system", children }),
|
|
5988
|
+
time && /* @__PURE__ */ jsx105("span", { className: "agn-msg__time", children: time })
|
|
5825
5989
|
] });
|
|
5826
|
-
const body = typeof children === "string" && markdown ? /* @__PURE__ */
|
|
5827
|
-
const side = role === "agent" ? /* @__PURE__ */
|
|
5828
|
-
return /* @__PURE__ */
|
|
5829
|
-
side && /* @__PURE__ */
|
|
5830
|
-
/* @__PURE__ */
|
|
5831
|
-
(name || role === "agent") && /* @__PURE__ */
|
|
5832
|
-
/* @__PURE__ */
|
|
5990
|
+
const body = typeof children === "string" && markdown ? /* @__PURE__ */ jsx105(ChatMarkdown, { source: children }) : children;
|
|
5991
|
+
const side = role === "agent" ? /* @__PURE__ */ jsx105("span", { className: "agn-msg__tile", "aria-hidden": "true", children: /* @__PURE__ */ jsx105(Icon, { name: "bot", size: 14 }) }) : role === "human-agent" || avatar ? /* @__PURE__ */ jsx105("span", { className: "agn-msg__avatar", "aria-hidden": "true", children: typeof avatar === "string" ? initials3(avatar) : avatar || initials3(name) }) : null;
|
|
5992
|
+
return /* @__PURE__ */ jsxs97("div", { className: cx("agn-msg", "agn-msg--" + role, streaming && "agn-msg--streaming", className), ...rest, children: [
|
|
5993
|
+
side && /* @__PURE__ */ jsx105("div", { className: "agn-msg__side", children: side }),
|
|
5994
|
+
/* @__PURE__ */ jsxs97("div", { className: "agn-msg__col", children: [
|
|
5995
|
+
(name || role === "agent") && /* @__PURE__ */ jsx105("div", { className: "agn-msg__name", children: name || L.agent }),
|
|
5996
|
+
/* @__PURE__ */ jsxs97("div", { className: "agn-msg__bubble", children: [
|
|
5833
5997
|
body,
|
|
5834
|
-
streaming && (children == null || children === "" ? /* @__PURE__ */
|
|
5998
|
+
streaming && (children == null || children === "" ? /* @__PURE__ */ jsx105(StreamingIndicator, { inline: true }) : /* @__PURE__ */ jsx105("span", { className: "agn-msg__cursor", "aria-hidden": "true" }))
|
|
5835
5999
|
] }),
|
|
5836
|
-
structured && /* @__PURE__ */
|
|
5837
|
-
tools && tools.length > 0 && /* @__PURE__ */
|
|
5838
|
-
/* @__PURE__ */
|
|
5839
|
-
/* @__PURE__ */
|
|
5840
|
-
/* @__PURE__ */
|
|
6000
|
+
structured && /* @__PURE__ */ jsx105(Structured, { data: structured, onAction }),
|
|
6001
|
+
tools && tools.length > 0 && /* @__PURE__ */ jsxs97("details", { className: "agn-msg__tools", children: [
|
|
6002
|
+
/* @__PURE__ */ jsxs97("summary", { className: "agn-msg__tools-head agn-focus", children: [
|
|
6003
|
+
/* @__PURE__ */ jsx105(Icon, { name: "chevron-right", size: 12, className: "agn-msg__tools-caret" }),
|
|
6004
|
+
/* @__PURE__ */ jsx105(Icon, { name: "wrench", size: 12 }),
|
|
5841
6005
|
tools.length,
|
|
5842
6006
|
" ",
|
|
5843
6007
|
tools.length === 1 ? L.tool : L.tools
|
|
5844
6008
|
] }),
|
|
5845
|
-
/* @__PURE__ */
|
|
6009
|
+
/* @__PURE__ */ jsx105("div", { className: "agn-msg__tools-body", children: tools.map((t, i) => /* @__PURE__ */ jsx105(ToolCallCard, { ...t }, t.id || i)) })
|
|
5846
6010
|
] }),
|
|
5847
|
-
sources && sources.length > 0 && /* @__PURE__ */
|
|
5848
|
-
/* @__PURE__ */
|
|
5849
|
-
/* @__PURE__ */
|
|
5850
|
-
/* @__PURE__ */
|
|
6011
|
+
sources && sources.length > 0 && /* @__PURE__ */ jsxs97("div", { className: "agn-msg__sources", children: [
|
|
6012
|
+
/* @__PURE__ */ jsx105("span", { className: "agn-eyebrow agn-eyebrow--quiet", children: L.sources }),
|
|
6013
|
+
/* @__PURE__ */ jsx105("ul", { className: "agn-msg__source-list", children: sources.map((s, i) => /* @__PURE__ */ jsx105("li", { children: s.href ? /* @__PURE__ */ jsxs97("a", { className: "agn-msg__source", href: s.href, target: "_blank", rel: "noopener noreferrer", children: [
|
|
6014
|
+
/* @__PURE__ */ jsx105(Icon, { name: s.icon || "file-text", size: 11 }),
|
|
5851
6015
|
s.label
|
|
5852
|
-
] }) : /* @__PURE__ */
|
|
5853
|
-
/* @__PURE__ */
|
|
6016
|
+
] }) : /* @__PURE__ */ jsxs97("span", { className: "agn-msg__source", children: [
|
|
6017
|
+
/* @__PURE__ */ jsx105(Icon, { name: s.icon || "file-text", size: 11 }),
|
|
5854
6018
|
s.label
|
|
5855
6019
|
] }) }, i)) })
|
|
5856
6020
|
] }),
|
|
5857
|
-
(time || status) && /* @__PURE__ */
|
|
5858
|
-
time && /* @__PURE__ */
|
|
5859
|
-
status && TICK[status] && /* @__PURE__ */
|
|
5860
|
-
/* @__PURE__ */
|
|
5861
|
-
/* @__PURE__ */
|
|
5862
|
-
status === "failed" && /* @__PURE__ */
|
|
6021
|
+
(time || status) && /* @__PURE__ */ jsxs97("div", { className: "agn-msg__meta", children: [
|
|
6022
|
+
time && /* @__PURE__ */ jsx105("span", { className: "agn-msg__time", children: time }),
|
|
6023
|
+
status && TICK[status] && /* @__PURE__ */ jsxs97("span", { className: cx("agn-msg__tick", "agn-msg__tick--" + status), title: L[status], children: [
|
|
6024
|
+
/* @__PURE__ */ jsx105(Icon, { name: TICK[status], size: 12 }),
|
|
6025
|
+
/* @__PURE__ */ jsx105("span", { className: "agn-sr", children: L[status] }),
|
|
6026
|
+
status === "failed" && /* @__PURE__ */ jsx105("span", { className: "agn-msg__tick-text", children: L.failed })
|
|
5863
6027
|
] })
|
|
5864
6028
|
] })
|
|
5865
6029
|
] })
|
|
@@ -5867,8 +6031,8 @@ function ChatMessage({ role = "agent", name, time, status, avatar, children, mar
|
|
|
5867
6031
|
}
|
|
5868
6032
|
|
|
5869
6033
|
// src/chat/ChatEvent.jsx
|
|
5870
|
-
import
|
|
5871
|
-
import { jsx as
|
|
6034
|
+
import React108 from "react";
|
|
6035
|
+
import { jsx as jsx106, jsxs as jsxs98 } from "react/jsx-runtime";
|
|
5872
6036
|
var EVENT_KINDS = {
|
|
5873
6037
|
"handoff-requested": { icon: "hand", tone: "warn", label: "Handoff requested" },
|
|
5874
6038
|
"handoff-accepted": { icon: "user-check", tone: "ok", label: "Handoff accepted" },
|
|
@@ -5882,25 +6046,25 @@ function ChatEvent({ kind = "info", tone, icon, time, children, className, ...re
|
|
|
5882
6046
|
const k = EVENT_KINDS[kind] || EVENT_KINDS.info;
|
|
5883
6047
|
return (
|
|
5884
6048
|
// biome-ignore lint/a11y/useSemanticElements: a live status message, not the result of a calculation; <output> is a form-associated element and changes nothing for AT here
|
|
5885
|
-
/* @__PURE__ */
|
|
5886
|
-
/* @__PURE__ */
|
|
5887
|
-
/* @__PURE__ */
|
|
5888
|
-
time && /* @__PURE__ */
|
|
6049
|
+
/* @__PURE__ */ jsxs98("div", { className: cx("agn-chat-event", "agn-chat-event--" + (tone || k.tone), className), role: "status", ...rest, children: [
|
|
6050
|
+
/* @__PURE__ */ jsx106(Icon, { name: icon || k.icon, size: 12 }),
|
|
6051
|
+
/* @__PURE__ */ jsx106("span", { className: "agn-chat-event__text", children: children != null ? children : k.label }),
|
|
6052
|
+
time && /* @__PURE__ */ jsx106("span", { className: "agn-chat-event__time", children: time })
|
|
5889
6053
|
] })
|
|
5890
6054
|
);
|
|
5891
6055
|
}
|
|
5892
6056
|
|
|
5893
6057
|
// src/chat/ChatSuggestions.jsx
|
|
5894
|
-
import
|
|
5895
|
-
import { jsx as
|
|
6058
|
+
import React109 from "react";
|
|
6059
|
+
import { jsx as jsx107, jsxs as jsxs99 } from "react/jsx-runtime";
|
|
5896
6060
|
function ChatSuggestions({ items = [], onPick, row, labels, className, ...rest }) {
|
|
5897
6061
|
const L = { suggestions: "Suggestions", ...labels };
|
|
5898
6062
|
return (
|
|
5899
6063
|
// biome-ignore lint/a11y/useSemanticElements: a labelled role=group is the intended semantics for this cluster; <fieldset> brings form semantics, a legend and UA chrome it does not want
|
|
5900
|
-
/* @__PURE__ */
|
|
6064
|
+
/* @__PURE__ */ jsx107("div", { className: cx("agn-chat-suggest", row && "agn-chat-suggest--row", className), role: "group", "aria-label": L.suggestions, ...rest, children: items.map((s, i) => {
|
|
5901
6065
|
const item = typeof s === "string" ? { label: s } : s;
|
|
5902
|
-
return /* @__PURE__ */
|
|
5903
|
-
item.icon && /* @__PURE__ */
|
|
6066
|
+
return /* @__PURE__ */ jsxs99("button", { type: "button", className: "agn-chat-suggest__chip agn-focus", onClick: () => onPick && onPick(item.value != null ? item.value : item.label, item), children: [
|
|
6067
|
+
item.icon && /* @__PURE__ */ jsx107(Icon, { name: item.icon, size: 12 }),
|
|
5904
6068
|
item.label
|
|
5905
6069
|
] }, i);
|
|
5906
6070
|
}) })
|
|
@@ -5908,17 +6072,17 @@ function ChatSuggestions({ items = [], onPick, row, labels, className, ...rest }
|
|
|
5908
6072
|
}
|
|
5909
6073
|
|
|
5910
6074
|
// src/chat/ChatComposer.jsx
|
|
5911
|
-
import
|
|
5912
|
-
import { Fragment as Fragment13, jsx as
|
|
6075
|
+
import React110 from "react";
|
|
6076
|
+
import { Fragment as Fragment13, jsx as jsx108, jsxs as jsxs100 } from "react/jsx-runtime";
|
|
5913
6077
|
var fmtSize2 = (b) => b >= 1048576 ? (b / 1048576).toFixed(1) + " MB" : b >= 1024 ? Math.round(b / 1024) + " KB" : b + " B";
|
|
5914
6078
|
function ChatComposer({ value, defaultValue = "", onChange, onSend, onStop, streaming, disabled, placeholder, attach = true, maxFiles = 5, maxFileSize = 10 * 1048576, files = [], onAttach, onRemoveFile, voice = "off", onDictate, onHandsFree, footnote, toolbar, header, maxRows = 8, labels, className, ...rest }) {
|
|
5915
6079
|
const L = { placeholder: "Message the agent\u2026", send: "Send", stop: "Stop", attach: "Attach files", attachHint: "Up to 5 files, 10 MB each", dictate: "Dictate", handsFree: "Hands-free voice", listening: "Listening\u2026", speaking: "Speaking\u2026", remove: "Remove", tooMany: "You can attach up to 5 files.", tooLarge: "Each file must be under 10 MB.", ...labels };
|
|
5916
|
-
const [own, setOwn] =
|
|
5917
|
-
const [err, setErr] =
|
|
6080
|
+
const [own, setOwn] = React110.useState(defaultValue);
|
|
6081
|
+
const [err, setErr] = React110.useState(null);
|
|
5918
6082
|
const val = value != null ? value : own;
|
|
5919
|
-
const ta =
|
|
5920
|
-
const file =
|
|
5921
|
-
const id =
|
|
6083
|
+
const ta = React110.useRef(null);
|
|
6084
|
+
const file = React110.useRef(null);
|
|
6085
|
+
const id = React110.useMemo(() => uid("chatbox"), []);
|
|
5922
6086
|
const grow = () => {
|
|
5923
6087
|
const el = ta.current;
|
|
5924
6088
|
if (!el) return;
|
|
@@ -5926,7 +6090,7 @@ function ChatComposer({ value, defaultValue = "", onChange, onSend, onStop, stre
|
|
|
5926
6090
|
const line = parseFloat(getComputedStyle(el).lineHeight) || 20;
|
|
5927
6091
|
el.style.height = Math.min(el.scrollHeight, line * maxRows + 16) + "px";
|
|
5928
6092
|
};
|
|
5929
|
-
|
|
6093
|
+
React110.useEffect(grow, [val, maxRows]);
|
|
5930
6094
|
const set = (v) => {
|
|
5931
6095
|
if (value == null) setOwn(v);
|
|
5932
6096
|
onChange && onChange(v);
|
|
@@ -5955,16 +6119,16 @@ function ChatComposer({ value, defaultValue = "", onChange, onSend, onStop, stre
|
|
|
5955
6119
|
onAttach && onAttach(list);
|
|
5956
6120
|
};
|
|
5957
6121
|
const canSend = streaming || !disabled && (val.trim().length > 0 || files.length > 0);
|
|
5958
|
-
return /* @__PURE__ */
|
|
5959
|
-
/* @__PURE__ */
|
|
5960
|
-
header && /* @__PURE__ */
|
|
5961
|
-
files.length > 0 && /* @__PURE__ */
|
|
5962
|
-
/* @__PURE__ */
|
|
5963
|
-
/* @__PURE__ */
|
|
5964
|
-
f.size != null && /* @__PURE__ */
|
|
5965
|
-
onRemoveFile && /* @__PURE__ */
|
|
6122
|
+
return /* @__PURE__ */ jsxs100("div", { className: cx("agn-chatbox", disabled && "agn-chatbox--disabled", className), ...rest, children: [
|
|
6123
|
+
/* @__PURE__ */ jsxs100("div", { className: "agn-chatbox__box", children: [
|
|
6124
|
+
header && /* @__PURE__ */ jsx108("div", { className: "agn-chatbox__header", children: header }),
|
|
6125
|
+
files.length > 0 && /* @__PURE__ */ jsx108("ul", { className: "agn-chatbox__files", children: files.map((f, i) => /* @__PURE__ */ jsxs100("li", { className: "agn-chatbox__file", children: [
|
|
6126
|
+
/* @__PURE__ */ jsx108(Icon, { name: "paperclip", size: 11 }),
|
|
6127
|
+
/* @__PURE__ */ jsx108("span", { className: "agn-chatbox__file-name", children: f.name }),
|
|
6128
|
+
f.size != null && /* @__PURE__ */ jsx108("span", { className: "agn-chatbox__file-size", children: fmtSize2(f.size) }),
|
|
6129
|
+
onRemoveFile && /* @__PURE__ */ jsx108("button", { type: "button", className: "agn-chatbox__file-x", "aria-label": L.remove + " " + f.name, onClick: () => onRemoveFile(f, i), children: /* @__PURE__ */ jsx108(Icon, { name: "x", size: 11 }) })
|
|
5966
6130
|
] }, i)) }),
|
|
5967
|
-
/* @__PURE__ */
|
|
6131
|
+
/* @__PURE__ */ jsx108(
|
|
5968
6132
|
"textarea",
|
|
5969
6133
|
{
|
|
5970
6134
|
ref: ta,
|
|
@@ -5984,182 +6148,182 @@ function ChatComposer({ value, defaultValue = "", onChange, onSend, onStop, stre
|
|
|
5984
6148
|
}
|
|
5985
6149
|
}
|
|
5986
6150
|
),
|
|
5987
|
-
/* @__PURE__ */
|
|
5988
|
-
/* @__PURE__ */
|
|
5989
|
-
attach && /* @__PURE__ */
|
|
5990
|
-
/* @__PURE__ */
|
|
5991
|
-
/* @__PURE__ */
|
|
6151
|
+
/* @__PURE__ */ jsxs100("div", { className: "agn-chatbox__bar", children: [
|
|
6152
|
+
/* @__PURE__ */ jsxs100("div", { className: "agn-chatbox__tools", children: [
|
|
6153
|
+
attach && /* @__PURE__ */ jsxs100(Fragment13, { children: [
|
|
6154
|
+
/* @__PURE__ */ jsx108("input", { ref: file, type: "file", multiple: true, className: "agn-sr", tabIndex: -1, "aria-hidden": "true", onChange: pick }),
|
|
6155
|
+
/* @__PURE__ */ jsx108(ButtonIcon, { icon: "paperclip", label: L.attach + " \xB7 " + L.attachHint, size: "sm", disabled, onClick: () => file.current && file.current.click() })
|
|
5992
6156
|
] }),
|
|
5993
|
-
voice !== "off" && /* @__PURE__ */
|
|
5994
|
-
/* @__PURE__ */
|
|
5995
|
-
/* @__PURE__ */
|
|
5996
|
-
(voice === "listening" || voice === "speaking") && /* @__PURE__ */
|
|
5997
|
-
/* @__PURE__ */
|
|
6157
|
+
voice !== "off" && /* @__PURE__ */ jsxs100(Fragment13, { children: [
|
|
6158
|
+
/* @__PURE__ */ jsx108(ButtonIcon, { icon: "mic", label: L.dictate, size: "sm", disabled, className: cx("agn-chatbox__voice", voice === "listening" && "agn-chatbox__voice--on"), "aria-pressed": voice === "listening", onClick: onDictate }),
|
|
6159
|
+
/* @__PURE__ */ jsx108(ButtonIcon, { icon: "audio-lines", label: L.handsFree, size: "sm", disabled, className: cx("agn-chatbox__voice", voice === "speaking" && "agn-chatbox__voice--on"), "aria-pressed": voice === "speaking", onClick: onHandsFree }),
|
|
6160
|
+
(voice === "listening" || voice === "speaking") && /* @__PURE__ */ jsxs100("span", { className: "agn-chatbox__voice-state", role: "status", children: [
|
|
6161
|
+
/* @__PURE__ */ jsx108("span", { className: "agn-chatbox__voice-dot", "aria-hidden": "true" }),
|
|
5998
6162
|
voice === "listening" ? L.listening : L.speaking
|
|
5999
6163
|
] })
|
|
6000
6164
|
] }),
|
|
6001
|
-
toolbar && /* @__PURE__ */
|
|
6002
|
-
err && /* @__PURE__ */
|
|
6165
|
+
toolbar && /* @__PURE__ */ jsx108("div", { className: "agn-chatbox__toolbar", children: toolbar }),
|
|
6166
|
+
err && /* @__PURE__ */ jsx108("span", { className: "agn-chatbox__error", role: "alert", children: err })
|
|
6003
6167
|
] }),
|
|
6004
|
-
/* @__PURE__ */
|
|
6168
|
+
/* @__PURE__ */ jsx108(ButtonIcon, { icon: streaming ? "square" : "arrow-up", label: streaming ? L.stop : L.send, variant: streaming ? "destructive-text" : "primary", size: "sm", disabled: !canSend, onClick: send, className: "agn-chatbox__send" })
|
|
6005
6169
|
] })
|
|
6006
6170
|
] }),
|
|
6007
|
-
footnote && /* @__PURE__ */
|
|
6171
|
+
footnote && /* @__PURE__ */ jsx108("div", { className: "agn-chatbox__footnote", children: footnote })
|
|
6008
6172
|
] });
|
|
6009
6173
|
}
|
|
6010
6174
|
|
|
6011
6175
|
// src/chat/TranscriptPanel.jsx
|
|
6012
|
-
import
|
|
6013
|
-
import { jsx as
|
|
6176
|
+
import React111 from "react";
|
|
6177
|
+
import { jsx as jsx109, jsxs as jsxs101 } from "react/jsx-runtime";
|
|
6014
6178
|
var VERDICT_ICON = { ok: "circle-check", bad: "circle-x", warn: "triangle-alert", neutral: "info", info: "info" };
|
|
6015
6179
|
function TranscriptPanel({ title, meta, turns = [], verdict, selected, onSelect, maxHeight = 420, locale = "tr-TR", labels, className, ...rest }) {
|
|
6016
6180
|
const L = { agent: "Agent", customer: "Customer", system: "System", judge: "Judge", latency: "latency", flagged: "Flagged", empty: "No turns", ...labels };
|
|
6017
6181
|
const Row = onSelect ? "button" : "div";
|
|
6018
|
-
return /* @__PURE__ */
|
|
6019
|
-
(title || meta) && /* @__PURE__ */
|
|
6020
|
-
title && /* @__PURE__ */
|
|
6021
|
-
meta && /* @__PURE__ */
|
|
6182
|
+
return /* @__PURE__ */ jsxs101("section", { className: cx("agn-transcript", className), "aria-label": typeof title === "string" ? title : void 0, ...rest, children: [
|
|
6183
|
+
(title || meta) && /* @__PURE__ */ jsxs101("header", { className: "agn-transcript__head", children: [
|
|
6184
|
+
title && /* @__PURE__ */ jsx109("h3", { className: "agn-transcript__title", children: title }),
|
|
6185
|
+
meta && /* @__PURE__ */ jsx109("div", { className: "agn-transcript__meta", children: meta })
|
|
6022
6186
|
] }),
|
|
6023
|
-
verdict && /* @__PURE__ */
|
|
6024
|
-
/* @__PURE__ */
|
|
6025
|
-
/* @__PURE__ */
|
|
6187
|
+
verdict && /* @__PURE__ */ jsxs101("div", { className: cx("agn-transcript__verdict", "agn-transcript__verdict--" + (verdict.tone || "neutral")), children: [
|
|
6188
|
+
/* @__PURE__ */ jsx109(Icon, { name: VERDICT_ICON[verdict.tone] || "info", size: 14 }),
|
|
6189
|
+
/* @__PURE__ */ jsxs101("span", { className: "agn-transcript__verdict-label", children: [
|
|
6026
6190
|
L.judge,
|
|
6027
6191
|
" \xB7 ",
|
|
6028
6192
|
verdict.label
|
|
6029
6193
|
] }),
|
|
6030
|
-
verdict.score != null && /* @__PURE__ */
|
|
6031
|
-
verdict.summary && /* @__PURE__ */
|
|
6032
|
-
verdict.dimensions && /* @__PURE__ */
|
|
6033
|
-
/* @__PURE__ */
|
|
6194
|
+
verdict.score != null && /* @__PURE__ */ jsx109("span", { className: "agn-transcript__verdict-score agn-num", children: verdict.score }),
|
|
6195
|
+
verdict.summary && /* @__PURE__ */ jsx109("span", { className: "agn-transcript__verdict-text", children: verdict.summary }),
|
|
6196
|
+
verdict.dimensions && /* @__PURE__ */ jsx109("ul", { className: "agn-transcript__dims", children: verdict.dimensions.map((d, i) => /* @__PURE__ */ jsxs101("li", { className: cx("agn-transcript__dim", d.pass ? "agn-transcript__dim--ok" : "agn-transcript__dim--bad"), children: [
|
|
6197
|
+
/* @__PURE__ */ jsx109(Icon, { name: d.pass ? "check" : "x", size: 10 }),
|
|
6034
6198
|
d.name
|
|
6035
6199
|
] }, i)) })
|
|
6036
6200
|
] }),
|
|
6037
|
-
/* @__PURE__ */
|
|
6201
|
+
/* @__PURE__ */ jsxs101("ol", { className: "agn-transcript__turns", style: { maxHeight }, children: [
|
|
6038
6202
|
turns.map((t, i) => {
|
|
6039
6203
|
const n = t.n != null ? t.n : i + 1;
|
|
6040
6204
|
const sel = selected != null && selected === (t.id != null ? t.id : n);
|
|
6041
|
-
return /* @__PURE__ */
|
|
6042
|
-
/* @__PURE__ */
|
|
6043
|
-
/* @__PURE__ */
|
|
6044
|
-
/* @__PURE__ */
|
|
6205
|
+
return /* @__PURE__ */ jsx109("li", { className: cx("agn-transcript__turn", "agn-transcript__turn--" + (t.speaker || "agent"), t.flagged && "agn-transcript__turn--flagged", sel && "agn-transcript__turn--selected"), children: /* @__PURE__ */ jsxs101(Row, { type: onSelect ? "button" : void 0, className: "agn-transcript__row agn-focus-inset", "aria-pressed": onSelect ? sel : void 0, onClick: onSelect ? () => onSelect(t.id != null ? t.id : n, t) : void 0, children: [
|
|
6206
|
+
/* @__PURE__ */ jsx109("span", { className: "agn-transcript__n agn-num", children: String(n).padStart(2, "0") }),
|
|
6207
|
+
/* @__PURE__ */ jsx109("span", { className: "agn-transcript__speaker", children: t.name || L[t.speaker] || t.speaker }),
|
|
6208
|
+
/* @__PURE__ */ jsxs101("span", { className: "agn-transcript__text", children: [
|
|
6045
6209
|
t.text,
|
|
6046
|
-
t.note && /* @__PURE__ */
|
|
6210
|
+
t.note && /* @__PURE__ */ jsx109("span", { className: "agn-transcript__note", children: t.note })
|
|
6047
6211
|
] }),
|
|
6048
|
-
/* @__PURE__ */
|
|
6049
|
-
t.flagged && /* @__PURE__ */
|
|
6050
|
-
/* @__PURE__ */
|
|
6212
|
+
/* @__PURE__ */ jsxs101("span", { className: "agn-transcript__right", children: [
|
|
6213
|
+
t.flagged && /* @__PURE__ */ jsxs101("span", { className: "agn-transcript__flag", children: [
|
|
6214
|
+
/* @__PURE__ */ jsx109(Icon, { name: "flag", size: 11 }),
|
|
6051
6215
|
L.flagged
|
|
6052
6216
|
] }),
|
|
6053
|
-
t.latencyMs != null && /* @__PURE__ */
|
|
6054
|
-
t.time && /* @__PURE__ */
|
|
6217
|
+
t.latencyMs != null && /* @__PURE__ */ jsx109("span", { className: "agn-transcript__latency agn-num", title: L.latency, children: formatDuration(t.latencyMs, locale) }),
|
|
6218
|
+
t.time && /* @__PURE__ */ jsx109("span", { className: "agn-transcript__time agn-num", children: t.time })
|
|
6055
6219
|
] })
|
|
6056
6220
|
] }) }, t.id != null ? t.id : n);
|
|
6057
6221
|
}),
|
|
6058
|
-
!turns.length && /* @__PURE__ */
|
|
6222
|
+
!turns.length && /* @__PURE__ */ jsx109("li", { className: "agn-transcript__empty", children: L.empty })
|
|
6059
6223
|
] })
|
|
6060
6224
|
] });
|
|
6061
6225
|
}
|
|
6062
6226
|
|
|
6063
6227
|
// src/widgets/ApprovalCard.jsx
|
|
6064
|
-
import
|
|
6065
|
-
import { Fragment as Fragment14, jsx as
|
|
6228
|
+
import React112 from "react";
|
|
6229
|
+
import { Fragment as Fragment14, jsx as jsx110, jsxs as jsxs102 } from "react/jsx-runtime";
|
|
6066
6230
|
var STATUS2 = { pending: { tone: "warn", icon: "pause", label: "Paused \xB7 approval" }, approved: { tone: "ok", icon: "circle-check", label: "Approved" }, rejected: { tone: "bad", icon: "circle-x", label: "Rejected" }, queued: { tone: "neutral", icon: "clock", label: "Queued" } };
|
|
6067
6231
|
function Field({ f, value, onChange, disabled, id }) {
|
|
6068
6232
|
const set = (v) => onChange && onChange(f.key, v);
|
|
6069
6233
|
const common = { id, disabled, "aria-describedby": f.help ? id + "-help" : void 0, required: f.required };
|
|
6070
6234
|
switch (f.type) {
|
|
6071
6235
|
case "boolean":
|
|
6072
|
-
return /* @__PURE__ */
|
|
6073
|
-
/* @__PURE__ */
|
|
6074
|
-
/* @__PURE__ */
|
|
6236
|
+
return /* @__PURE__ */ jsxs102("label", { className: "agn-approval__check", children: [
|
|
6237
|
+
/* @__PURE__ */ jsx110("input", { type: "checkbox", checked: !!value, onChange: (e) => set(e.target.checked), ...common }),
|
|
6238
|
+
/* @__PURE__ */ jsx110("span", { children: f.label })
|
|
6075
6239
|
] });
|
|
6076
6240
|
case "number":
|
|
6077
|
-
return /* @__PURE__ */
|
|
6241
|
+
return /* @__PURE__ */ jsx110("input", { className: "agn-approval__input agn-num", type: "number", value: value == null ? "" : value, min: f.min, max: f.max, step: f.step, placeholder: f.placeholder, onChange: (e) => set(e.target.value === "" ? null : Number(e.target.value)), ...common });
|
|
6078
6242
|
case "json":
|
|
6079
|
-
return /* @__PURE__ */
|
|
6243
|
+
return /* @__PURE__ */ jsx110("textarea", { className: "agn-approval__input agn-approval__input--json", rows: 4, value: typeof value === "string" ? value : value == null ? "" : JSON.stringify(value, null, 2), spellCheck: false, onChange: (e) => set(e.target.value), ...common });
|
|
6080
6244
|
case "select":
|
|
6081
|
-
return /* @__PURE__ */
|
|
6082
|
-
f.placeholder && /* @__PURE__ */
|
|
6245
|
+
return /* @__PURE__ */ jsxs102("select", { className: "agn-approval__input", value: value == null ? "" : value, onChange: (e) => set(e.target.value), ...common, children: [
|
|
6246
|
+
f.placeholder && /* @__PURE__ */ jsx110("option", { value: "", children: f.placeholder }),
|
|
6083
6247
|
(f.options || []).map((o) => {
|
|
6084
6248
|
const opt = typeof o === "string" ? { value: o, label: o } : o;
|
|
6085
|
-
return /* @__PURE__ */
|
|
6249
|
+
return /* @__PURE__ */ jsx110("option", { value: opt.value, children: opt.label }, opt.value);
|
|
6086
6250
|
})
|
|
6087
6251
|
] });
|
|
6088
6252
|
default:
|
|
6089
|
-
return /* @__PURE__ */
|
|
6253
|
+
return /* @__PURE__ */ jsx110("input", { className: "agn-approval__input", type: "text", value: value == null ? "" : value, placeholder: f.placeholder, onChange: (e) => set(e.target.value), ...common });
|
|
6090
6254
|
}
|
|
6091
6255
|
}
|
|
6092
6256
|
function ApprovalCard({ agent, runId, tenant, requestedAt, requester, reason, proposal = [], fields = [], values: valProp, onChange, status = "pending", queuePosition, decidedBy, decidedAt, onApprove, onReject, onAsk, onAlways, actions, variant = "approval", loading: loading2, compact, labels, className, ...rest }) {
|
|
6093
6257
|
const perm = variant === "permission";
|
|
6094
6258
|
const L = { eyebrow: perm ? "Permission request" : "Human approval", allowOnce: "Allow once", always: "Always allow", deny: "Deny", reason: "Why the agent stopped", proposes: "Agent proposes", decision: "Your decision", approve: "Approve", reject: "Reject", ask: "Ask the agent", queued: "Queued", ahead: "ahead", by: "by", pending: "Paused \xB7 approval", approved: "Approved", rejected: "Rejected", ...labels };
|
|
6095
|
-
const [own, setOwn] =
|
|
6259
|
+
const [own, setOwn] = React112.useState(() => Object.fromEntries(fields.map((f) => [f.key, f.value])));
|
|
6096
6260
|
const values = valProp || own;
|
|
6097
6261
|
const change = (k, v) => {
|
|
6098
6262
|
if (!valProp) setOwn((o) => ({ ...o, [k]: v }));
|
|
6099
6263
|
onChange && onChange(k, v, { ...values, [k]: v });
|
|
6100
6264
|
};
|
|
6101
|
-
const id =
|
|
6265
|
+
const id = React112.useMemo(() => uid("approval"), []);
|
|
6102
6266
|
const s = STATUS2[status] || STATUS2.pending;
|
|
6103
6267
|
const open = status === "pending";
|
|
6104
6268
|
const decide = (fn) => () => fn && fn(values);
|
|
6105
|
-
return /* @__PURE__ */
|
|
6106
|
-
/* @__PURE__ */
|
|
6107
|
-
/* @__PURE__ */
|
|
6108
|
-
/* @__PURE__ */
|
|
6109
|
-
/* @__PURE__ */
|
|
6110
|
-
/* @__PURE__ */
|
|
6269
|
+
return /* @__PURE__ */ jsxs102("section", { className: cx("agn-approval", "agn-approval--" + status, perm && "agn-approval--permission", compact && "agn-approval--compact", className), "aria-labelledby": id + "-t", ...rest, children: [
|
|
6270
|
+
/* @__PURE__ */ jsxs102("header", { className: "agn-approval__head", children: [
|
|
6271
|
+
/* @__PURE__ */ jsxs102("div", { className: "agn-approval__heading", children: [
|
|
6272
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-eyebrow", children: L.eyebrow }),
|
|
6273
|
+
/* @__PURE__ */ jsx110("h3", { id: id + "-t", className: "agn-approval__title", children: agent }),
|
|
6274
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-approval__meta", children: [runId, tenant, requestedAt].filter(Boolean).map((x, i) => /* @__PURE__ */ jsx110("span", { children: x }, i)) })
|
|
6111
6275
|
] }),
|
|
6112
|
-
!perm && /* @__PURE__ */
|
|
6113
|
-
/* @__PURE__ */
|
|
6276
|
+
!perm && /* @__PURE__ */ jsxs102("span", { className: cx("agn-approval__status", "agn-approval__status--" + s.tone), children: [
|
|
6277
|
+
/* @__PURE__ */ jsx110(Icon, { name: s.icon, size: 12 }),
|
|
6114
6278
|
status === "queued" && queuePosition != null ? `${L.queued} (${queuePosition} ${L.ahead})` : L[status] || s.label
|
|
6115
6279
|
] })
|
|
6116
6280
|
] }),
|
|
6117
|
-
reason && /* @__PURE__ */
|
|
6118
|
-
/* @__PURE__ */
|
|
6119
|
-
/* @__PURE__ */
|
|
6120
|
-
/* @__PURE__ */
|
|
6121
|
-
/* @__PURE__ */
|
|
6281
|
+
reason && /* @__PURE__ */ jsxs102("div", { className: "agn-approval__reason", role: "note", children: [
|
|
6282
|
+
/* @__PURE__ */ jsx110(Icon, { name: "triangle-alert", size: 16 }),
|
|
6283
|
+
/* @__PURE__ */ jsxs102("div", { children: [
|
|
6284
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-approval__reason-label", children: L.reason }),
|
|
6285
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-approval__reason-text", children: reason })
|
|
6122
6286
|
] })
|
|
6123
6287
|
] }),
|
|
6124
|
-
proposal.length > 0 && /* @__PURE__ */
|
|
6125
|
-
/* @__PURE__ */
|
|
6126
|
-
/* @__PURE__ */
|
|
6127
|
-
/* @__PURE__ */
|
|
6128
|
-
/* @__PURE__ */
|
|
6288
|
+
proposal.length > 0 && /* @__PURE__ */ jsxs102("div", { className: "agn-approval__section", children: [
|
|
6289
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-eyebrow agn-eyebrow--quiet", children: L.proposes }),
|
|
6290
|
+
/* @__PURE__ */ jsx110("dl", { className: "agn-approval__kv", children: proposal.map((p, i) => /* @__PURE__ */ jsxs102("div", { className: "agn-approval__kv-row", children: [
|
|
6291
|
+
/* @__PURE__ */ jsx110("dt", { children: p.label }),
|
|
6292
|
+
/* @__PURE__ */ jsx110("dd", { className: p.mono ? "agn-mono" : void 0, children: p.value })
|
|
6129
6293
|
] }, i)) })
|
|
6130
6294
|
] }),
|
|
6131
|
-
fields.length > 0 && /* @__PURE__ */
|
|
6132
|
-
/* @__PURE__ */
|
|
6133
|
-
/* @__PURE__ */
|
|
6134
|
-
f.type !== "boolean" && /* @__PURE__ */
|
|
6295
|
+
fields.length > 0 && /* @__PURE__ */ jsxs102("div", { className: "agn-approval__section", children: [
|
|
6296
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-eyebrow agn-eyebrow--quiet", children: L.decision }),
|
|
6297
|
+
/* @__PURE__ */ jsx110("div", { className: "agn-approval__form", children: fields.map((f) => /* @__PURE__ */ jsxs102("div", { className: cx("agn-approval__field", f.type === "boolean" && "agn-approval__field--check"), children: [
|
|
6298
|
+
f.type !== "boolean" && /* @__PURE__ */ jsxs102("label", { className: "agn-approval__label", htmlFor: id + "-" + f.key, children: [
|
|
6135
6299
|
f.label,
|
|
6136
|
-
f.required && /* @__PURE__ */
|
|
6300
|
+
f.required && /* @__PURE__ */ jsx110("span", { "aria-hidden": "true", children: " *" })
|
|
6137
6301
|
] }),
|
|
6138
|
-
/* @__PURE__ */
|
|
6139
|
-
f.help && /* @__PURE__ */
|
|
6302
|
+
/* @__PURE__ */ jsx110(Field, { f, id: id + "-" + f.key, value: values[f.key], onChange: change, disabled: !open || loading2 }),
|
|
6303
|
+
f.help && /* @__PURE__ */ jsx110("div", { id: id + "-" + f.key + "-help", className: "agn-approval__help", children: f.help })
|
|
6140
6304
|
] }, f.key)) })
|
|
6141
6305
|
] }),
|
|
6142
|
-
/* @__PURE__ */
|
|
6143
|
-
open && actions && actions.map((a, i) => /* @__PURE__ */
|
|
6144
|
-
open && !actions && perm && /* @__PURE__ */
|
|
6145
|
-
/* @__PURE__ */
|
|
6146
|
-
/* @__PURE__ */
|
|
6147
|
-
/* @__PURE__ */
|
|
6306
|
+
/* @__PURE__ */ jsxs102("footer", { className: "agn-approval__foot", children: [
|
|
6307
|
+
open && actions && actions.map((a, i) => /* @__PURE__ */ jsx110(Button, { variant: a.variant || "neutral", icon: a.icon, loading: a.loading, disabled: loading2 || a.disabled, onClick: () => a.onClick && a.onClick(values), children: a.label }, a.id || i)),
|
|
6308
|
+
open && !actions && perm && /* @__PURE__ */ jsxs102(Fragment14, { children: [
|
|
6309
|
+
/* @__PURE__ */ jsx110(Button, { variant: "primary", icon: "check", loading: loading2, onClick: decide(onApprove), children: L.allowOnce }),
|
|
6310
|
+
/* @__PURE__ */ jsx110(Button, { variant: "neutral", icon: "check-check", disabled: loading2, onClick: decide(onAlways), children: L.always }),
|
|
6311
|
+
/* @__PURE__ */ jsx110(Button, { variant: "destructive-text", icon: "x", disabled: loading2, onClick: decide(onReject), children: L.deny })
|
|
6148
6312
|
] }),
|
|
6149
|
-
open && !actions && !perm && /* @__PURE__ */
|
|
6150
|
-
/* @__PURE__ */
|
|
6151
|
-
/* @__PURE__ */
|
|
6152
|
-
onAsk && /* @__PURE__ */
|
|
6313
|
+
open && !actions && !perm && /* @__PURE__ */ jsxs102(Fragment14, { children: [
|
|
6314
|
+
/* @__PURE__ */ jsx110(Button, { variant: "success", icon: "check", loading: loading2, onClick: decide(onApprove), children: L.approve }),
|
|
6315
|
+
/* @__PURE__ */ jsx110(Button, { variant: "destructive-text", icon: "x", disabled: loading2, onClick: decide(onReject), children: L.reject }),
|
|
6316
|
+
onAsk && /* @__PURE__ */ jsx110(Button, { variant: "neutral", icon: "message-square", disabled: loading2, onClick: decide(onAsk), children: L.ask })
|
|
6153
6317
|
] }),
|
|
6154
|
-
status === "queued" && /* @__PURE__ */
|
|
6155
|
-
/* @__PURE__ */
|
|
6318
|
+
status === "queued" && /* @__PURE__ */ jsxs102("span", { className: "agn-approval__note", children: [
|
|
6319
|
+
/* @__PURE__ */ jsx110(Icon, { name: "clock", size: 14 }),
|
|
6156
6320
|
queuePosition != null ? `${L.queued} (${queuePosition} ${L.ahead})` : L.queued
|
|
6157
6321
|
] }),
|
|
6158
|
-
(status === "approved" || status === "rejected") && /* @__PURE__ */
|
|
6159
|
-
/* @__PURE__ */
|
|
6322
|
+
(status === "approved" || status === "rejected") && /* @__PURE__ */ jsxs102("span", { className: cx("agn-approval__note", "agn-approval__note--" + s.tone), children: [
|
|
6323
|
+
/* @__PURE__ */ jsx110(Icon, { name: s.icon, size: 14 }),
|
|
6160
6324
|
L[status],
|
|
6161
6325
|
decidedBy && ` ${L.by} ${decidedBy}`,
|
|
6162
|
-
decidedAt && /* @__PURE__ */
|
|
6326
|
+
decidedAt && /* @__PURE__ */ jsxs102("span", { className: "agn-approval__note-time agn-num", children: [
|
|
6163
6327
|
" \xB7 ",
|
|
6164
6328
|
decidedAt
|
|
6165
6329
|
] })
|
|
@@ -6169,11 +6333,11 @@ function ApprovalCard({ agent, runId, tenant, requestedAt, requester, reason, pr
|
|
|
6169
6333
|
}
|
|
6170
6334
|
|
|
6171
6335
|
// src/widgets/RunTimeline.jsx
|
|
6172
|
-
import
|
|
6336
|
+
import React114 from "react";
|
|
6173
6337
|
|
|
6174
6338
|
// src/widgets/RunStatus.jsx
|
|
6175
|
-
import
|
|
6176
|
-
import { jsx as
|
|
6339
|
+
import React113 from "react";
|
|
6340
|
+
import { jsx as jsx111, jsxs as jsxs103 } from "react/jsx-runtime";
|
|
6177
6341
|
var RUN_STATUS = {
|
|
6178
6342
|
queued: { tone: "neutral", icon: "clock", label: "Queued" },
|
|
6179
6343
|
running: { tone: "info", icon: "loader-circle", label: "Running", spin: true },
|
|
@@ -6189,16 +6353,16 @@ var RUN_STATUS = {
|
|
|
6189
6353
|
function RunStatus({ status = "queued", detail, since, size = "md", labels, className, ...rest }) {
|
|
6190
6354
|
const L = { since: "since", ...Object.fromEntries(Object.entries(RUN_STATUS).map(([k, v]) => [k, v.label])), ...labels };
|
|
6191
6355
|
const s = RUN_STATUS[status] || RUN_STATUS.queued;
|
|
6192
|
-
return /* @__PURE__ */
|
|
6193
|
-
/* @__PURE__ */
|
|
6194
|
-
/* @__PURE__ */
|
|
6356
|
+
return /* @__PURE__ */ jsxs103("span", { className: cx("agn-run-status", "agn-run-status--" + s.tone, size !== "md" && "agn-run-status--" + size, className), ...rest, children: [
|
|
6357
|
+
/* @__PURE__ */ jsxs103("span", { className: "agn-run-status__tag", children: [
|
|
6358
|
+
/* @__PURE__ */ jsx111(Icon, { name: s.icon, size: size === "sm" ? 11 : 12, className: s.spin ? "agn-run-status__spin" : void 0 }),
|
|
6195
6359
|
L[status] || s.label,
|
|
6196
|
-
detail && /* @__PURE__ */
|
|
6360
|
+
detail && /* @__PURE__ */ jsxs103("span", { className: "agn-run-status__detail", children: [
|
|
6197
6361
|
" \xB7 ",
|
|
6198
6362
|
detail
|
|
6199
6363
|
] })
|
|
6200
6364
|
] }),
|
|
6201
|
-
since && /* @__PURE__ */
|
|
6365
|
+
since && /* @__PURE__ */ jsxs103("span", { className: "agn-run-status__since agn-num", children: [
|
|
6202
6366
|
L.since,
|
|
6203
6367
|
" ",
|
|
6204
6368
|
since
|
|
@@ -6224,14 +6388,14 @@ var fmtClock = (s) => {
|
|
|
6224
6388
|
var initials4 = (name = "") => String(name).trim().split(/\s+/).slice(0, 2).map((w) => w.charAt(0).toLocaleUpperCase("tr-TR")).join("");
|
|
6225
6389
|
|
|
6226
6390
|
// src/widgets/RunTimeline.jsx
|
|
6227
|
-
import { jsx as
|
|
6391
|
+
import { jsx as jsx112, jsxs as jsxs104 } from "react/jsx-runtime";
|
|
6228
6392
|
function ticks(total, n = 4) {
|
|
6229
6393
|
const step = total / n;
|
|
6230
6394
|
return Array.from({ length: n + 1 }, (_, i) => i * step);
|
|
6231
6395
|
}
|
|
6232
6396
|
function useTickCount(ref) {
|
|
6233
|
-
const [n, setN] =
|
|
6234
|
-
|
|
6397
|
+
const [n, setN] = React114.useState(4);
|
|
6398
|
+
React114.useEffect(() => {
|
|
6235
6399
|
const el = ref.current;
|
|
6236
6400
|
if (!el || typeof ResizeObserver === "undefined") return void 0;
|
|
6237
6401
|
const ro = new ResizeObserver((es) => {
|
|
@@ -6249,47 +6413,47 @@ function RunTimeline({ steps = [], total: totalProp, selected, onSelect, showCos
|
|
|
6249
6413
|
const total = totalProp || Math.max(1, ...steps.map((s) => (s.start || 0) + (s.duration || 0)));
|
|
6250
6414
|
const Row = onSelect ? "button" : "div";
|
|
6251
6415
|
const sumCost = steps.reduce((a, s) => a + (s.cost || 0), 0), sumTok = steps.reduce((a, s) => a + (s.tokens || 0), 0);
|
|
6252
|
-
const scaleRef =
|
|
6416
|
+
const scaleRef = React114.useRef(null);
|
|
6253
6417
|
const tickN = useTickCount(scaleRef);
|
|
6254
6418
|
const cols = cx("agn-rt__grid", !showTokens && "agn-rt__grid--no-tokens", !showCost && "agn-rt__grid--no-cost");
|
|
6255
|
-
return /* @__PURE__ */
|
|
6256
|
-
/* @__PURE__ */
|
|
6257
|
-
/* @__PURE__ */
|
|
6258
|
-
/* @__PURE__ */
|
|
6259
|
-
showTokens && /* @__PURE__ */
|
|
6260
|
-
showCost && /* @__PURE__ */
|
|
6419
|
+
return /* @__PURE__ */ jsxs104("div", { className: cx("agn-rt", className), role: "table", "aria-label": L.step + "s", ...rest, children: [
|
|
6420
|
+
/* @__PURE__ */ jsxs104("div", { className: cx("agn-rt__head", cols), role: "row", children: [
|
|
6421
|
+
/* @__PURE__ */ jsx112("span", { role: "columnheader", children: L.step }),
|
|
6422
|
+
/* @__PURE__ */ jsx112("span", { role: "columnheader", className: "agn-rt__scale", ref: scaleRef, children: ticks(total, tickN).map((t, i) => /* @__PURE__ */ jsx112("span", { className: "agn-rt__tick agn-num", style: { left: t / total * 100 + "%" }, children: formatDuration(t, locale) }, i)) }),
|
|
6423
|
+
showTokens && /* @__PURE__ */ jsx112("span", { role: "columnheader", className: "agn-rt__num", children: L.tokens }),
|
|
6424
|
+
showCost && /* @__PURE__ */ jsx112("span", { role: "columnheader", className: "agn-rt__num", children: L.cost })
|
|
6261
6425
|
] }),
|
|
6262
6426
|
steps.map((s, i) => {
|
|
6263
6427
|
const st = RUN_STATUS[s.status] || RUN_STATUS.completed;
|
|
6264
6428
|
const id = s.id != null ? s.id : i;
|
|
6265
6429
|
const sel = selected != null && selected === id;
|
|
6266
6430
|
const left = (s.start || 0) / total * 100, width = Math.max(0.6, (s.duration || 0) / total * 100);
|
|
6267
|
-
return /* @__PURE__ */
|
|
6268
|
-
/* @__PURE__ */
|
|
6269
|
-
/* @__PURE__ */
|
|
6270
|
-
/* @__PURE__ */
|
|
6271
|
-
/* @__PURE__ */
|
|
6272
|
-
s.kind && /* @__PURE__ */
|
|
6431
|
+
return /* @__PURE__ */ jsxs104(Row, { type: onSelect ? "button" : void 0, role: "row", className: cx("agn-rt__row", cols, "agn-rt__row--" + st.tone, sel && "agn-rt__row--selected", "agn-focus-inset"), "aria-pressed": onSelect ? sel : void 0, onClick: onSelect ? () => onSelect(id, s) : void 0, children: [
|
|
6432
|
+
/* @__PURE__ */ jsxs104("span", { role: "cell", className: "agn-rt__name", children: [
|
|
6433
|
+
/* @__PURE__ */ jsx112("span", { className: "agn-rt__n agn-num", children: String(i + 1).padStart(2, "0") }),
|
|
6434
|
+
/* @__PURE__ */ jsxs104("span", { className: "agn-rt__label", children: [
|
|
6435
|
+
/* @__PURE__ */ jsx112("span", { className: "agn-rt__title", children: s.name }),
|
|
6436
|
+
s.kind && /* @__PURE__ */ jsx112("span", { className: "agn-rt__kind", children: s.kind })
|
|
6273
6437
|
] }),
|
|
6274
|
-
/* @__PURE__ */
|
|
6438
|
+
/* @__PURE__ */ jsx112(Icon, { name: st.icon, size: 12, className: cx("agn-rt__icon", st.spin && "agn-rt__spin"), title: st.label })
|
|
6275
6439
|
] }),
|
|
6276
|
-
/* @__PURE__ */
|
|
6277
|
-
showTokens && /* @__PURE__ */
|
|
6278
|
-
showCost && /* @__PURE__ */
|
|
6440
|
+
/* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__track", children: /* @__PURE__ */ jsx112("span", { className: "agn-rt__bar", style: { left: left + "%", width: width + "%" }, children: /* @__PURE__ */ jsx112("span", { className: "agn-rt__dur agn-num", children: formatDuration(s.duration || 0, locale) }) }) }),
|
|
6441
|
+
showTokens && /* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__num", children: s.tokens != null ? fmtInt(s.tokens, locale) : "\u2013" }),
|
|
6442
|
+
showCost && /* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__num", children: s.cost != null ? fmtMoney(s.cost, locale, currency) : "\u2013" })
|
|
6279
6443
|
] }, id);
|
|
6280
6444
|
}),
|
|
6281
|
-
/* @__PURE__ */
|
|
6282
|
-
/* @__PURE__ */
|
|
6283
|
-
/* @__PURE__ */
|
|
6284
|
-
showTokens && /* @__PURE__ */
|
|
6285
|
-
showCost && /* @__PURE__ */
|
|
6445
|
+
/* @__PURE__ */ jsxs104("div", { className: cx("agn-rt__foot", cols), role: "row", children: [
|
|
6446
|
+
/* @__PURE__ */ jsx112("span", { role: "cell", children: L.total }),
|
|
6447
|
+
/* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__total agn-num", children: formatDuration(total, locale) }),
|
|
6448
|
+
showTokens && /* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__num", children: fmtInt(sumTok, locale) }),
|
|
6449
|
+
showCost && /* @__PURE__ */ jsx112("span", { role: "cell", className: "agn-rt__num", children: fmtMoney(sumCost, locale, currency) })
|
|
6286
6450
|
] })
|
|
6287
6451
|
] });
|
|
6288
6452
|
}
|
|
6289
6453
|
|
|
6290
6454
|
// src/widgets/TraceSpans.jsx
|
|
6291
|
-
import
|
|
6292
|
-
import { jsx as
|
|
6455
|
+
import React115 from "react";
|
|
6456
|
+
import { jsx as jsx113, jsxs as jsxs105 } from "react/jsx-runtime";
|
|
6293
6457
|
var SPAN_KINDS = ["llm", "tool", "http", "workflow", "db", "other"];
|
|
6294
6458
|
function flatten3(spans, depth = 0, out = [], collapsed) {
|
|
6295
6459
|
spans.forEach((s, i) => {
|
|
@@ -6301,9 +6465,9 @@ function flatten3(spans, depth = 0, out = [], collapsed) {
|
|
|
6301
6465
|
}
|
|
6302
6466
|
function TraceSpans({ spans = [], total: totalProp, selected, onSelect, locale = "tr-TR", labels, className, ...rest }) {
|
|
6303
6467
|
const L = { spans: "Spans", collapse: "Collapse", expand: "Expand", error: "error", ...labels };
|
|
6304
|
-
const [collapsed, setCollapsed] =
|
|
6305
|
-
const rows =
|
|
6306
|
-
const all =
|
|
6468
|
+
const [collapsed, setCollapsed] = React115.useState(() => /* @__PURE__ */ new Set());
|
|
6469
|
+
const rows = React115.useMemo(() => flatten3(spans, 0, [], collapsed), [spans, collapsed]);
|
|
6470
|
+
const all = React115.useMemo(() => flatten3(spans, 0, [], /* @__PURE__ */ new Set()), [spans]);
|
|
6307
6471
|
const total = totalProp || Math.max(1, ...all.map((s) => (s.start || 0) + (s.duration || 0)));
|
|
6308
6472
|
const toggle = (id) => setCollapsed((c) => {
|
|
6309
6473
|
const n = new Set(c);
|
|
@@ -6311,8 +6475,8 @@ function TraceSpans({ spans = [], total: totalProp, selected, onSelect, locale =
|
|
|
6311
6475
|
return n;
|
|
6312
6476
|
});
|
|
6313
6477
|
const Row = onSelect ? "button" : "div";
|
|
6314
|
-
const treeRef =
|
|
6315
|
-
const [focusId, setFocusId] =
|
|
6478
|
+
const treeRef = React115.useRef(null);
|
|
6479
|
+
const [focusId, setFocusId] = React115.useState(null);
|
|
6316
6480
|
const focusIdx = Math.max(0, rows.findIndex((r) => r.id === (focusId != null ? focusId : selected)));
|
|
6317
6481
|
const focusAt = (i) => {
|
|
6318
6482
|
const n = Math.max(0, Math.min(rows.length - 1, i));
|
|
@@ -6361,88 +6525,88 @@ function TraceSpans({ spans = [], total: totalProp, selected, onSelect, locale =
|
|
|
6361
6525
|
default:
|
|
6362
6526
|
}
|
|
6363
6527
|
};
|
|
6364
|
-
return /* @__PURE__ */
|
|
6365
|
-
/* @__PURE__ */
|
|
6528
|
+
return /* @__PURE__ */ jsxs105("div", { ref: treeRef, className: cx("agn-spans", className), role: "tree", "aria-label": L.spans, ...rest, children: [
|
|
6529
|
+
/* @__PURE__ */ jsx113("div", { className: "agn-spans__scale", "aria-hidden": "true", children: [0, 0.25, 0.5, 0.75, 1].map((f) => /* @__PURE__ */ jsx113("span", { className: "agn-spans__tick agn-num", style: { left: f * 100 + "%" }, children: formatDuration(total * f, locale) }, f)) }),
|
|
6366
6530
|
rows.map((s, i) => {
|
|
6367
6531
|
const sel = selected != null && selected === s.id;
|
|
6368
6532
|
const kind = SPAN_KINDS.includes(s.kind) ? s.kind : "other";
|
|
6369
6533
|
const left = (s.start || 0) / total * 100, width = Math.max(0.5, (s.duration || 0) / total * 100);
|
|
6370
|
-
return /* @__PURE__ */
|
|
6371
|
-
/* @__PURE__ */
|
|
6372
|
-
s.hasChildren ? /* @__PURE__ */
|
|
6373
|
-
/* @__PURE__ */
|
|
6374
|
-
/* @__PURE__ */
|
|
6375
|
-
s.service && /* @__PURE__ */
|
|
6376
|
-
s.status === "bad" && /* @__PURE__ */
|
|
6377
|
-
/* @__PURE__ */
|
|
6534
|
+
return /* @__PURE__ */ jsxs105("div", { role: "treeitem", "aria-level": s.depth + 1, "aria-expanded": s.hasChildren ? !collapsed.has(s.id) : void 0, "aria-selected": onSelect ? sel : void 0, "data-index": i, tabIndex: i === focusIdx ? 0 : -1, onKeyDown: (e) => onKey(e, s, i), onFocus: () => setFocusId(s.id), className: cx("agn-spans__row", "agn-focus-inset", "agn-spans__row--" + kind, s.status === "bad" && "agn-spans__row--bad", sel && "agn-spans__row--selected"), children: [
|
|
6535
|
+
/* @__PURE__ */ jsxs105("span", { className: "agn-spans__name", style: { paddingLeft: s.depth * 16 }, children: [
|
|
6536
|
+
s.hasChildren ? /* @__PURE__ */ jsx113("button", { type: "button", className: "agn-spans__caret", tabIndex: -1, "aria-label": collapsed.has(s.id) ? L.expand : L.collapse, onClick: () => toggle(s.id), children: /* @__PURE__ */ jsx113(Icon, { name: "chevron-right", size: 12, className: cx(!collapsed.has(s.id) && "agn-spans__caret--open") }) }) : /* @__PURE__ */ jsx113("span", { className: "agn-spans__caret agn-spans__caret--leaf" }),
|
|
6537
|
+
/* @__PURE__ */ jsxs105(Row, { type: onSelect ? "button" : void 0, tabIndex: onSelect ? -1 : void 0, className: "agn-spans__label", onClick: onSelect ? () => onSelect(s.id, s) : void 0, children: [
|
|
6538
|
+
/* @__PURE__ */ jsx113("span", { className: "agn-spans__title", children: s.name }),
|
|
6539
|
+
s.service && /* @__PURE__ */ jsx113("span", { className: "agn-spans__service", children: s.service }),
|
|
6540
|
+
s.status === "bad" && /* @__PURE__ */ jsxs105("span", { className: "agn-spans__err", children: [
|
|
6541
|
+
/* @__PURE__ */ jsx113(Icon, { name: "circle-x", size: 11 }),
|
|
6378
6542
|
L.error
|
|
6379
6543
|
] })
|
|
6380
6544
|
] })
|
|
6381
6545
|
] }),
|
|
6382
|
-
/* @__PURE__ */
|
|
6383
|
-
/* @__PURE__ */
|
|
6546
|
+
/* @__PURE__ */ jsx113("span", { className: "agn-spans__track", children: /* @__PURE__ */ jsx113("span", { className: "agn-spans__bar", style: { left: left + "%", width: width + "%" } }) }),
|
|
6547
|
+
/* @__PURE__ */ jsx113("span", { className: "agn-spans__dur agn-num", children: formatDuration(s.duration || 0, locale) })
|
|
6384
6548
|
] }, s.id);
|
|
6385
6549
|
})
|
|
6386
6550
|
] });
|
|
6387
6551
|
}
|
|
6388
6552
|
|
|
6389
6553
|
// src/widgets/AgentRunCard.jsx
|
|
6390
|
-
import
|
|
6391
|
-
import { jsx as
|
|
6554
|
+
import React116 from "react";
|
|
6555
|
+
import { jsx as jsx114, jsxs as jsxs106 } from "react/jsx-runtime";
|
|
6392
6556
|
var TRIGGER = { manual: { icon: "play", label: "Manual" }, webhook: { icon: "webhook", label: "Webhook" }, schedule: { icon: "calendar-clock", label: "Schedule" }, call: { icon: "phone", label: "Phone call" }, chat: { icon: "message-square", label: "Chat" }, api: { icon: "code", label: "API" } };
|
|
6393
6557
|
var BAR_TONE = { running: "signal", completed: "ok", failed: "bad", paused: "warn", cancelled: "neutral", queued: "neutral" };
|
|
6394
6558
|
function AgentRunCard({ agent, product = "platform", runId, tenant, trigger = "manual", status = "queued", since, started, duration, steps, cost, tokens, selected, onStop, onRetry, onOpen, locale = "tr-TR", currency = "TRY", labels, className, ...rest }) {
|
|
6395
6559
|
const L = { stop: "Stop", retry: "Retry", open: "Open", duration: "Duration", steps: "Steps", cost: "Cost", tokens: "Tokens", started: "Started", ...Object.fromEntries(Object.entries(TRIGGER).map(([k, v]) => [k, v.label])), ...labels };
|
|
6396
6560
|
const t = TRIGGER[trigger] || TRIGGER.manual;
|
|
6397
|
-
return /* @__PURE__ */
|
|
6398
|
-
/* @__PURE__ */
|
|
6399
|
-
/* @__PURE__ */
|
|
6400
|
-
/* @__PURE__ */
|
|
6401
|
-
/* @__PURE__ */
|
|
6402
|
-
runId && /* @__PURE__ */
|
|
6561
|
+
return /* @__PURE__ */ jsxs106("article", { className: cx("agn-run-card", "agn-run-card--" + status, selected && "agn-run-card--selected", className), ...rest, children: [
|
|
6562
|
+
/* @__PURE__ */ jsxs106("header", { className: "agn-run-card__head", children: [
|
|
6563
|
+
/* @__PURE__ */ jsx114("span", { className: "agn-run-card__icon", children: /* @__PURE__ */ jsx114(ProductIcon, { product, size: 16 }) }),
|
|
6564
|
+
/* @__PURE__ */ jsxs106("div", { className: "agn-run-card__heading", children: [
|
|
6565
|
+
/* @__PURE__ */ jsx114("h3", { className: "agn-run-card__title", children: agent }),
|
|
6566
|
+
runId && /* @__PURE__ */ jsx114("span", { className: "agn-run-card__id", children: runId })
|
|
6403
6567
|
] }),
|
|
6404
|
-
/* @__PURE__ */
|
|
6568
|
+
/* @__PURE__ */ jsx114(RunStatus, { status, since, size: "sm" })
|
|
6405
6569
|
] }),
|
|
6406
|
-
/* @__PURE__ */
|
|
6407
|
-
/* @__PURE__ */
|
|
6408
|
-
/* @__PURE__ */
|
|
6570
|
+
/* @__PURE__ */ jsxs106("div", { className: "agn-run-card__meta", children: [
|
|
6571
|
+
/* @__PURE__ */ jsxs106("span", { children: [
|
|
6572
|
+
/* @__PURE__ */ jsx114(Icon, { name: t.icon, size: 12 }),
|
|
6409
6573
|
L[trigger] || t.label
|
|
6410
6574
|
] }),
|
|
6411
|
-
started && /* @__PURE__ */
|
|
6412
|
-
/* @__PURE__ */
|
|
6575
|
+
started && /* @__PURE__ */ jsxs106("span", { children: [
|
|
6576
|
+
/* @__PURE__ */ jsx114(Icon, { name: "clock", size: 12 }),
|
|
6413
6577
|
started
|
|
6414
6578
|
] }),
|
|
6415
|
-
tenant && /* @__PURE__ */
|
|
6416
|
-
/* @__PURE__ */
|
|
6579
|
+
tenant && /* @__PURE__ */ jsxs106("span", { children: [
|
|
6580
|
+
/* @__PURE__ */ jsx114(Icon, { name: "building-2", size: 12 }),
|
|
6417
6581
|
tenant
|
|
6418
6582
|
] })
|
|
6419
6583
|
] }),
|
|
6420
|
-
steps && steps.total > 0 && /* @__PURE__ */
|
|
6421
|
-
/* @__PURE__ */
|
|
6422
|
-
duration != null && /* @__PURE__ */
|
|
6423
|
-
/* @__PURE__ */
|
|
6424
|
-
/* @__PURE__ */
|
|
6584
|
+
steps && steps.total > 0 && /* @__PURE__ */ jsx114(ProgressBar, { size: "sm", tone: BAR_TONE[status] || "neutral", value: steps.done || 0, max: steps.total, label: L.steps, showValue: true, valueText: `${steps.done || 0} / ${steps.total}` }),
|
|
6585
|
+
/* @__PURE__ */ jsxs106("dl", { className: "agn-run-card__stats", children: [
|
|
6586
|
+
duration != null && /* @__PURE__ */ jsxs106("div", { children: [
|
|
6587
|
+
/* @__PURE__ */ jsx114("dt", { children: L.duration }),
|
|
6588
|
+
/* @__PURE__ */ jsx114("dd", { className: "agn-num", children: typeof duration === "number" ? formatDuration(duration, locale) : duration })
|
|
6425
6589
|
] }),
|
|
6426
|
-
cost != null && /* @__PURE__ */
|
|
6427
|
-
/* @__PURE__ */
|
|
6428
|
-
/* @__PURE__ */
|
|
6590
|
+
cost != null && /* @__PURE__ */ jsxs106("div", { children: [
|
|
6591
|
+
/* @__PURE__ */ jsx114("dt", { children: L.cost }),
|
|
6592
|
+
/* @__PURE__ */ jsx114("dd", { className: "agn-num", children: fmtMoney(cost, locale, currency) })
|
|
6429
6593
|
] }),
|
|
6430
|
-
tokens != null && /* @__PURE__ */
|
|
6431
|
-
/* @__PURE__ */
|
|
6432
|
-
/* @__PURE__ */
|
|
6594
|
+
tokens != null && /* @__PURE__ */ jsxs106("div", { children: [
|
|
6595
|
+
/* @__PURE__ */ jsx114("dt", { children: L.tokens }),
|
|
6596
|
+
/* @__PURE__ */ jsx114("dd", { className: "agn-num", children: fmtInt(tokens, locale) })
|
|
6433
6597
|
] })
|
|
6434
6598
|
] }),
|
|
6435
|
-
(onStop || onRetry || onOpen) && /* @__PURE__ */
|
|
6436
|
-
onStop && (status === "running" || status === "paused" || status === "queued") && /* @__PURE__ */
|
|
6437
|
-
onRetry && (status === "failed" || status === "cancelled") && /* @__PURE__ */
|
|
6438
|
-
onOpen && /* @__PURE__ */
|
|
6599
|
+
(onStop || onRetry || onOpen) && /* @__PURE__ */ jsxs106("footer", { className: "agn-run-card__foot", children: [
|
|
6600
|
+
onStop && (status === "running" || status === "paused" || status === "queued") && /* @__PURE__ */ jsx114(Button, { size: "sm", variant: "destructive-text", icon: "square", onClick: onStop, children: L.stop }),
|
|
6601
|
+
onRetry && (status === "failed" || status === "cancelled") && /* @__PURE__ */ jsx114(Button, { size: "sm", icon: "rotate-ccw", onClick: onRetry, children: L.retry }),
|
|
6602
|
+
onOpen && /* @__PURE__ */ jsx114(Button, { size: "sm", variant: "ghost", iconRight: "arrow-right", onClick: onOpen, className: "agn-run-card__open", children: L.open })
|
|
6439
6603
|
] })
|
|
6440
6604
|
] });
|
|
6441
6605
|
}
|
|
6442
6606
|
|
|
6443
6607
|
// src/widgets/CostBars.jsx
|
|
6444
|
-
import
|
|
6445
|
-
import { jsx as
|
|
6608
|
+
import React117 from "react";
|
|
6609
|
+
import { jsx as jsx115, jsxs as jsxs107 } from "react/jsx-runtime";
|
|
6446
6610
|
function CostBars({ items = [], unit = "currency", currency = "TRY", locale = "tr-TR", max: maxProp, showValues = true, showTokens = false, colorBy = "index", sort, labels, className, ...rest }) {
|
|
6447
6611
|
const L = { costs: "Costs", tokens: "tokens", ...labels };
|
|
6448
6612
|
const list = sort === "desc" ? [...items].sort((a, b) => (b.value || 0) - (a.value || 0)) : items;
|
|
@@ -6451,15 +6615,15 @@ function CostBars({ items = [], unit = "currency", currency = "TRY", locale = "t
|
|
|
6451
6615
|
return (
|
|
6452
6616
|
// biome-ignore lint/a11y/noRedundantRoles: explicit role=list keeps list semantics in Safari/VoiceOver, which drops them for list-style: none
|
|
6453
6617
|
// biome-ignore lint/a11y/useSemanticElements: explicit role=list keeps list semantics in Safari/VoiceOver, which drops them for list-style: none
|
|
6454
|
-
/* @__PURE__ */
|
|
6455
|
-
/* @__PURE__ */
|
|
6618
|
+
/* @__PURE__ */ jsx115("ul", { className: cx("agn-costbars", className), role: "list", "aria-label": L.costs, ...rest, children: list.map((it, i) => /* @__PURE__ */ jsxs107("li", { className: cx("agn-costbars__row", it.tone && "agn-costbars__row--" + it.tone), children: [
|
|
6619
|
+
/* @__PURE__ */ jsxs107("span", { className: "agn-costbars__label", title: typeof it.label === "string" ? it.label : void 0, children: [
|
|
6456
6620
|
it.label,
|
|
6457
|
-
it.sub && /* @__PURE__ */
|
|
6621
|
+
it.sub && /* @__PURE__ */ jsx115("span", { className: "agn-costbars__sub", children: it.sub })
|
|
6458
6622
|
] }),
|
|
6459
|
-
/* @__PURE__ */
|
|
6460
|
-
showValues && /* @__PURE__ */
|
|
6623
|
+
/* @__PURE__ */ jsx115("span", { className: "agn-costbars__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx115("span", { className: cx("agn-costbars__fill", colorBy === "index" && "agn-costbars__fill--" + (i % 6 + 1)), style: { width: Math.min(100, (it.value || 0) / max * 100) + "%" } }) }),
|
|
6624
|
+
showValues && /* @__PURE__ */ jsxs107("span", { className: "agn-costbars__value agn-num", children: [
|
|
6461
6625
|
fmt(it.value || 0),
|
|
6462
|
-
showTokens && it.tokens != null && /* @__PURE__ */
|
|
6626
|
+
showTokens && it.tokens != null && /* @__PURE__ */ jsxs107("span", { className: "agn-costbars__tokens", children: [
|
|
6463
6627
|
fmtInt(it.tokens, locale),
|
|
6464
6628
|
" ",
|
|
6465
6629
|
L.tokens
|
|
@@ -6470,8 +6634,8 @@ function CostBars({ items = [], unit = "currency", currency = "TRY", locale = "t
|
|
|
6470
6634
|
}
|
|
6471
6635
|
|
|
6472
6636
|
// src/widgets/CanvasBlock.jsx
|
|
6473
|
-
import
|
|
6474
|
-
import { jsx as
|
|
6637
|
+
import React118 from "react";
|
|
6638
|
+
import { jsx as jsx116, jsxs as jsxs108 } from "react/jsx-runtime";
|
|
6475
6639
|
var SIDES = ["top", "right", "bottom", "left"];
|
|
6476
6640
|
var portSide = (v, dflt) => v === true ? dflt : SIDES.includes(v) ? v : null;
|
|
6477
6641
|
var STATE_ICON = { running: ["loader-circle", true], error: ["circle-alert"], done: ["circle-check"], waiting: ["circle-dashed"], disabled: ["eye-off"] };
|
|
@@ -6480,33 +6644,33 @@ function CanvasBlock({ name, kind, icon = "box", product, rows = [], state = "de
|
|
|
6480
6644
|
const Tag2 = onSelect ? "button" : "div";
|
|
6481
6645
|
const inSide = ports && portSide(ports.in, "left"), outSide = ports && portSide(ports.out, "right");
|
|
6482
6646
|
const si = STATE_ICON[state];
|
|
6483
|
-
return /* @__PURE__ */
|
|
6484
|
-
actions.length > 0 && /* @__PURE__ */
|
|
6647
|
+
return /* @__PURE__ */ jsxs108(Tag2, { type: onSelect ? "button" : void 0, className: cx("agn-block", "agn-block--" + state, className), style: { width: 250, ...style }, "aria-pressed": onSelect ? state === "selected" : void 0, onClick: onSelect, ...rest, children: [
|
|
6648
|
+
actions.length > 0 && /* @__PURE__ */ jsx116("span", { className: "agn-block__bar", role: "toolbar", children: actions.map((a, i) => /* @__PURE__ */ jsx116(ButtonIcon, { icon: a.icon, label: a.label, size: "xs", variant: a.variant || "ghost", onClick: (e) => {
|
|
6485
6649
|
e.stopPropagation();
|
|
6486
6650
|
a.onClick && a.onClick(e);
|
|
6487
6651
|
} }, i)) }),
|
|
6488
|
-
/* @__PURE__ */
|
|
6489
|
-
/* @__PURE__ */
|
|
6490
|
-
/* @__PURE__ */
|
|
6491
|
-
/* @__PURE__ */
|
|
6492
|
-
kind && /* @__PURE__ */
|
|
6652
|
+
/* @__PURE__ */ jsxs108("span", { className: "agn-block__head", children: [
|
|
6653
|
+
/* @__PURE__ */ jsx116("span", { className: "agn-block__icon", children: product ? /* @__PURE__ */ jsx116(ProductIcon, { product, size: 16 }) : /* @__PURE__ */ jsx116(Icon, { name: icon, size: 16 }) }),
|
|
6654
|
+
/* @__PURE__ */ jsxs108("span", { className: "agn-block__heading", children: [
|
|
6655
|
+
/* @__PURE__ */ jsx116("span", { className: "agn-block__name", title: typeof name === "string" ? name : void 0, children: name }),
|
|
6656
|
+
kind && /* @__PURE__ */ jsx116("span", { className: "agn-block__kind", children: kind })
|
|
6493
6657
|
] }),
|
|
6494
|
-
si && /* @__PURE__ */
|
|
6495
|
-
/* @__PURE__ */
|
|
6496
|
-
/* @__PURE__ */
|
|
6658
|
+
si && /* @__PURE__ */ jsxs108("span", { className: "agn-block__state", children: [
|
|
6659
|
+
/* @__PURE__ */ jsx116(Icon, { name: si[0], size: 14, className: si[1] ? "agn-block__spin" : void 0, title: L[state] }),
|
|
6660
|
+
/* @__PURE__ */ jsx116("span", { className: "agn-sr", children: L[state] })
|
|
6497
6661
|
] })
|
|
6498
6662
|
] }),
|
|
6499
|
-
rows.length > 0 && /* @__PURE__ */
|
|
6500
|
-
/* @__PURE__ */
|
|
6501
|
-
/* @__PURE__ */
|
|
6663
|
+
rows.length > 0 && /* @__PURE__ */ jsx116("span", { className: "agn-block__rows", children: rows.map((r, i) => /* @__PURE__ */ jsxs108("span", { className: "agn-block__row", children: [
|
|
6664
|
+
/* @__PURE__ */ jsx116("span", { className: "agn-block__k", children: r.label }),
|
|
6665
|
+
/* @__PURE__ */ jsx116("span", { className: cx("agn-block__v", r.mono !== false && "agn-mono"), children: r.value })
|
|
6502
6666
|
] }, i)) }),
|
|
6503
|
-
next && /* @__PURE__ */
|
|
6504
|
-
/* @__PURE__ */
|
|
6505
|
-
/* @__PURE__ */
|
|
6667
|
+
next && /* @__PURE__ */ jsxs108("span", { className: "agn-block__next", children: [
|
|
6668
|
+
/* @__PURE__ */ jsx116(Icon, { name: "corner-down-right", size: 12 }),
|
|
6669
|
+
/* @__PURE__ */ jsx116("span", { className: "agn-block__next-label", children: L.next }),
|
|
6506
6670
|
next
|
|
6507
6671
|
] }),
|
|
6508
|
-
inSide && /* @__PURE__ */
|
|
6509
|
-
outSide && /* @__PURE__ */
|
|
6672
|
+
inSide && /* @__PURE__ */ jsx116("span", { className: cx("agn-block__port", "agn-block__port--in", "agn-block__port--" + inSide), "aria-hidden": "true" }),
|
|
6673
|
+
outSide && /* @__PURE__ */ jsx116("span", { className: cx("agn-block__port", "agn-block__port--out", "agn-block__port--" + outSide), "aria-hidden": "true" })
|
|
6510
6674
|
] });
|
|
6511
6675
|
}
|
|
6512
6676
|
var horiz = (s) => s === "left" || s === "right";
|
|
@@ -6536,31 +6700,31 @@ function CanvasEdge({ from, to, fromSide = "right", toSide = "left", state = "de
|
|
|
6536
6700
|
const ah = `M${to.x - ux * 6 - uy * 4},${to.y - uy * 6 - ux * 4} L${to.x},${to.y} L${to.x - ux * 6 + uy * 4},${to.y - uy * 6 + ux * 4}`;
|
|
6537
6701
|
return (
|
|
6538
6702
|
// biome-ignore lint/a11y/noStaticElementInteractions: role=button, tabIndex and the Enter/Space handler are all set whenever onClick is; the rule cannot see the conditional role
|
|
6539
|
-
/* @__PURE__ */
|
|
6703
|
+
/* @__PURE__ */ jsxs108("g", { className: cx("agn-edge", "agn-edge--" + state, onClick && "agn-edge--clickable", className), role: onClick ? "button" : void 0, tabIndex: onClick ? 0 : void 0, "aria-label": onClick && label != null ? String(label) : void 0, onClick, onKeyDown: onClick ? (e) => {
|
|
6540
6704
|
if (e.key === "Enter" || e.key === " ") {
|
|
6541
6705
|
e.preventDefault();
|
|
6542
6706
|
onClick(e);
|
|
6543
6707
|
}
|
|
6544
6708
|
} : void 0, ...rest, children: [
|
|
6545
|
-
/* @__PURE__ */
|
|
6546
|
-
/* @__PURE__ */
|
|
6547
|
-
arrow && /* @__PURE__ */
|
|
6548
|
-
label && /* @__PURE__ */
|
|
6549
|
-
/* @__PURE__ */
|
|
6550
|
-
/* @__PURE__ */
|
|
6709
|
+
/* @__PURE__ */ jsx116("path", { className: "agn-edge__hit", d }),
|
|
6710
|
+
/* @__PURE__ */ jsx116("path", { className: "agn-edge__path", d }),
|
|
6711
|
+
arrow && /* @__PURE__ */ jsx116("path", { className: "agn-edge__arrow", d: ah }),
|
|
6712
|
+
label && /* @__PURE__ */ jsxs108("g", { className: "agn-edge__label", transform: `translate(${mx},${my})`, children: [
|
|
6713
|
+
/* @__PURE__ */ jsx116("rect", { x: -String(label).length * 3.4 - 6, y: -9, width: String(label).length * 6.8 + 12, height: 18, rx: 4 }),
|
|
6714
|
+
/* @__PURE__ */ jsx116("text", { textAnchor: "middle", dominantBaseline: "central", children: label })
|
|
6551
6715
|
] })
|
|
6552
6716
|
] })
|
|
6553
6717
|
);
|
|
6554
6718
|
}
|
|
6555
6719
|
|
|
6556
6720
|
// src/widgets/Canvas.jsx
|
|
6557
|
-
import
|
|
6558
|
-
import { jsx as
|
|
6721
|
+
import React119 from "react";
|
|
6722
|
+
import { jsx as jsx117, jsxs as jsxs109 } from "react/jsx-runtime";
|
|
6559
6723
|
var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
|
|
6560
6724
|
function Canvas({ children, edges, zoom: zoomProp, defaultZoom = 1, onZoomChange, pan: panProp, defaultPan = { x: 0, y: 0 }, onPanChange, minZoom = 0.25, maxZoom = 2, grid = true, controls = true, interactive = true, overlay, labels, className, style, ...rest }) {
|
|
6561
6725
|
const L = { canvas: "Agent canvas", zoomIn: "Zoom in", zoomOut: "Zoom out", reset: "Reset view", ...labels };
|
|
6562
|
-
const [zLocal, setZLocal] =
|
|
6563
|
-
const [pLocal, setPLocal] =
|
|
6726
|
+
const [zLocal, setZLocal] = React119.useState(defaultZoom);
|
|
6727
|
+
const [pLocal, setPLocal] = React119.useState(defaultPan);
|
|
6564
6728
|
const z = zoomProp != null ? zoomProp : zLocal;
|
|
6565
6729
|
const p = panProp || pLocal;
|
|
6566
6730
|
const setZ = (v) => {
|
|
@@ -6572,7 +6736,7 @@ function Canvas({ children, edges, zoom: zoomProp, defaultZoom = 1, onZoomChange
|
|
|
6572
6736
|
if (!panProp) setPLocal(v);
|
|
6573
6737
|
onPanChange && onPanChange(v);
|
|
6574
6738
|
};
|
|
6575
|
-
const drag =
|
|
6739
|
+
const drag = React119.useRef(null);
|
|
6576
6740
|
const onPointerDown = (e) => {
|
|
6577
6741
|
if (!interactive || e.button !== 0) return;
|
|
6578
6742
|
if (e.target.closest(".agn-block, button, a, input, textarea, select, .agn-edge--clickable, .agn-canvas__controls")) return;
|
|
@@ -6614,41 +6778,41 @@ function Canvas({ children, edges, zoom: zoomProp, defaultZoom = 1, onZoomChange
|
|
|
6614
6778
|
};
|
|
6615
6779
|
const gs = 20 * z;
|
|
6616
6780
|
const bg = grid ? { backgroundSize: gs + "px " + gs + "px", backgroundPosition: p.x + "px " + p.y + "px" } : null;
|
|
6617
|
-
return /* @__PURE__ */
|
|
6618
|
-
/* @__PURE__ */
|
|
6619
|
-
edges && /* @__PURE__ */
|
|
6781
|
+
return /* @__PURE__ */ jsxs109("div", { className: cx("agn-canvas", grid && "agn-canvas--grid", interactive && "agn-canvas--interactive", className), style: { ...bg, ...style }, role: "application", "aria-roledescription": "canvas", "aria-label": L.canvas, tabIndex: interactive ? 0 : void 0, onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp, onWheel, onKeyDown, ...rest, children: [
|
|
6782
|
+
/* @__PURE__ */ jsxs109("div", { className: "agn-canvas__layer", style: { transform: `translate(${p.x}px, ${p.y}px) scale(${z})` }, children: [
|
|
6783
|
+
edges && /* @__PURE__ */ jsx117("svg", { className: "agn-canvas__edges", "aria-hidden": "true", children: edges }),
|
|
6620
6784
|
children
|
|
6621
6785
|
] }),
|
|
6622
6786
|
overlay,
|
|
6623
|
-
controls && /* @__PURE__ */
|
|
6624
|
-
/* @__PURE__ */
|
|
6625
|
-
/* @__PURE__ */
|
|
6787
|
+
controls && /* @__PURE__ */ jsxs109("div", { className: "agn-canvas__controls", role: "toolbar", "aria-label": L.canvas, children: [
|
|
6788
|
+
/* @__PURE__ */ jsx117(ButtonIcon, { icon: "minus", label: L.zoomOut, size: "sm", variant: "ghost", onClick: () => setZ(z / 1.2), disabled: z <= minZoom }),
|
|
6789
|
+
/* @__PURE__ */ jsxs109("button", { type: "button", className: "agn-canvas__zoom agn-num agn-focus", onClick: () => {
|
|
6626
6790
|
setZ(1);
|
|
6627
6791
|
setP({ x: 0, y: 0 });
|
|
6628
6792
|
}, title: L.reset, "aria-label": L.reset + " (" + Math.round(z * 100) + "%)", children: [
|
|
6629
6793
|
Math.round(z * 100),
|
|
6630
6794
|
"%"
|
|
6631
6795
|
] }),
|
|
6632
|
-
/* @__PURE__ */
|
|
6796
|
+
/* @__PURE__ */ jsx117(ButtonIcon, { icon: "plus", label: L.zoomIn, size: "sm", variant: "ghost", onClick: () => setZ(z * 1.2), disabled: z >= maxZoom })
|
|
6633
6797
|
] })
|
|
6634
6798
|
] });
|
|
6635
6799
|
}
|
|
6636
6800
|
|
|
6637
6801
|
// src/widgets/CanvasNote.jsx
|
|
6638
|
-
import
|
|
6639
|
-
import { jsx as
|
|
6802
|
+
import React120 from "react";
|
|
6803
|
+
import { jsx as jsx118, jsxs as jsxs110 } from "react/jsx-runtime";
|
|
6640
6804
|
function CanvasNote({ title, children, author, time, tone = "warn", width = 220, onEdit, onDelete, labels, className, style, ...rest }) {
|
|
6641
6805
|
const L = { edit: "Edit note", delete: "Delete note", ...labels };
|
|
6642
|
-
return /* @__PURE__ */
|
|
6643
|
-
(title || onEdit || onDelete) && /* @__PURE__ */
|
|
6644
|
-
title && /* @__PURE__ */
|
|
6645
|
-
/* @__PURE__ */
|
|
6646
|
-
onEdit && /* @__PURE__ */
|
|
6647
|
-
onDelete && /* @__PURE__ */
|
|
6806
|
+
return /* @__PURE__ */ jsxs110("div", { className: cx("agn-note", "agn-note--" + tone, className), style: { width, ...style }, ...rest, children: [
|
|
6807
|
+
(title || onEdit || onDelete) && /* @__PURE__ */ jsxs110("div", { className: "agn-note__head", children: [
|
|
6808
|
+
title && /* @__PURE__ */ jsx118("span", { className: "agn-note__title", children: title }),
|
|
6809
|
+
/* @__PURE__ */ jsxs110("span", { className: "agn-note__ctl", children: [
|
|
6810
|
+
onEdit && /* @__PURE__ */ jsx118(ButtonIcon, { icon: "pencil", label: L.edit, size: "xs", onClick: onEdit }),
|
|
6811
|
+
onDelete && /* @__PURE__ */ jsx118(ButtonIcon, { icon: "x", label: L.delete, size: "xs", onClick: onDelete })
|
|
6648
6812
|
] })
|
|
6649
6813
|
] }),
|
|
6650
|
-
/* @__PURE__ */
|
|
6651
|
-
(author || time) && /* @__PURE__ */
|
|
6814
|
+
/* @__PURE__ */ jsx118("div", { className: "agn-note__body", children }),
|
|
6815
|
+
(author || time) && /* @__PURE__ */ jsxs110("div", { className: "agn-note__foot", children: [
|
|
6652
6816
|
author,
|
|
6653
6817
|
author && time && " \xB7 ",
|
|
6654
6818
|
time
|
|
@@ -6657,8 +6821,8 @@ function CanvasNote({ title, children, author, time, tone = "warn", width = 220,
|
|
|
6657
6821
|
}
|
|
6658
6822
|
|
|
6659
6823
|
// src/widgets/QueueCard.jsx
|
|
6660
|
-
import
|
|
6661
|
-
import { jsx as
|
|
6824
|
+
import React121 from "react";
|
|
6825
|
+
import { jsx as jsx119, jsxs as jsxs111 } from "react/jsx-runtime";
|
|
6662
6826
|
var CHANNEL = { whatsapp: { icon: "message-circle", label: "WhatsApp" }, voice: { icon: "phone", label: "Voice" }, web: { icon: "globe", label: "Web chat" }, email: { icon: "mail", label: "E-mail" } };
|
|
6663
6827
|
var OWNER = { bot: { icon: "bot", label: "Bot" }, agent: { icon: null, label: "Agent" }, queue: { icon: "users", label: "Queue" } };
|
|
6664
6828
|
function QueueCard({ channel = "whatsapp", customer, phone, preview, waiting, sla, owner = { kind: "queue" }, unread, selected, onClick, tenant, labels, className, ...rest }) {
|
|
@@ -6666,28 +6830,28 @@ function QueueCard({ channel = "whatsapp", customer, phone, preview, waiting, sl
|
|
|
6666
6830
|
const ch = CHANNEL[channel] || CHANNEL.web;
|
|
6667
6831
|
const ow = OWNER[owner.kind] || OWNER.queue;
|
|
6668
6832
|
const Tag2 = onClick ? "button" : "div";
|
|
6669
|
-
return /* @__PURE__ */
|
|
6670
|
-
/* @__PURE__ */
|
|
6671
|
-
/* @__PURE__ */
|
|
6672
|
-
/* @__PURE__ */
|
|
6673
|
-
/* @__PURE__ */
|
|
6674
|
-
unread > 0 && /* @__PURE__ */
|
|
6675
|
-
/* @__PURE__ */
|
|
6676
|
-
/* @__PURE__ */
|
|
6833
|
+
return /* @__PURE__ */ jsxs111(Tag2, { type: onClick ? "button" : void 0, className: cx("agn-queue", "agn-queue--" + channel, unread && "agn-queue--unread", selected && "agn-queue--selected", onClick && "agn-queue--clickable agn-focus-inset", className), "aria-pressed": onClick ? !!selected : void 0, onClick, ...rest, children: [
|
|
6834
|
+
/* @__PURE__ */ jsx119("span", { className: "agn-queue__channel", title: L[channel] || ch.label, children: /* @__PURE__ */ jsx119(Icon, { name: ch.icon, size: 16 }) }),
|
|
6835
|
+
/* @__PURE__ */ jsxs111("span", { className: "agn-queue__body", children: [
|
|
6836
|
+
/* @__PURE__ */ jsxs111("span", { className: "agn-queue__top", children: [
|
|
6837
|
+
/* @__PURE__ */ jsx119("span", { className: "agn-queue__name", children: customer }),
|
|
6838
|
+
unread > 0 && /* @__PURE__ */ jsxs111("span", { className: "agn-queue__unread agn-num", children: [
|
|
6839
|
+
/* @__PURE__ */ jsx119("span", { "aria-hidden": "true", children: unread }),
|
|
6840
|
+
/* @__PURE__ */ jsx119("span", { className: "agn-sr", children: unread + " " + L.unread })
|
|
6677
6841
|
] }),
|
|
6678
|
-
tenant && /* @__PURE__ */
|
|
6842
|
+
tenant && /* @__PURE__ */ jsx119("span", { className: "agn-queue__tenant", children: tenant })
|
|
6679
6843
|
] }),
|
|
6680
|
-
phone && /* @__PURE__ */
|
|
6681
|
-
preview && /* @__PURE__ */
|
|
6844
|
+
phone && /* @__PURE__ */ jsx119("span", { className: "agn-queue__phone agn-num", children: phone }),
|
|
6845
|
+
preview && /* @__PURE__ */ jsx119("span", { className: "agn-queue__preview", children: preview })
|
|
6682
6846
|
] }),
|
|
6683
|
-
/* @__PURE__ */
|
|
6684
|
-
waiting && /* @__PURE__ */
|
|
6685
|
-
/* @__PURE__ */
|
|
6847
|
+
/* @__PURE__ */ jsxs111("span", { className: "agn-queue__side", children: [
|
|
6848
|
+
waiting && /* @__PURE__ */ jsxs111("span", { className: "agn-queue__wait agn-num", children: [
|
|
6849
|
+
/* @__PURE__ */ jsx119(Icon, { name: "timer", size: 11 }),
|
|
6686
6850
|
waiting
|
|
6687
6851
|
] }),
|
|
6688
|
-
sla && /* @__PURE__ */
|
|
6689
|
-
/* @__PURE__ */
|
|
6690
|
-
owner.kind === "agent" ? /* @__PURE__ */
|
|
6852
|
+
sla && /* @__PURE__ */ jsx119("span", { className: cx("agn-queue__sla", "agn-queue__sla--" + (sla.tone || "neutral")), children: sla.label }),
|
|
6853
|
+
/* @__PURE__ */ jsxs111("span", { className: cx("agn-queue__owner", "agn-queue__owner--" + owner.kind), children: [
|
|
6854
|
+
owner.kind === "agent" ? /* @__PURE__ */ jsx119("span", { className: "agn-queue__owner-avatar", children: initials4(owner.name || "") }) : /* @__PURE__ */ jsx119(Icon, { name: ow.icon, size: 11 }),
|
|
6691
6855
|
owner.name || L[owner.kind] || ow.label
|
|
6692
6856
|
] })
|
|
6693
6857
|
] })
|
|
@@ -6695,97 +6859,97 @@ function QueueCard({ channel = "whatsapp", customer, phone, preview, waiting, sl
|
|
|
6695
6859
|
}
|
|
6696
6860
|
|
|
6697
6861
|
// src/widgets/CallCard.jsx
|
|
6698
|
-
import
|
|
6699
|
-
import { Fragment as Fragment15, jsx as
|
|
6862
|
+
import React122 from "react";
|
|
6863
|
+
import { Fragment as Fragment15, jsx as jsx120, jsxs as jsxs112 } from "react/jsx-runtime";
|
|
6700
6864
|
var STATE = { ringing: { tone: "info", icon: "phone-incoming", label: "Ringing" }, "in-call": { tone: "ok", icon: "phone-call", label: "In call" }, "on-hold": { tone: "warn", icon: "pause", label: "On hold" }, ended: { tone: "neutral", icon: "phone-off", label: "Ended" } };
|
|
6701
6865
|
var WAVE = [0.3, 0.55, 0.8, 0.45, 0.95, 0.6, 0.35, 0.7, 0.5, 0.9, 0.4, 0.65, 0.85, 0.3, 0.6, 0.75, 0.45, 0.9, 0.55, 0.35];
|
|
6702
6866
|
function CallCard({ number, name, direction = "inbound", state = "ringing", seconds = 0, live, agent, tenant, onAnswer, onDecline, onHold, onResume, onTransfer, onHangup, onCallBack, labels, className, ...rest }) {
|
|
6703
6867
|
const L = { answer: "Answer", decline: "Decline", hold: "Hold", resume: "Resume", transfer: "Transfer", hangup: "Hang up", callBack: "Call back", inbound: "Inbound", outbound: "Outbound", ...Object.fromEntries(Object.entries(STATE).map(([k, v]) => [k, v.label])), ...labels };
|
|
6704
|
-
const [elapsed, setElapsed] =
|
|
6705
|
-
|
|
6868
|
+
const [elapsed, setElapsed] = React122.useState(seconds);
|
|
6869
|
+
React122.useEffect(() => {
|
|
6706
6870
|
setElapsed(seconds);
|
|
6707
6871
|
}, [seconds]);
|
|
6708
|
-
|
|
6872
|
+
React122.useEffect(() => {
|
|
6709
6873
|
if (!live || state !== "in-call") return;
|
|
6710
6874
|
const t = setInterval(() => setElapsed((e) => e + 1), 1e3);
|
|
6711
6875
|
return () => clearInterval(t);
|
|
6712
6876
|
}, [live, state]);
|
|
6713
6877
|
const s = STATE[state] || STATE.ringing;
|
|
6714
|
-
return /* @__PURE__ */
|
|
6715
|
-
/* @__PURE__ */
|
|
6716
|
-
/* @__PURE__ */
|
|
6717
|
-
/* @__PURE__ */
|
|
6718
|
-
name && /* @__PURE__ */
|
|
6719
|
-
/* @__PURE__ */
|
|
6878
|
+
return /* @__PURE__ */ jsxs112("article", { className: cx("agn-call", "agn-call--" + state, className), "aria-label": (name || number) + " \xB7 " + (L[state] || s.label), ...rest, children: [
|
|
6879
|
+
/* @__PURE__ */ jsxs112("header", { className: "agn-call__head", children: [
|
|
6880
|
+
/* @__PURE__ */ jsx120("span", { className: "agn-call__dir", title: L[direction], children: /* @__PURE__ */ jsx120(Icon, { name: direction === "outbound" ? "phone-outgoing" : "phone-incoming", size: 16 }) }),
|
|
6881
|
+
/* @__PURE__ */ jsxs112("div", { className: "agn-call__who", children: [
|
|
6882
|
+
name && /* @__PURE__ */ jsx120("div", { className: "agn-call__name", children: name }),
|
|
6883
|
+
/* @__PURE__ */ jsx120("div", { className: "agn-call__number agn-num", children: number })
|
|
6720
6884
|
] }),
|
|
6721
|
-
/* @__PURE__ */
|
|
6722
|
-
/* @__PURE__ */
|
|
6885
|
+
/* @__PURE__ */ jsxs112("span", { className: cx("agn-call__state", "agn-call__state--" + s.tone), children: [
|
|
6886
|
+
/* @__PURE__ */ jsx120(Icon, { name: s.icon, size: 12, className: state === "ringing" ? "agn-call__ring" : void 0 }),
|
|
6723
6887
|
L[state] || s.label
|
|
6724
6888
|
] })
|
|
6725
6889
|
] }),
|
|
6726
|
-
/* @__PURE__ */
|
|
6727
|
-
/* @__PURE__ */
|
|
6728
|
-
/* @__PURE__ */
|
|
6890
|
+
/* @__PURE__ */ jsxs112("div", { className: "agn-call__body", children: [
|
|
6891
|
+
/* @__PURE__ */ jsx120("div", { className: "agn-call__time agn-num", role: "timer", "aria-live": "off", children: fmtClock(elapsed) }),
|
|
6892
|
+
/* @__PURE__ */ jsx120("div", { className: "agn-call__wave", "aria-hidden": "true", children: WAVE.map((v, i) => /* @__PURE__ */ jsx120("span", { className: "agn-call__bar", style: { "--agn-h": v, "--agn-i": i } }, i)) })
|
|
6729
6893
|
] }),
|
|
6730
|
-
(agent || tenant) && /* @__PURE__ */
|
|
6731
|
-
agent && /* @__PURE__ */
|
|
6732
|
-
/* @__PURE__ */
|
|
6894
|
+
(agent || tenant) && /* @__PURE__ */ jsxs112("div", { className: "agn-call__meta", children: [
|
|
6895
|
+
agent && /* @__PURE__ */ jsxs112("span", { children: [
|
|
6896
|
+
/* @__PURE__ */ jsx120(Icon, { name: "headset", size: 12 }),
|
|
6733
6897
|
agent
|
|
6734
6898
|
] }),
|
|
6735
|
-
tenant && /* @__PURE__ */
|
|
6736
|
-
/* @__PURE__ */
|
|
6899
|
+
tenant && /* @__PURE__ */ jsxs112("span", { children: [
|
|
6900
|
+
/* @__PURE__ */ jsx120(Icon, { name: "building-2", size: 12 }),
|
|
6737
6901
|
tenant
|
|
6738
6902
|
] })
|
|
6739
6903
|
] }),
|
|
6740
|
-
/* @__PURE__ */
|
|
6741
|
-
state === "ringing" && /* @__PURE__ */
|
|
6742
|
-
onAnswer && /* @__PURE__ */
|
|
6743
|
-
onDecline && /* @__PURE__ */
|
|
6904
|
+
/* @__PURE__ */ jsxs112("footer", { className: "agn-call__foot", children: [
|
|
6905
|
+
state === "ringing" && /* @__PURE__ */ jsxs112(Fragment15, { children: [
|
|
6906
|
+
onAnswer && /* @__PURE__ */ jsx120(Button, { variant: "success", size: "sm", icon: "phone", onClick: onAnswer, children: L.answer }),
|
|
6907
|
+
onDecline && /* @__PURE__ */ jsx120(Button, { variant: "destructive-text", size: "sm", icon: "phone-off", onClick: onDecline, children: L.decline })
|
|
6744
6908
|
] }),
|
|
6745
|
-
state === "in-call" && /* @__PURE__ */
|
|
6746
|
-
onHold && /* @__PURE__ */
|
|
6747
|
-
onTransfer && /* @__PURE__ */
|
|
6748
|
-
onHangup && /* @__PURE__ */
|
|
6909
|
+
state === "in-call" && /* @__PURE__ */ jsxs112(Fragment15, { children: [
|
|
6910
|
+
onHold && /* @__PURE__ */ jsx120(Button, { size: "sm", icon: "pause", onClick: onHold, children: L.hold }),
|
|
6911
|
+
onTransfer && /* @__PURE__ */ jsx120(Button, { size: "sm", icon: "phone-forwarded", onClick: onTransfer, children: L.transfer }),
|
|
6912
|
+
onHangup && /* @__PURE__ */ jsx120(Button, { variant: "destructive", size: "sm", icon: "phone-off", onClick: onHangup, children: L.hangup })
|
|
6749
6913
|
] }),
|
|
6750
|
-
state === "on-hold" && /* @__PURE__ */
|
|
6751
|
-
onResume && /* @__PURE__ */
|
|
6752
|
-
onTransfer && /* @__PURE__ */
|
|
6753
|
-
onHangup && /* @__PURE__ */
|
|
6914
|
+
state === "on-hold" && /* @__PURE__ */ jsxs112(Fragment15, { children: [
|
|
6915
|
+
onResume && /* @__PURE__ */ jsx120(Button, { variant: "primary", size: "sm", icon: "play", onClick: onResume, children: L.resume }),
|
|
6916
|
+
onTransfer && /* @__PURE__ */ jsx120(Button, { size: "sm", icon: "phone-forwarded", onClick: onTransfer, children: L.transfer }),
|
|
6917
|
+
onHangup && /* @__PURE__ */ jsx120(Button, { variant: "destructive", size: "sm", icon: "phone-off", onClick: onHangup, children: L.hangup })
|
|
6754
6918
|
] }),
|
|
6755
|
-
state === "ended" && onCallBack && /* @__PURE__ */
|
|
6919
|
+
state === "ended" && onCallBack && /* @__PURE__ */ jsx120(Button, { size: "sm", icon: "phone-outgoing", onClick: onCallBack, children: L.callBack })
|
|
6756
6920
|
] })
|
|
6757
6921
|
] });
|
|
6758
6922
|
}
|
|
6759
6923
|
|
|
6760
6924
|
// src/dashboard/KpiWidget.jsx
|
|
6761
|
-
import
|
|
6762
|
-
import { jsx as
|
|
6763
|
-
var
|
|
6925
|
+
import React123 from "react";
|
|
6926
|
+
import { jsx as jsx121, jsxs as jsxs113 } from "react/jsx-runtime";
|
|
6927
|
+
var DEFAULT_LABELS51 = { options: "Options", trend: "Trend" };
|
|
6764
6928
|
function KpiWidget({ label, value, delta, invert, sub, icon, spark, sparkTone, sparkColor = 1, menuItems, onMenuSelect, plain, size = "md", labels, className, ...rest }) {
|
|
6765
|
-
const L = { ...
|
|
6766
|
-
const chart = spark && spark.length > 1 ? /* @__PURE__ */
|
|
6767
|
-
const stat = /* @__PURE__ */
|
|
6768
|
-
const menu = menuItems && menuItems.length ? /* @__PURE__ */
|
|
6769
|
-
if (plain) return /* @__PURE__ */
|
|
6929
|
+
const L = { ...DEFAULT_LABELS51, ...labels };
|
|
6930
|
+
const chart = spark && spark.length > 1 ? /* @__PURE__ */ jsx121(Sparkline, { data: spark, width: 128, height: 28, area: true, tone: sparkTone, color: sparkColor, "aria-label": L.trend + ": " + spark.join(", ") }) : null;
|
|
6931
|
+
const stat = /* @__PURE__ */ jsx121(Stat, { label, value, delta, invert, sub, icon, size, chart });
|
|
6932
|
+
const menu = menuItems && menuItems.length ? /* @__PURE__ */ jsx121("div", { className: "agn-kpi__menu", children: /* @__PURE__ */ jsx121(Menu, { align: "right", items: menuItems, onSelect: onMenuSelect, trigger: /* @__PURE__ */ jsx121(ButtonIcon, { icon: "ellipsis", label: L.options, size: "xs", variant: "ghost" }) }) }) : null;
|
|
6933
|
+
if (plain) return /* @__PURE__ */ jsxs113("div", { className: cx("agn-kpi", "agn-kpi--plain", menu && "agn-kpi--menu", className), ...rest, children: [
|
|
6770
6934
|
stat,
|
|
6771
6935
|
menu
|
|
6772
6936
|
] });
|
|
6773
|
-
return /* @__PURE__ */
|
|
6937
|
+
return /* @__PURE__ */ jsxs113(Card, { padding: "md", as: "div", className: cx("agn-kpi", menu && "agn-kpi--menu", className), ...rest, children: [
|
|
6774
6938
|
stat,
|
|
6775
6939
|
menu
|
|
6776
6940
|
] });
|
|
6777
6941
|
}
|
|
6778
6942
|
function KpiRow({ items = [], children, label, className, ...rest }) {
|
|
6779
|
-
return /* @__PURE__ */
|
|
6943
|
+
return /* @__PURE__ */ jsx121("div", { className: cx("agn-kpi-row", className), role: "group", "aria-label": label, ...rest, children: children || items.map((it, i) => /* @__PURE__ */ jsx121(KpiWidget, { plain: true, ...it }, it.id || i)) });
|
|
6780
6944
|
}
|
|
6781
6945
|
|
|
6782
6946
|
// src/dashboard/ChartCard.jsx
|
|
6783
|
-
import
|
|
6784
|
-
import { Fragment as Fragment16, jsx as
|
|
6785
|
-
var
|
|
6947
|
+
import React124 from "react";
|
|
6948
|
+
import { Fragment as Fragment16, jsx as jsx122, jsxs as jsxs114 } from "react/jsx-runtime";
|
|
6949
|
+
var DEFAULT_LABELS52 = { period: "Period", loading: "Loading chart", empty: "No data for this period", emptyHint: "Pick another period, or wait for the agent to receive traffic." };
|
|
6786
6950
|
function ChartCard({ title, icon, unit, periods, period, defaultPeriod, onPeriodChange, type = "line", series, data, categories = [], height = 160, format = (v) => String(v), legend = true, headline, state, footnote, actions, viewAll, labels, className, ...rest }) {
|
|
6787
|
-
const L = { ...
|
|
6788
|
-
const [own, setOwn] =
|
|
6951
|
+
const L = { ...DEFAULT_LABELS52, ...labels };
|
|
6952
|
+
const [own, setOwn] = React124.useState(defaultPeriod != null ? defaultPeriod : periods && periods.length ? typeof periods[0] === "string" ? periods[0] : periods[0].value : void 0);
|
|
6789
6953
|
const per = period !== void 0 ? period : own;
|
|
6790
6954
|
const setPer = (v) => {
|
|
6791
6955
|
if (period === void 0) setOwn(v);
|
|
@@ -6794,37 +6958,37 @@ function ChartCard({ title, icon, unit, periods, period, defaultPeriod, onPeriod
|
|
|
6794
6958
|
const ser = series || [{ name: typeof title === "string" ? title : "", values: data || [] }];
|
|
6795
6959
|
const empty = state === "empty" || state !== "loading" && !ser.some((s) => s.values && s.values.length);
|
|
6796
6960
|
const plainTitle = typeof title === "string" ? title + (unit ? " (" + unit + ")" : "") : void 0;
|
|
6797
|
-
const head = /* @__PURE__ */
|
|
6961
|
+
const head = /* @__PURE__ */ jsxs114(Fragment16, { children: [
|
|
6798
6962
|
title,
|
|
6799
|
-
unit && /* @__PURE__ */
|
|
6963
|
+
unit && /* @__PURE__ */ jsx122("span", { className: "agn-chart-card__unit", children: unit })
|
|
6800
6964
|
] });
|
|
6801
|
-
const right = (periods || actions) && /* @__PURE__ */
|
|
6802
|
-
periods && /* @__PURE__ */
|
|
6965
|
+
const right = (periods || actions) && /* @__PURE__ */ jsxs114(Fragment16, { children: [
|
|
6966
|
+
periods && /* @__PURE__ */ jsx122(SegmentedControl, { size: "sm", options: periods, value: per, onChange: setPer, label: L.period }),
|
|
6803
6967
|
actions
|
|
6804
6968
|
] });
|
|
6805
6969
|
let body;
|
|
6806
|
-
if (state === "loading") body = /* @__PURE__ */
|
|
6807
|
-
/* @__PURE__ */
|
|
6808
|
-
/* @__PURE__ */
|
|
6809
|
-
/* @__PURE__ */
|
|
6970
|
+
if (state === "loading") body = /* @__PURE__ */ jsxs114("div", { className: "agn-chart-card__loading", role: "status", "aria-busy": "true", children: [
|
|
6971
|
+
/* @__PURE__ */ jsx122("span", { className: "agn-sr", children: L.loading }),
|
|
6972
|
+
/* @__PURE__ */ jsx122(Skeleton, { shape: "rect", width: "100%", height }),
|
|
6973
|
+
/* @__PURE__ */ jsx122(Skeleton, { shape: "line", width: "40%" })
|
|
6810
6974
|
] });
|
|
6811
|
-
else if (empty) body = /* @__PURE__ */
|
|
6812
|
-
else body = /* @__PURE__ */
|
|
6813
|
-
return /* @__PURE__ */
|
|
6814
|
-
headline && state !== "loading" && !empty && /* @__PURE__ */
|
|
6815
|
-
/* @__PURE__ */
|
|
6816
|
-
footnote && /* @__PURE__ */
|
|
6975
|
+
else if (empty) body = /* @__PURE__ */ jsx122("div", { className: "agn-chart-card__empty", style: { minHeight: height }, children: /* @__PURE__ */ jsx122(EmptyState, { compact: true, icon: "chart-no-axes-column", title: L.empty, children: L.emptyHint }) });
|
|
6976
|
+
else body = /* @__PURE__ */ jsx122(MiniChart, { type: type === "stacked" ? "bar" : type, stacked: type === "stacked", series: ser, labels: categories, height, legend, format, title: plainTitle });
|
|
6977
|
+
return /* @__PURE__ */ jsxs114(Card, { title: head, icon, actions: right, viewAll, className: cx("agn-chart-card", className), ...rest, children: [
|
|
6978
|
+
headline && state !== "loading" && !empty && /* @__PURE__ */ jsx122(Stat, { size: "sm", className: "agn-chart-card__headline", ...headline }),
|
|
6979
|
+
/* @__PURE__ */ jsx122("div", { className: "agn-chart-card__plot", children: body }),
|
|
6980
|
+
footnote && /* @__PURE__ */ jsx122("p", { className: "agn-chart-card__foot", children: footnote })
|
|
6817
6981
|
] });
|
|
6818
6982
|
}
|
|
6819
6983
|
|
|
6820
6984
|
// src/dashboard/TaskListWidget.jsx
|
|
6821
|
-
import
|
|
6822
|
-
import { jsx as
|
|
6985
|
+
import React125 from "react";
|
|
6986
|
+
import { jsx as jsx123, jsxs as jsxs115 } from "react/jsx-runtime";
|
|
6823
6987
|
var PRI = { high: { tone: "bad", icon: "chevrons-up" }, medium: { tone: "warn", icon: "chevron-up" }, low: { tone: "neutral", icon: "chevron-down" } };
|
|
6824
|
-
var
|
|
6988
|
+
var DEFAULT_LABELS53 = { title: "Tasks", add: "Add task", empty: "No open tasks", emptyHint: "Tasks assigned to you appear here.", overdue: "Overdue", due: "Due", high: "High", medium: "Medium", low: "Low", viewAll: "View all" };
|
|
6825
6989
|
function TaskListWidget({ tasks = [], onToggle, onOpen, onAdd, title, hideDone, viewAll, labels, className, ...rest }) {
|
|
6826
|
-
const L = { ...
|
|
6827
|
-
const [map, setMap] =
|
|
6990
|
+
const L = { ...DEFAULT_LABELS53, ...labels };
|
|
6991
|
+
const [map, setMap] = React125.useState({});
|
|
6828
6992
|
const isDone = (t) => t.id in map ? map[t.id] : !!t.done;
|
|
6829
6993
|
const toggle = (t, v) => {
|
|
6830
6994
|
setMap({ ...map, [t.id]: v });
|
|
@@ -6832,7 +6996,7 @@ function TaskListWidget({ tasks = [], onToggle, onOpen, onAdd, title, hideDone,
|
|
|
6832
6996
|
};
|
|
6833
6997
|
const list = hideDone ? tasks.filter((t) => !isDone(t)) : tasks;
|
|
6834
6998
|
const open = tasks.filter((t) => !isDone(t)).length;
|
|
6835
|
-
return /* @__PURE__ */
|
|
6999
|
+
return /* @__PURE__ */ jsx123(
|
|
6836
7000
|
Card,
|
|
6837
7001
|
{
|
|
6838
7002
|
title: title || L.title,
|
|
@@ -6840,22 +7004,22 @@ function TaskListWidget({ tasks = [], onToggle, onOpen, onAdd, title, hideDone,
|
|
|
6840
7004
|
count: open,
|
|
6841
7005
|
viewAll,
|
|
6842
7006
|
labels: { viewAll: L.viewAll },
|
|
6843
|
-
actions: onAdd && /* @__PURE__ */
|
|
7007
|
+
actions: onAdd && /* @__PURE__ */ jsx123(Button, { variant: "ghost", size: "sm", icon: "plus", onClick: onAdd, children: L.add }),
|
|
6844
7008
|
padding: "none",
|
|
6845
7009
|
className: cx("agn-tasks", className),
|
|
6846
7010
|
...rest,
|
|
6847
|
-
children: list.length === 0 ? /* @__PURE__ */
|
|
7011
|
+
children: list.length === 0 ? /* @__PURE__ */ jsx123("div", { className: "agn-tasks__empty", children: /* @__PURE__ */ jsx123(EmptyState, { compact: true, icon: "list-checks", title: L.empty, children: L.emptyHint }) }) : /* @__PURE__ */ jsx123("ul", { className: "agn-tasks__list", children: list.map((t) => {
|
|
6848
7012
|
const d = isDone(t);
|
|
6849
7013
|
const p = PRI[t.priority];
|
|
6850
|
-
return /* @__PURE__ */
|
|
6851
|
-
/* @__PURE__ */
|
|
6852
|
-
/* @__PURE__ */
|
|
6853
|
-
onOpen ? /* @__PURE__ */
|
|
6854
|
-
(t.related || t.due) && /* @__PURE__ */
|
|
6855
|
-
t.related && /* @__PURE__ */
|
|
6856
|
-
t.due && /* @__PURE__ */
|
|
6857
|
-
/* @__PURE__ */
|
|
6858
|
-
t.overdue && !d ? L.overdue + " \xB7 " : /* @__PURE__ */
|
|
7014
|
+
return /* @__PURE__ */ jsxs115("li", { className: cx("agn-tasks__item", d && "agn-tasks__item--done"), children: [
|
|
7015
|
+
/* @__PURE__ */ jsx123(Checkbox, { checked: d, onChange: (v) => toggle(t, v), "aria-label": typeof t.title === "string" ? t.title : void 0 }),
|
|
7016
|
+
/* @__PURE__ */ jsxs115("div", { className: "agn-tasks__main", children: [
|
|
7017
|
+
onOpen ? /* @__PURE__ */ jsx123("button", { type: "button", className: "agn-tasks__title agn-tasks__title--link agn-focus", onClick: () => onOpen(t), children: t.title }) : /* @__PURE__ */ jsx123("span", { className: "agn-tasks__title", children: t.title }),
|
|
7018
|
+
(t.related || t.due) && /* @__PURE__ */ jsxs115("span", { className: "agn-tasks__meta", children: [
|
|
7019
|
+
t.related && /* @__PURE__ */ jsx123("span", { className: "agn-tasks__related", children: t.related }),
|
|
7020
|
+
t.due && /* @__PURE__ */ jsxs115("span", { className: cx("agn-tasks__due", t.overdue && !d && "agn-tasks__due--overdue"), children: [
|
|
7021
|
+
/* @__PURE__ */ jsx123(Icon, { name: t.overdue && !d ? "circle-alert" : "calendar", size: 12 }),
|
|
7022
|
+
t.overdue && !d ? L.overdue + " \xB7 " : /* @__PURE__ */ jsxs115("span", { className: "agn-sr", children: [
|
|
6859
7023
|
L.due,
|
|
6860
7024
|
" "
|
|
6861
7025
|
] }),
|
|
@@ -6863,8 +7027,8 @@ function TaskListWidget({ tasks = [], onToggle, onOpen, onAdd, title, hideDone,
|
|
|
6863
7027
|
] })
|
|
6864
7028
|
] })
|
|
6865
7029
|
] }),
|
|
6866
|
-
p && /* @__PURE__ */
|
|
6867
|
-
t.owner && /* @__PURE__ */
|
|
7030
|
+
p && /* @__PURE__ */ jsx123(Tag, { tone: d ? "neutral" : p.tone, icon: p.icon, className: "agn-tasks__priority", children: L[t.priority] }),
|
|
7031
|
+
t.owner && /* @__PURE__ */ jsx123(Avatar, { size: "xs", name: t.owner, kind: t.ownerKind || "person", className: "agn-tasks__owner" })
|
|
6868
7032
|
] }, t.id);
|
|
6869
7033
|
}) })
|
|
6870
7034
|
}
|
|
@@ -6872,14 +7036,14 @@ function TaskListWidget({ tasks = [], onToggle, onOpen, onAdd, title, hideDone,
|
|
|
6872
7036
|
}
|
|
6873
7037
|
|
|
6874
7038
|
// src/dashboard/AiInsightWidget.jsx
|
|
6875
|
-
import
|
|
6876
|
-
import { jsx as
|
|
6877
|
-
var
|
|
7039
|
+
import React126 from "react";
|
|
7040
|
+
import { jsx as jsx124, jsxs as jsxs116 } from "react/jsx-runtime";
|
|
7041
|
+
var DEFAULT_LABELS54 = { generated: "AI-generated", evidence: "Evidence", apply: "Apply", dismiss: "Dismiss", helpful: "Was this helpful?", yes: "Helpful", no: "Not helpful", thanks: "Thanks for the feedback", applied: "Applied", dismissed: "Dismissed", confidence: "confidence", check: "Check the evidence before you apply it." };
|
|
6878
7042
|
function AiInsightWidget({ title, children, evidence = [], confidence, model, time, status: statusProp, onApply, onDismiss, applyLabel, feedback: fbProp, onFeedback, labels, className, ...rest }) {
|
|
6879
|
-
const L = { ...
|
|
6880
|
-
const [own, setOwn] =
|
|
7043
|
+
const L = { ...DEFAULT_LABELS54, ...labels };
|
|
7044
|
+
const [own, setOwn] = React126.useState("open");
|
|
6881
7045
|
const status = statusProp || own;
|
|
6882
|
-
const [fbOwn, setFb] =
|
|
7046
|
+
const [fbOwn, setFb] = React126.useState(null);
|
|
6883
7047
|
const fb = fbProp !== void 0 ? fbProp : fbOwn;
|
|
6884
7048
|
const vote = (v) => {
|
|
6885
7049
|
const next = fb === v ? null : v;
|
|
@@ -6887,52 +7051,52 @@ function AiInsightWidget({ title, children, evidence = [], confidence, model, ti
|
|
|
6887
7051
|
onFeedback && onFeedback(next);
|
|
6888
7052
|
};
|
|
6889
7053
|
const meta = [confidence != null ? Math.round(confidence * 100) + "% " + L.confidence : null, model, time].filter(Boolean);
|
|
6890
|
-
return /* @__PURE__ */
|
|
6891
|
-
title && /* @__PURE__ */
|
|
6892
|
-
children && /* @__PURE__ */
|
|
6893
|
-
evidence.length > 0 && /* @__PURE__ */
|
|
6894
|
-
/* @__PURE__ */
|
|
6895
|
-
/* @__PURE__ */
|
|
7054
|
+
return /* @__PURE__ */ jsxs116(Card, { icon: "sparkles", title: L.generated, as: "div", actions: meta.length > 0 && /* @__PURE__ */ jsx124("span", { className: "agn-insight__meta", children: meta.map((m, i) => /* @__PURE__ */ jsx124("span", { children: m }, i)) }), className: cx("agn-insight", "agn-insight--" + status, className), ...rest, children: [
|
|
7055
|
+
title && /* @__PURE__ */ jsx124("h4", { className: "agn-insight__title", children: title }),
|
|
7056
|
+
children && /* @__PURE__ */ jsx124("div", { className: "agn-insight__text", children }),
|
|
7057
|
+
evidence.length > 0 && /* @__PURE__ */ jsxs116("div", { className: "agn-insight__evidence", children: [
|
|
7058
|
+
/* @__PURE__ */ jsx124("div", { className: "agn-insight__label", children: L.evidence }),
|
|
7059
|
+
/* @__PURE__ */ jsx124("ol", { className: "agn-insight__list", children: evidence.map((e, i) => {
|
|
6896
7060
|
const src = e.source && (typeof e.source === "string" ? { label: e.source } : e.source);
|
|
6897
7061
|
const SrcTag = src && src.href ? "a" : "span";
|
|
6898
|
-
return /* @__PURE__ */
|
|
6899
|
-
/* @__PURE__ */
|
|
6900
|
-
/* @__PURE__ */
|
|
6901
|
-
/* @__PURE__ */
|
|
6902
|
-
src && /* @__PURE__ */
|
|
6903
|
-
/* @__PURE__ */
|
|
7062
|
+
return /* @__PURE__ */ jsxs116("li", { className: "agn-insight__item", children: [
|
|
7063
|
+
/* @__PURE__ */ jsx124("span", { className: "agn-insight__n agn-num", "aria-hidden": "true", children: i + 1 }),
|
|
7064
|
+
/* @__PURE__ */ jsxs116("div", { className: "agn-insight__item-main", children: [
|
|
7065
|
+
/* @__PURE__ */ jsx124("span", { className: "agn-insight__claim", children: e.text }),
|
|
7066
|
+
src && /* @__PURE__ */ jsxs116(SrcTag, { className: "agn-insight__source", href: src.href, children: [
|
|
7067
|
+
/* @__PURE__ */ jsx124(Icon, { name: src.icon || "file-text", size: 12 }),
|
|
6904
7068
|
src.label
|
|
6905
7069
|
] })
|
|
6906
7070
|
] })
|
|
6907
7071
|
] }, e.id || i);
|
|
6908
7072
|
}) })
|
|
6909
7073
|
] }),
|
|
6910
|
-
/* @__PURE__ */
|
|
6911
|
-
status === "open" ? /* @__PURE__ */
|
|
6912
|
-
/* @__PURE__ */
|
|
7074
|
+
/* @__PURE__ */ jsxs116("div", { className: "agn-insight__foot", children: [
|
|
7075
|
+
status === "open" ? /* @__PURE__ */ jsxs116("div", { className: "agn-insight__actions", children: [
|
|
7076
|
+
/* @__PURE__ */ jsx124(Button, { size: "sm", variant: "neutral", icon: "check", onClick: () => {
|
|
6913
7077
|
setOwn("applied");
|
|
6914
7078
|
onApply && onApply();
|
|
6915
7079
|
}, children: applyLabel || L.apply }),
|
|
6916
|
-
/* @__PURE__ */
|
|
7080
|
+
/* @__PURE__ */ jsx124(Button, { size: "sm", variant: "ghost", onClick: () => {
|
|
6917
7081
|
setOwn("dismissed");
|
|
6918
7082
|
onDismiss && onDismiss();
|
|
6919
7083
|
}, children: L.dismiss })
|
|
6920
|
-
] }) : /* @__PURE__ */
|
|
6921
|
-
/* @__PURE__ */
|
|
6922
|
-
/* @__PURE__ */
|
|
6923
|
-
/* @__PURE__ */
|
|
6924
|
-
/* @__PURE__ */
|
|
7084
|
+
] }) : /* @__PURE__ */ jsx124(Tag, { tone: status === "applied" ? "ok" : "neutral", icon: status === "applied" ? "circle-check" : "x", children: L[status] || status }),
|
|
7085
|
+
/* @__PURE__ */ jsxs116("div", { className: "agn-insight__feedback", role: "group", "aria-label": L.helpful, children: [
|
|
7086
|
+
/* @__PURE__ */ jsx124("span", { className: "agn-insight__ask", "aria-live": "polite", children: fb ? L.thanks : L.helpful }),
|
|
7087
|
+
/* @__PURE__ */ jsx124(ButtonIcon, { icon: "thumbs-up", label: L.yes, size: "xs", "aria-pressed": fb === "up", className: cx(fb === "up" && "agn-insight__thumb--on"), onClick: () => vote("up") }),
|
|
7088
|
+
/* @__PURE__ */ jsx124(ButtonIcon, { icon: "thumbs-down", label: L.no, size: "xs", "aria-pressed": fb === "down", className: cx(fb === "down" && "agn-insight__thumb--on"), onClick: () => vote("down") })
|
|
6925
7089
|
] })
|
|
6926
7090
|
] })
|
|
6927
7091
|
] });
|
|
6928
7092
|
}
|
|
6929
7093
|
|
|
6930
7094
|
// src/dashboard/FilterBar.jsx
|
|
6931
|
-
import
|
|
6932
|
-
import { jsx as
|
|
6933
|
-
var
|
|
7095
|
+
import React127 from "react";
|
|
7096
|
+
import { jsx as jsx125, jsxs as jsxs117 } from "react/jsx-runtime";
|
|
7097
|
+
var DEFAULT_LABELS55 = { search: "Search\u2026", searchLabel: "Search", filters: "Quick filters", more: "More filters", views: "Saved view", active: "Filters", clear: "Clear all", remove: "Remove filter" };
|
|
6934
7098
|
function useCtl(value, def, cb) {
|
|
6935
|
-
const [own, setOwn] =
|
|
7099
|
+
const [own, setOwn] = React127.useState(def);
|
|
6936
7100
|
const v = value !== void 0 ? value : own;
|
|
6937
7101
|
return [v, (x) => {
|
|
6938
7102
|
if (value === void 0) setOwn(x);
|
|
@@ -6940,7 +7104,7 @@ function useCtl(value, def, cb) {
|
|
|
6940
7104
|
}];
|
|
6941
7105
|
}
|
|
6942
7106
|
function FilterBar({ search, defaultSearch = "", onSearch, chips = [], chipValue, defaultChipValue = [], onChipChange, moreFilters = [], onMoreFilter, moreOpen, onMoreOpenChange, views = [], view, defaultView = null, onViewChange, active, defaultActive = [], onActiveChange, onClear, right, labels, className, ...rest }) {
|
|
6943
|
-
const L = { ...
|
|
7107
|
+
const L = { ...DEFAULT_LABELS55, ...labels };
|
|
6944
7108
|
const [q, setQ] = useCtl(search, defaultSearch, onSearch);
|
|
6945
7109
|
const [cv, setCv] = useCtl(chipValue, defaultChipValue, onChipChange);
|
|
6946
7110
|
const [vw, setVw] = useCtl(view, defaultView, onViewChange);
|
|
@@ -6956,76 +7120,76 @@ function FilterBar({ search, defaultSearch = "", onSearch, chips = [], chipValue
|
|
|
6956
7120
|
setAct([]);
|
|
6957
7121
|
onClear && onClear();
|
|
6958
7122
|
};
|
|
6959
|
-
return /* @__PURE__ */
|
|
6960
|
-
/* @__PURE__ */
|
|
6961
|
-
/* @__PURE__ */
|
|
6962
|
-
chips.length > 0 && /* @__PURE__ */
|
|
6963
|
-
moreFilters.length > 0 && /* @__PURE__ */
|
|
6964
|
-
/* @__PURE__ */
|
|
6965
|
-
views.length > 0 && /* @__PURE__ */
|
|
7123
|
+
return /* @__PURE__ */ jsxs117("div", { className: cx("agn-filterbar", className), ...rest, children: [
|
|
7124
|
+
/* @__PURE__ */ jsxs117("div", { className: "agn-filterbar__row", children: [
|
|
7125
|
+
/* @__PURE__ */ jsx125(Input, { icon: "search", value: q, onChange: (e) => setQ(e.target.value), onClear: q ? () => setQ("") : void 0, placeholder: L.search, "aria-label": L.searchLabel, className: "agn-filterbar__search" }),
|
|
7126
|
+
chips.length > 0 && /* @__PURE__ */ jsx125(ChipGroup, { multiple: true, options: chips, value: cv, onChange: setCv, label: L.filters }),
|
|
7127
|
+
moreFilters.length > 0 && /* @__PURE__ */ jsx125(Menu, { items: moreFilters, open: moreOpen, onOpenChange: onMoreOpenChange, searchable: moreFilters.length > 7, onSelect: add, trigger: /* @__PURE__ */ jsx125(Button, { variant: "ghost", icon: "list-filter", children: L.more }) }),
|
|
7128
|
+
/* @__PURE__ */ jsx125("span", { className: "agn-filterbar__spacer" }),
|
|
7129
|
+
views.length > 0 && /* @__PURE__ */ jsx125(Combobox, { options: views, value: vw, onChange: setVw, icon: "bookmark", placeholder: L.views, className: "agn-filterbar__views" }),
|
|
6966
7130
|
right
|
|
6967
7131
|
] }),
|
|
6968
|
-
(act.length > 0 || any) && /* @__PURE__ */
|
|
6969
|
-
/* @__PURE__ */
|
|
6970
|
-
act.length > 0 && /* @__PURE__ */
|
|
6971
|
-
/* @__PURE__ */
|
|
7132
|
+
(act.length > 0 || any) && /* @__PURE__ */ jsxs117("div", { className: "agn-filterbar__active", children: [
|
|
7133
|
+
/* @__PURE__ */ jsx125("span", { className: "agn-filterbar__label", children: L.active }),
|
|
7134
|
+
act.length > 0 && /* @__PURE__ */ jsx125(PillContainer, { bare: true, children: act.map((a) => /* @__PURE__ */ jsx125(Pill, { size: "sm", label: a.label, icon: a.icon, labels: { remove: L.remove }, onRemove: () => setAct(act.filter((x) => x.key !== a.key)) }, a.key)) }),
|
|
7135
|
+
/* @__PURE__ */ jsx125(Button, { variant: "link", size: "sm", onClick: clearAll, children: L.clear })
|
|
6972
7136
|
] })
|
|
6973
7137
|
] });
|
|
6974
7138
|
}
|
|
6975
7139
|
|
|
6976
7140
|
// src/dashboard/RecordSummaryWidget.jsx
|
|
6977
|
-
import
|
|
6978
|
-
import { jsx as
|
|
6979
|
-
var
|
|
7141
|
+
import React128 from "react";
|
|
7142
|
+
import { jsx as jsx126, jsxs as jsxs118 } from "react/jsx-runtime";
|
|
7143
|
+
var DEFAULT_LABELS56 = { open: "Open record", stage: "Stage" };
|
|
6980
7144
|
function RecordSummaryWidget({ object, title, subtitle, media: media2, avatar, icon = "bot", product, status, fields = [], stages, stage, lost, pathCompact, actions = [], onOpen, labels, className, ...rest }) {
|
|
6981
|
-
const L = { ...
|
|
6982
|
-
const mediaNode = media2 || (avatar ? /* @__PURE__ */
|
|
7145
|
+
const L = { ...DEFAULT_LABELS56, ...labels };
|
|
7146
|
+
const mediaNode = media2 || (avatar ? /* @__PURE__ */ jsx126(Avatar, { size: "lg", name: avatar }) : /* @__PURE__ */ jsx126(BlockIcon, { size: "xl", icon, product }));
|
|
6983
7147
|
const st = status && (typeof status === "string" ? { label: status } : status);
|
|
6984
|
-
return /* @__PURE__ */
|
|
6985
|
-
/* @__PURE__ */
|
|
7148
|
+
return /* @__PURE__ */ jsxs118(Card, { padding: "md", as: "div", className: cx("agn-record", className), ...rest, children: [
|
|
7149
|
+
/* @__PURE__ */ jsxs118("div", { className: "agn-record__head", children: [
|
|
6986
7150
|
mediaNode,
|
|
6987
|
-
/* @__PURE__ */
|
|
6988
|
-
object && /* @__PURE__ */
|
|
6989
|
-
/* @__PURE__ */
|
|
6990
|
-
subtitle && /* @__PURE__ */
|
|
7151
|
+
/* @__PURE__ */ jsxs118("div", { className: "agn-record__heading", children: [
|
|
7152
|
+
object && /* @__PURE__ */ jsx126("div", { className: "agn-eyebrow agn-eyebrow--quiet", children: object }),
|
|
7153
|
+
/* @__PURE__ */ jsx126("h3", { className: "agn-record__title", children: title }),
|
|
7154
|
+
subtitle && /* @__PURE__ */ jsx126("div", { className: "agn-record__sub", children: subtitle })
|
|
6991
7155
|
] }),
|
|
6992
|
-
/* @__PURE__ */
|
|
6993
|
-
st && /* @__PURE__ */
|
|
6994
|
-
onOpen && /* @__PURE__ */
|
|
7156
|
+
/* @__PURE__ */ jsxs118("div", { className: "agn-record__side", children: [
|
|
7157
|
+
st && /* @__PURE__ */ jsx126(Tag, { tone: st.tone, dot: st.dot, icon: st.icon, children: st.label }),
|
|
7158
|
+
onOpen && /* @__PURE__ */ jsx126(ButtonIcon, { icon: "arrow-up-right", label: L.open, size: "sm", onClick: onOpen })
|
|
6995
7159
|
] })
|
|
6996
7160
|
] }),
|
|
6997
|
-
fields.length > 0 && /* @__PURE__ */
|
|
6998
|
-
stages && stages.length > 0 && /* @__PURE__ */
|
|
6999
|
-
actions.length > 0 && /* @__PURE__ */
|
|
7161
|
+
fields.length > 0 && /* @__PURE__ */ jsx126(SummaryDetail, { fields, dense: true, className: "agn-record__fields" }),
|
|
7162
|
+
stages && stages.length > 0 && /* @__PURE__ */ jsx126(Path, { steps: stages, current: stage, lost, compact: pathCompact, labels: { stage: L.stage, ...L.path || {} }, className: "agn-record__path" }),
|
|
7163
|
+
actions.length > 0 && /* @__PURE__ */ jsx126("div", { className: "agn-record__actions", children: actions.map((a, i) => /* @__PURE__ */ jsx126(Button, { size: "sm", variant: a.variant || (i === 0 ? "neutral" : "ghost"), icon: a.icon, onClick: a.onClick, disabled: a.disabled, children: a.label }, a.label || i)) })
|
|
7000
7164
|
] });
|
|
7001
7165
|
}
|
|
7002
7166
|
|
|
7003
7167
|
// src/dashboard/TeamWorkloadWidget.jsx
|
|
7004
|
-
import
|
|
7005
|
-
import { Fragment as Fragment17, jsx as
|
|
7006
|
-
var
|
|
7168
|
+
import React129 from "react";
|
|
7169
|
+
import { Fragment as Fragment17, jsx as jsx127, jsxs as jsxs119 } from "react/jsx-runtime";
|
|
7170
|
+
var DEFAULT_LABELS57 = { title: "Team workload", over: "Over capacity", overCount: "over capacity", unit: "tasks", load: "workload", viewAll: "View all" };
|
|
7007
7171
|
function TeamWorkloadWidget({ members = [], title, unit, overAt = 1, onMember, viewAll, labels, className, ...rest }) {
|
|
7008
|
-
const L = { ...
|
|
7172
|
+
const L = { ...DEFAULT_LABELS57, ...labels };
|
|
7009
7173
|
const u = unit || L.unit;
|
|
7010
7174
|
const rows = members.map((m) => ({ ...m, ratio: m.value / (m.capacity || 1) }));
|
|
7011
7175
|
const overN = rows.filter((r) => r.ratio > overAt).length;
|
|
7012
|
-
return /* @__PURE__ */
|
|
7176
|
+
return /* @__PURE__ */ jsx127(Card, { title: title || L.title, icon: "users", viewAll, labels: { viewAll: L.viewAll }, actions: overN > 0 && /* @__PURE__ */ jsxs119(Tag, { tone: "warn", icon: "triangle-alert", children: [
|
|
7013
7177
|
overN,
|
|
7014
7178
|
" ",
|
|
7015
7179
|
L.overCount
|
|
7016
|
-
] }), className: cx("agn-workload", className), ...rest, children: /* @__PURE__ */
|
|
7180
|
+
] }), className: cx("agn-workload", className), ...rest, children: /* @__PURE__ */ jsx127("ul", { className: "agn-workload__list", children: rows.map((m, i) => {
|
|
7017
7181
|
const over = m.ratio > overAt;
|
|
7018
7182
|
const text = m.value + " / " + m.capacity + " " + u;
|
|
7019
|
-
return /* @__PURE__ */
|
|
7020
|
-
/* @__PURE__ */
|
|
7021
|
-
/* @__PURE__ */
|
|
7022
|
-
onMember ? /* @__PURE__ */
|
|
7023
|
-
m.role && /* @__PURE__ */
|
|
7183
|
+
return /* @__PURE__ */ jsxs119("li", { className: cx("agn-workload__row", over && "agn-workload__row--over"), children: [
|
|
7184
|
+
/* @__PURE__ */ jsx127(Avatar, { size: "sm", name: m.name, kind: m.kind || "person", status: m.status }),
|
|
7185
|
+
/* @__PURE__ */ jsxs119("div", { className: "agn-workload__who", children: [
|
|
7186
|
+
onMember ? /* @__PURE__ */ jsx127("button", { type: "button", className: "agn-workload__name agn-workload__name--link agn-focus", onClick: () => onMember(m), children: m.name }) : /* @__PURE__ */ jsx127("span", { className: "agn-workload__name", children: m.name }),
|
|
7187
|
+
m.role && /* @__PURE__ */ jsx127("span", { className: "agn-workload__role", children: m.role })
|
|
7024
7188
|
] }),
|
|
7025
|
-
/* @__PURE__ */
|
|
7026
|
-
/* @__PURE__ */
|
|
7027
|
-
/* @__PURE__ */
|
|
7028
|
-
/* @__PURE__ */
|
|
7189
|
+
/* @__PURE__ */ jsx127(ProgressBar, { className: "agn-workload__bar", size: "sm", value: Math.min(m.value, m.capacity), max: m.capacity, tone: over ? "warn" : "signal", valueText: text, labels: { working: m.name + " " + L.load } }),
|
|
7190
|
+
/* @__PURE__ */ jsx127("span", { className: "agn-workload__value agn-num", children: text }),
|
|
7191
|
+
/* @__PURE__ */ jsx127("span", { className: "agn-workload__flag", children: over && /* @__PURE__ */ jsxs119(Fragment17, { children: [
|
|
7192
|
+
/* @__PURE__ */ jsx127(Icon, { name: "triangle-alert", size: 12 }),
|
|
7029
7193
|
L.over
|
|
7030
7194
|
] }) })
|
|
7031
7195
|
] }, m.id || m.name || i);
|
|
@@ -7033,14 +7197,14 @@ function TeamWorkloadWidget({ members = [], title, unit, overAt = 1, onMember, v
|
|
|
7033
7197
|
}
|
|
7034
7198
|
|
|
7035
7199
|
// src/dashboard/ActivityWidget.jsx
|
|
7036
|
-
import
|
|
7037
|
-
import { jsx as
|
|
7200
|
+
import React130 from "react";
|
|
7201
|
+
import { jsx as jsx128, jsxs as jsxs120 } from "react/jsx-runtime";
|
|
7038
7202
|
var KINDS = { runs: ["run", "step", "agent", "deploy", "error", "success"], approvals: ["approval", "handoff", "warn"], conversations: ["call", "message", "email"], notes: ["note", "edit", "event"] };
|
|
7039
|
-
var
|
|
7203
|
+
var DEFAULT_LABELS58 = { title: "Activity", filter: "Activity type", all: "All", runs: "Runs", approvals: "Approvals", conversations: "Conversations", notes: "Notes", empty: "No activity of this type", emptyHint: "Pick another type to see more.", viewAll: "View all", show: "Show details", hide: "Hide details" };
|
|
7040
7204
|
function ActivityWidget({ items = [], types, type, defaultType = "all", onTypeChange, title, max, compact = true, viewAll, labels, className, ...rest }) {
|
|
7041
|
-
const L = { ...
|
|
7205
|
+
const L = { ...DEFAULT_LABELS58, ...labels };
|
|
7042
7206
|
const opts = types || [{ value: "all", label: L.all }, ...Object.keys(KINDS).map((k) => ({ value: k, label: L[k], kinds: KINDS[k] }))];
|
|
7043
|
-
const [own, setOwn] =
|
|
7207
|
+
const [own, setOwn] = React130.useState(defaultType);
|
|
7044
7208
|
const t = type !== void 0 ? type : own;
|
|
7045
7209
|
const set = (v) => {
|
|
7046
7210
|
if (type === void 0) setOwn(v);
|
|
@@ -7048,43 +7212,43 @@ function ActivityWidget({ items = [], types, type, defaultType = "all", onTypeCh
|
|
|
7048
7212
|
};
|
|
7049
7213
|
const cur = opts.find((o) => o.value === t);
|
|
7050
7214
|
const shown = (cur && cur.kinds ? items.filter((it) => cur.kinds.includes(it.kind)) : items).slice(0, max || void 0);
|
|
7051
|
-
return /* @__PURE__ */
|
|
7052
|
-
/* @__PURE__ */
|
|
7053
|
-
shown.length ? /* @__PURE__ */
|
|
7215
|
+
return /* @__PURE__ */ jsxs120(Card, { title: title || L.title, icon: "history", viewAll, labels: { viewAll: L.viewAll }, className: cx("agn-activity-w", className), ...rest, children: [
|
|
7216
|
+
/* @__PURE__ */ jsx128("div", { className: "agn-activity-w__filter", children: /* @__PURE__ */ jsx128(SegmentedControl, { size: "sm", options: opts.map((o) => ({ label: o.label, value: o.value })), value: t, onChange: set, label: L.filter }) }),
|
|
7217
|
+
shown.length ? /* @__PURE__ */ jsx128(ActivityTimeline, { items: shown, compact, labels: { show: L.show, hide: L.hide } }) : /* @__PURE__ */ jsx128(EmptyState, { compact: true, icon: "history", title: L.empty, children: L.emptyHint })
|
|
7054
7218
|
] });
|
|
7055
7219
|
}
|
|
7056
7220
|
|
|
7057
7221
|
// src/dashboard/QuickActions.jsx
|
|
7058
|
-
import
|
|
7059
|
-
import { jsx as
|
|
7060
|
-
var
|
|
7222
|
+
import React131 from "react";
|
|
7223
|
+
import { jsx as jsx129, jsxs as jsxs121 } from "react/jsx-runtime";
|
|
7224
|
+
var DEFAULT_LABELS59 = { title: "Quick actions" };
|
|
7061
7225
|
function QuickActions({ actions = [], onAction, columns, minTile = 168, title, labels, className, style, ...rest }) {
|
|
7062
|
-
const L = { ...
|
|
7226
|
+
const L = { ...DEFAULT_LABELS59, ...labels };
|
|
7063
7227
|
const gridStyle = columns ? { gridTemplateColumns: "repeat(" + columns + ", minmax(0, 1fr))" } : { "--agn-quick-min": minTile + "px" };
|
|
7064
|
-
const grid = /* @__PURE__ */
|
|
7228
|
+
const grid = /* @__PURE__ */ jsx129("div", { className: cx("agn-quick", !title && className), role: "group", "aria-label": title || L.title, style: title ? gridStyle : { ...gridStyle, ...style }, ...title ? {} : rest, children: actions.map((a, i) => /* @__PURE__ */ jsxs121("button", { type: "button", className: "agn-quick__tile agn-focus", disabled: a.disabled, onClick: () => {
|
|
7065
7229
|
a.onClick && a.onClick(a);
|
|
7066
7230
|
onAction && onAction(a);
|
|
7067
7231
|
}, children: [
|
|
7068
|
-
/* @__PURE__ */
|
|
7069
|
-
/* @__PURE__ */
|
|
7070
|
-
a.shortcut && /* @__PURE__ */
|
|
7071
|
-
a.badge != null && /* @__PURE__ */
|
|
7232
|
+
/* @__PURE__ */ jsxs121("span", { className: "agn-quick__top", children: [
|
|
7233
|
+
/* @__PURE__ */ jsx129(BlockIcon, { icon: a.icon, product: a.product, tone: a.tone || "signal", size: "lg" }),
|
|
7234
|
+
a.shortcut && /* @__PURE__ */ jsx129(Kbd, { size: "sm", keys: Array.isArray(a.shortcut) ? a.shortcut : String(a.shortcut).split(" "), className: "agn-quick__kbd" }),
|
|
7235
|
+
a.badge != null && /* @__PURE__ */ jsx129(Badge, { count: a.badge, solid: true, size: "sm", className: "agn-quick__badge" })
|
|
7072
7236
|
] }),
|
|
7073
|
-
/* @__PURE__ */
|
|
7074
|
-
a.description && /* @__PURE__ */
|
|
7237
|
+
/* @__PURE__ */ jsx129("span", { className: "agn-quick__label", children: a.label }),
|
|
7238
|
+
a.description && /* @__PURE__ */ jsx129("span", { className: "agn-quick__desc", children: a.description })
|
|
7075
7239
|
] }, a.id || a.label || i)) });
|
|
7076
7240
|
if (!title) return grid;
|
|
7077
|
-
return /* @__PURE__ */
|
|
7241
|
+
return /* @__PURE__ */ jsx129(Card, { title, icon: "zap", padding: "sm", className: cx("agn-quick-card", className), style, ...rest, children: grid });
|
|
7078
7242
|
}
|
|
7079
7243
|
|
|
7080
7244
|
// src/dashboard/NotificationsWidget.jsx
|
|
7081
|
-
import
|
|
7082
|
-
import { jsx as
|
|
7083
|
-
var
|
|
7245
|
+
import React132 from "react";
|
|
7246
|
+
import { jsx as jsx130 } from "react/jsx-runtime";
|
|
7247
|
+
var DEFAULT_LABELS60 = { title: "Notifications", markAll: "Mark all as read", today: "Today", yesterday: "Yesterday", empty: "You are all caught up", viewAll: "View all" };
|
|
7084
7248
|
function NotificationsWidget({ items = [], title, onMarkAll, onItem, max, locale, viewAll, labels, className, ...rest }) {
|
|
7085
|
-
const L = { ...
|
|
7086
|
-
const [readAll, setReadAll] =
|
|
7087
|
-
const [read2, setRead] =
|
|
7249
|
+
const L = { ...DEFAULT_LABELS60, ...labels };
|
|
7250
|
+
const [readAll, setReadAll] = React132.useState(false);
|
|
7251
|
+
const [read2, setRead] = React132.useState({});
|
|
7088
7252
|
const list = items.slice(0, max || void 0).map((it, i) => {
|
|
7089
7253
|
const key = it.id || String(i);
|
|
7090
7254
|
const open = onItem || it.onClick;
|
|
@@ -7095,41 +7259,41 @@ function NotificationsWidget({ items = [], title, onMarkAll, onItem, max, locale
|
|
|
7095
7259
|
} : void 0 };
|
|
7096
7260
|
});
|
|
7097
7261
|
const anyUnread = list.some((i) => i.unread);
|
|
7098
|
-
return /* @__PURE__ */
|
|
7262
|
+
return /* @__PURE__ */ jsx130(Card, { as: "div", padding: "none", viewAll, labels: { viewAll: L.viewAll }, className: cx("agn-notifs-w", className), ...rest, children: /* @__PURE__ */ jsx130(NotificationList, { bare: true, title: title || L.title, items: list, locale, onMarkAll: anyUnread ? () => {
|
|
7099
7263
|
setReadAll(true);
|
|
7100
7264
|
onMarkAll && onMarkAll();
|
|
7101
7265
|
} : void 0, labels: { title: L.title, markAll: L.markAll, today: L.today, yesterday: L.yesterday, empty: L.empty } }) });
|
|
7102
7266
|
}
|
|
7103
7267
|
|
|
7104
7268
|
// src/dashboard/AgentFlowWidget.jsx
|
|
7105
|
-
import
|
|
7106
|
-
import { Fragment as Fragment18, jsx as
|
|
7269
|
+
import React133 from "react";
|
|
7270
|
+
import { Fragment as Fragment18, jsx as jsx131, jsxs as jsxs122 } from "react/jsx-runtime";
|
|
7107
7271
|
var STATE2 = { done: "default", running: "running", error: "error", waiting: "default", upcoming: "default" };
|
|
7108
7272
|
var CAP_ICON = { done: "check", running: "loader-circle", error: "circle-alert", waiting: "pause", upcoming: "minus" };
|
|
7109
|
-
var
|
|
7273
|
+
var DEFAULT_LABELS61 = { flow: "Agent steps", done: "Done", running: "Running", error: "Failed", waiting: "Waiting", upcoming: "Not reached", live: "live runs", liveOne: "live run", open: "Open in builder" };
|
|
7110
7274
|
function AgentFlowWidget({ agent, title, steps = [], liveRuns, version, blockWidth = 160, gap = 24, onOpen, labels, className, ...rest }) {
|
|
7111
|
-
const L = { ...
|
|
7275
|
+
const L = { ...DEFAULT_LABELS61, ...labels };
|
|
7112
7276
|
const reached = (s) => s && s.state && s.state !== "upcoming";
|
|
7113
7277
|
const edgeState = (s) => s.state === "running" || s.state === "waiting" ? "running" : reached(s) ? "active" : "deleted";
|
|
7114
|
-
const head = /* @__PURE__ */
|
|
7278
|
+
const head = /* @__PURE__ */ jsxs122(Fragment18, { children: [
|
|
7115
7279
|
title || agent,
|
|
7116
|
-
version && /* @__PURE__ */
|
|
7280
|
+
version && /* @__PURE__ */ jsx131("span", { className: "agn-flow__version", children: version })
|
|
7117
7281
|
] });
|
|
7118
|
-
const actions = (liveRuns != null || onOpen) && /* @__PURE__ */
|
|
7119
|
-
liveRuns != null && /* @__PURE__ */
|
|
7282
|
+
const actions = (liveRuns != null || onOpen) && /* @__PURE__ */ jsxs122(Fragment18, { children: [
|
|
7283
|
+
liveRuns != null && /* @__PURE__ */ jsxs122(Tag, { tone: liveRuns > 0 ? "signal" : "neutral", dot: liveRuns > 0, children: [
|
|
7120
7284
|
liveRuns,
|
|
7121
7285
|
" ",
|
|
7122
7286
|
liveRuns === 1 ? L.liveOne : L.live
|
|
7123
7287
|
] }),
|
|
7124
|
-
onOpen && /* @__PURE__ */
|
|
7288
|
+
onOpen && /* @__PURE__ */ jsx131(ButtonIcon, { icon: "arrow-up-right", label: L.open, size: "sm", onClick: onOpen })
|
|
7125
7289
|
] });
|
|
7126
|
-
return /* @__PURE__ */
|
|
7290
|
+
return /* @__PURE__ */ jsx131(Card, { title: head, icon: "route", actions, padding: "none", className: cx("agn-flow-w", className), ...rest, children: /* @__PURE__ */ jsx131("div", { className: "agn-flow", role: "list", "aria-label": L.flow, children: steps.map((s, i) => {
|
|
7127
7291
|
const st = s.state || "upcoming";
|
|
7128
7292
|
const caption = st === "upcoming" ? L.upcoming : (s.runs != null ? s.runs + " \xB7 " : "") + L[st];
|
|
7129
|
-
return /* @__PURE__ */
|
|
7130
|
-
i > 0 && /* @__PURE__ */
|
|
7131
|
-
/* @__PURE__ */
|
|
7132
|
-
/* @__PURE__ */
|
|
7293
|
+
return /* @__PURE__ */ jsxs122(React133.Fragment, { children: [
|
|
7294
|
+
i > 0 && /* @__PURE__ */ jsx131("svg", { className: "agn-flow__edge", width: gap, height: 16, viewBox: "0 0 " + gap + " 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx131(CanvasEdge, { from: { x: 2, y: 8 }, to: { x: gap - 3, y: 8 }, state: edgeState(s) }) }),
|
|
7295
|
+
/* @__PURE__ */ jsxs122("div", { className: "agn-flow__step", role: "listitem", "aria-current": st === "running" ? "step" : void 0, style: { width: blockWidth }, children: [
|
|
7296
|
+
/* @__PURE__ */ jsx131(
|
|
7133
7297
|
CanvasBlock,
|
|
7134
7298
|
{
|
|
7135
7299
|
name: s.name,
|
|
@@ -7143,8 +7307,8 @@ function AgentFlowWidget({ agent, title, steps = [], liveRuns, version, blockWid
|
|
|
7143
7307
|
style: { width: blockWidth }
|
|
7144
7308
|
}
|
|
7145
7309
|
),
|
|
7146
|
-
/* @__PURE__ */
|
|
7147
|
-
/* @__PURE__ */
|
|
7310
|
+
/* @__PURE__ */ jsxs122("span", { className: cx("agn-flow__caption", "agn-flow__caption--" + st), children: [
|
|
7311
|
+
/* @__PURE__ */ jsx131(Icon, { name: CAP_ICON[st], size: 12, className: st === "running" ? "agn-flow__spin" : void 0 }),
|
|
7148
7312
|
caption
|
|
7149
7313
|
] })
|
|
7150
7314
|
] })
|
|
@@ -7153,12 +7317,12 @@ function AgentFlowWidget({ agent, title, steps = [], liveRuns, version, blockWid
|
|
|
7153
7317
|
}
|
|
7154
7318
|
|
|
7155
7319
|
// src/dashboard/LeaderboardWidget.jsx
|
|
7156
|
-
import
|
|
7157
|
-
import { Fragment as Fragment19, jsx as
|
|
7158
|
-
var
|
|
7320
|
+
import React134 from "react";
|
|
7321
|
+
import { Fragment as Fragment19, jsx as jsx132, jsxs as jsxs123 } from "react/jsx-runtime";
|
|
7322
|
+
var DEFAULT_LABELS62 = { title: "Leaderboard", period: "Period", rank: "Rank", name: "Name", value: "Value", change: "Change", up: "up", down: "down", flat: "no change", viewAll: "View all" };
|
|
7159
7323
|
function LeaderboardWidget({ rows = [], title, metric, periods, period, defaultPeriod, onPeriodChange, format = (v) => String(v), deltaFormat = (v) => (v > 0 ? "+" : "") + v, invert, highlight, max, sort = true, viewAll, labels, className, ...rest }) {
|
|
7160
|
-
const L = { ...
|
|
7161
|
-
const [own, setOwn] =
|
|
7324
|
+
const L = { ...DEFAULT_LABELS62, ...labels };
|
|
7325
|
+
const [own, setOwn] = React134.useState(defaultPeriod != null ? defaultPeriod : periods && periods.length ? typeof periods[0] === "string" ? periods[0] : periods[0].value : void 0);
|
|
7162
7326
|
const per = period !== void 0 ? period : own;
|
|
7163
7327
|
const setPer = (v) => {
|
|
7164
7328
|
if (period === void 0) setOwn(v);
|
|
@@ -7166,33 +7330,33 @@ function LeaderboardWidget({ rows = [], title, metric, periods, period, defaultP
|
|
|
7166
7330
|
};
|
|
7167
7331
|
const list = (sort ? [...rows].sort((a, b) => invert ? a.value - b.value : b.value - a.value) : rows).slice(0, max || void 0);
|
|
7168
7332
|
const top = Math.max(...list.map((r) => r.value), 1);
|
|
7169
|
-
return /* @__PURE__ */
|
|
7170
|
-
/* @__PURE__ */
|
|
7171
|
-
/* @__PURE__ */
|
|
7172
|
-
/* @__PURE__ */
|
|
7173
|
-
/* @__PURE__ */
|
|
7174
|
-
/* @__PURE__ */
|
|
7333
|
+
return /* @__PURE__ */ jsxs123(Card, { title: title || L.title, icon: "list-ordered", viewAll, labels: { viewAll: L.viewAll }, actions: periods && /* @__PURE__ */ jsx132(SegmentedControl, { size: "sm", options: periods, value: per, onChange: setPer, label: L.period }), className: cx("agn-leader", className), ...rest, children: [
|
|
7334
|
+
/* @__PURE__ */ jsxs123("div", { className: "agn-leader__head", "aria-hidden": "true", children: [
|
|
7335
|
+
/* @__PURE__ */ jsx132("span", { children: "#" }),
|
|
7336
|
+
/* @__PURE__ */ jsx132("span", { children: L.name }),
|
|
7337
|
+
/* @__PURE__ */ jsx132("span", { className: "agn-leader__head-value", children: metric || L.value }),
|
|
7338
|
+
/* @__PURE__ */ jsx132("span", { children: L.change })
|
|
7175
7339
|
] }),
|
|
7176
|
-
/* @__PURE__ */
|
|
7340
|
+
/* @__PURE__ */ jsx132("ol", { className: "agn-leader__list", children: list.map((r, i) => {
|
|
7177
7341
|
const d = r.delta;
|
|
7178
7342
|
const dir = d == null || d === 0 ? "flat" : d > 0 ? "up" : "down";
|
|
7179
7343
|
const good = dir === "flat" ? null : dir === "up" !== !!invert;
|
|
7180
|
-
return /* @__PURE__ */
|
|
7181
|
-
/* @__PURE__ */
|
|
7182
|
-
/* @__PURE__ */
|
|
7183
|
-
/* @__PURE__ */
|
|
7184
|
-
/* @__PURE__ */
|
|
7185
|
-
/* @__PURE__ */
|
|
7186
|
-
r.sub && /* @__PURE__ */
|
|
7344
|
+
return /* @__PURE__ */ jsxs123("li", { className: cx("agn-leader__row", highlight != null && (r.id === highlight || r.name === highlight) && "agn-leader__row--hl"), children: [
|
|
7345
|
+
/* @__PURE__ */ jsx132("span", { className: "agn-leader__rank agn-num", children: i + 1 }),
|
|
7346
|
+
/* @__PURE__ */ jsxs123("span", { className: "agn-leader__who", children: [
|
|
7347
|
+
/* @__PURE__ */ jsx132(Avatar, { size: "sm", name: r.name, kind: r.kind || "agent", product: r.product, icon: r.icon }),
|
|
7348
|
+
/* @__PURE__ */ jsxs123("span", { className: "agn-leader__text", children: [
|
|
7349
|
+
/* @__PURE__ */ jsx132("span", { className: "agn-leader__name", children: r.name }),
|
|
7350
|
+
r.sub && /* @__PURE__ */ jsx132("span", { className: "agn-leader__sub", children: r.sub })
|
|
7187
7351
|
] })
|
|
7188
7352
|
] }),
|
|
7189
|
-
/* @__PURE__ */
|
|
7190
|
-
/* @__PURE__ */
|
|
7191
|
-
/* @__PURE__ */
|
|
7353
|
+
/* @__PURE__ */ jsxs123("span", { className: "agn-leader__measure", children: [
|
|
7354
|
+
/* @__PURE__ */ jsx132("span", { className: "agn-leader__bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx132("span", { className: "agn-leader__fill", style: { width: Math.max(2, r.value / top * 100) + "%" } }) }),
|
|
7355
|
+
/* @__PURE__ */ jsx132("span", { className: "agn-leader__value agn-num", children: format(r.value) })
|
|
7192
7356
|
] }),
|
|
7193
|
-
/* @__PURE__ */
|
|
7194
|
-
/* @__PURE__ */
|
|
7195
|
-
/* @__PURE__ */
|
|
7357
|
+
/* @__PURE__ */ jsx132("span", { className: cx("agn-leader__delta", "agn-leader__delta--" + (good == null ? "flat" : good ? "ok" : "bad")), children: d != null && /* @__PURE__ */ jsxs123(Fragment19, { children: [
|
|
7358
|
+
/* @__PURE__ */ jsx132(Icon, { name: dir === "up" ? "arrow-up-right" : dir === "down" ? "arrow-down-right" : "minus", size: 12 }),
|
|
7359
|
+
/* @__PURE__ */ jsxs123("span", { className: "agn-sr", children: [
|
|
7196
7360
|
L[dir],
|
|
7197
7361
|
" "
|
|
7198
7362
|
] }),
|
|
@@ -7204,14 +7368,14 @@ function LeaderboardWidget({ rows = [], title, metric, periods, period, defaultP
|
|
|
7204
7368
|
}
|
|
7205
7369
|
|
|
7206
7370
|
// src/dashboard/AgendaWidget.jsx
|
|
7207
|
-
import
|
|
7208
|
-
import { Fragment as Fragment20, jsx as
|
|
7371
|
+
import React135 from "react";
|
|
7372
|
+
import { Fragment as Fragment20, jsx as jsx133, jsxs as jsxs124 } from "react/jsx-runtime";
|
|
7209
7373
|
var KIND_ICON2 = { run: "play", review: "user-check", call: "phone", maintenance: "wrench", deploy: "rocket", meeting: "users" };
|
|
7210
|
-
var
|
|
7374
|
+
var DEFAULT_LABELS63 = { title: "Today", add: "Schedule a run", empty: "Nothing scheduled", emptyHint: "Scheduled runs and reviews for this day appear here.", now: "Now", done: "Done", live: "Live", soon: "in {n} min", allDay: "All day", run: "Scheduled run", review: "Review", call: "Call", maintenance: "Maintenance", deploy: "Deploy", meeting: "Meeting", viewAll: "Open calendar" };
|
|
7211
7375
|
var toDate3 = (d) => d instanceof Date ? d : new Date(d);
|
|
7212
7376
|
var sameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
7213
7377
|
function AgendaWidget({ events = [], date, now, locale = "en", title, onEvent, onAdd, max, viewAll, labels, className, ...rest }) {
|
|
7214
|
-
const L = { ...
|
|
7378
|
+
const L = { ...DEFAULT_LABELS63, ...labels };
|
|
7215
7379
|
locale = /^en$/i.test(locale) ? "en-GB" : locale;
|
|
7216
7380
|
const nowD = now ? toDate3(now) : /* @__PURE__ */ new Date();
|
|
7217
7381
|
const day = date ? toDate3(date) : nowD;
|
|
@@ -7224,42 +7388,42 @@ function AgendaWidget({ events = [], date, now, locale = "en", title, onEvent, o
|
|
|
7224
7388
|
}).filter((e) => sameDay2(e._s, day)).sort((a, b) => a.allDay ? -1 : b.allDay ? 1 : a._s - b._s).slice(0, max || void 0);
|
|
7225
7389
|
const showNow = sameDay2(day, nowD);
|
|
7226
7390
|
const nowAt = showNow ? list.findIndex((e) => !e.allDay && !e._past && !e._live) : -1;
|
|
7227
|
-
const actions = /* @__PURE__ */
|
|
7228
|
-
/* @__PURE__ */
|
|
7229
|
-
onAdd && /* @__PURE__ */
|
|
7391
|
+
const actions = /* @__PURE__ */ jsxs124(Fragment20, { children: [
|
|
7392
|
+
/* @__PURE__ */ jsx133("span", { className: "agn-agenda__date agn-num", children: dayText }),
|
|
7393
|
+
onAdd && /* @__PURE__ */ jsx133(ButtonIcon, { icon: "calendar-plus", label: L.add, size: "sm", onClick: onAdd })
|
|
7230
7394
|
] });
|
|
7231
|
-
const nowLine = /* @__PURE__ */
|
|
7395
|
+
const nowLine = /* @__PURE__ */ jsx133("li", { className: "agn-agenda__now", "aria-hidden": "true", children: /* @__PURE__ */ jsxs124("span", { className: "agn-agenda__now-label agn-num", children: [
|
|
7232
7396
|
L.now,
|
|
7233
7397
|
" ",
|
|
7234
7398
|
tm(nowD)
|
|
7235
7399
|
] }) }, "now");
|
|
7236
|
-
return /* @__PURE__ */
|
|
7400
|
+
return /* @__PURE__ */ jsx133(Card, { title: title || L.title, icon: "calendar-days", actions, viewAll, labels: { viewAll: L.viewAll }, padding: "none", className: cx("agn-agenda", className), ...rest, children: list.length === 0 ? /* @__PURE__ */ jsx133("div", { className: "agn-agenda__empty", children: /* @__PURE__ */ jsx133(EmptyState, { compact: true, icon: "calendar", title: L.empty, children: L.emptyHint }) }) : /* @__PURE__ */ jsxs124("ol", { className: "agn-agenda__list", children: [
|
|
7237
7401
|
list.map((e, i) => {
|
|
7238
7402
|
const mins = Math.round((e._s - nowD) / 6e4);
|
|
7239
7403
|
const Title = onEvent ? "button" : "span";
|
|
7240
|
-
return /* @__PURE__ */
|
|
7404
|
+
return /* @__PURE__ */ jsxs124(React135.Fragment, { children: [
|
|
7241
7405
|
i === nowAt && nowLine,
|
|
7242
|
-
/* @__PURE__ */
|
|
7243
|
-
/* @__PURE__ */
|
|
7406
|
+
/* @__PURE__ */ jsxs124("li", { className: cx("agn-agenda__item", "agn-agenda__item--" + (e.tone || "signal"), e._past && "agn-agenda__item--past", e._live && "agn-agenda__item--live"), children: [
|
|
7407
|
+
/* @__PURE__ */ jsx133("span", { className: "agn-agenda__time agn-num", children: e.allDay ? L.allDay : /* @__PURE__ */ jsxs124(Fragment20, { children: [
|
|
7244
7408
|
tm(e._s),
|
|
7245
|
-
/* @__PURE__ */
|
|
7409
|
+
/* @__PURE__ */ jsx133("span", { className: "agn-agenda__end", children: tm(e._e) })
|
|
7246
7410
|
] }) }),
|
|
7247
|
-
/* @__PURE__ */
|
|
7248
|
-
/* @__PURE__ */
|
|
7249
|
-
/* @__PURE__ */
|
|
7250
|
-
/* @__PURE__ */
|
|
7251
|
-
e.kind && /* @__PURE__ */
|
|
7252
|
-
/* @__PURE__ */
|
|
7411
|
+
/* @__PURE__ */ jsx133("span", { className: "agn-agenda__bar", "aria-hidden": "true" }),
|
|
7412
|
+
/* @__PURE__ */ jsxs124("span", { className: "agn-agenda__main", children: [
|
|
7413
|
+
/* @__PURE__ */ jsx133(Title, { type: onEvent ? "button" : void 0, className: cx("agn-agenda__title", onEvent && "agn-agenda__title--link agn-focus"), onClick: onEvent ? () => onEvent(e) : void 0, children: e.title }),
|
|
7414
|
+
/* @__PURE__ */ jsxs124("span", { className: "agn-agenda__meta", children: [
|
|
7415
|
+
e.kind && /* @__PURE__ */ jsxs124("span", { className: "agn-agenda__kind", children: [
|
|
7416
|
+
/* @__PURE__ */ jsx133(Icon, { name: KIND_ICON2[e.kind] || "circle", size: 12 }),
|
|
7253
7417
|
L[e.kind] || e.kind
|
|
7254
7418
|
] }),
|
|
7255
|
-
e.tenant && /* @__PURE__ */
|
|
7256
|
-
e.meta && /* @__PURE__ */
|
|
7419
|
+
e.tenant && /* @__PURE__ */ jsx133("span", { className: "agn-agenda__tenant", children: e.tenant }),
|
|
7420
|
+
e.meta && /* @__PURE__ */ jsx133("span", { children: e.meta })
|
|
7257
7421
|
] })
|
|
7258
7422
|
] }),
|
|
7259
|
-
/* @__PURE__ */
|
|
7260
|
-
/* @__PURE__ */
|
|
7423
|
+
/* @__PURE__ */ jsx133("span", { className: "agn-agenda__status", children: e._live ? /* @__PURE__ */ jsx133(Tag, { tone: "signal", dot: true, children: L.live }) : e._past ? /* @__PURE__ */ jsxs124("span", { className: "agn-agenda__done", children: [
|
|
7424
|
+
/* @__PURE__ */ jsx133(Icon, { name: "check", size: 12 }),
|
|
7261
7425
|
L.done
|
|
7262
|
-
] }) : showNow && mins > 0 && mins <= 60 ? /* @__PURE__ */
|
|
7426
|
+
] }) : showNow && mins > 0 && mins <= 60 ? /* @__PURE__ */ jsx133("span", { className: "agn-agenda__soon agn-num", children: L.soon.replace("{n}", mins) }) : null })
|
|
7263
7427
|
] })
|
|
7264
7428
|
] }, e.id || i);
|
|
7265
7429
|
}),
|
|
@@ -7268,30 +7432,30 @@ function AgendaWidget({ events = [], date, now, locale = "en", title, onEvent, o
|
|
|
7268
7432
|
}
|
|
7269
7433
|
|
|
7270
7434
|
// src/dashboard/OnboardingWidget.jsx
|
|
7271
|
-
import
|
|
7272
|
-
import { jsx as
|
|
7273
|
-
var
|
|
7435
|
+
import React136 from "react";
|
|
7436
|
+
import { jsx as jsx134 } from "react/jsx-runtime";
|
|
7437
|
+
var DEFAULT_LABELS64 = { title: "Get started", hide: "Hide", complete: "Setup complete", completeHint: "Every step is done. You can hide this card.", progress: "completed", done: "Done", optional: "optional" };
|
|
7274
7438
|
function OnboardingWidget({ title, heading, description, steps = [], onDismiss, labels, className, ...rest }) {
|
|
7275
|
-
const L = { ...
|
|
7439
|
+
const L = { ...DEFAULT_LABELS64, ...labels };
|
|
7276
7440
|
const all = steps.length > 0 && steps.every((s) => s.done);
|
|
7277
|
-
return /* @__PURE__ */
|
|
7441
|
+
return /* @__PURE__ */ jsx134(Card, { title: title || L.title, icon: "rocket", actions: onDismiss && /* @__PURE__ */ jsx134(ButtonIcon, { icon: "x", label: L.hide, size: "xs", onClick: onDismiss }), className: cx("agn-onboard", className), ...rest, children: all ? /* @__PURE__ */ jsx134(EmptyState, { compact: true, icon: "circle-check", title: L.complete, children: L.completeHint }) : /* @__PURE__ */ jsx134(SetupAssistant, { bare: true, title: heading, description, steps, labels: { progress: L.progress, done: L.done, optional: L.optional } }) });
|
|
7278
7442
|
}
|
|
7279
7443
|
|
|
7280
7444
|
// src/dashboard/CommentsWidget.jsx
|
|
7281
|
-
import
|
|
7282
|
-
import { jsx as
|
|
7283
|
-
var
|
|
7284
|
-
var withMentions = (text) => typeof text !== "string" ? text : text.split(/(@[\p{L}\p{N}_.-]+)/u).map((p, i) => p.startsWith("@") && p.length > 1 ? /* @__PURE__ */
|
|
7445
|
+
import React137 from "react";
|
|
7446
|
+
import { jsx as jsx135, jsxs as jsxs125 } from "react/jsx-runtime";
|
|
7447
|
+
var DEFAULT_LABELS65 = { title: "Comments", placeholder: "Add a comment \u2014 @ mentions a teammate", submit: "Comment", empty: "No comments yet", emptyHint: "Start the thread; mention a teammate with @.", now: "now", reply: "Reply", like: "Like", liked: "Liked", attach: "Attach file", mention: "Mention someone", resolved: "Resolved" };
|
|
7448
|
+
var withMentions = (text) => typeof text !== "string" ? text : text.split(/(@[\p{L}\p{N}_.-]+)/u).map((p, i) => p.startsWith("@") && p.length > 1 ? /* @__PURE__ */ jsx135("span", { className: "agn-comments__mention", children: p }, i) : p);
|
|
7285
7449
|
function CommentsWidget({ comments = [], user, onSubmit, onLike, onReply, title, maxHeight = 360, labels, className, ...rest }) {
|
|
7286
|
-
const L = { ...
|
|
7287
|
-
const [added, setAdded] =
|
|
7450
|
+
const L = { ...DEFAULT_LABELS65, ...labels };
|
|
7451
|
+
const [added, setAdded] = React137.useState([]);
|
|
7288
7452
|
const all = [...comments, ...added];
|
|
7289
7453
|
const submit = (v) => {
|
|
7290
7454
|
if (onSubmit) onSubmit(v);
|
|
7291
7455
|
else setAdded([...added, { id: "local-" + added.length, author: user || "", time: L.now, text: v }]);
|
|
7292
7456
|
};
|
|
7293
|
-
return /* @__PURE__ */
|
|
7294
|
-
/* @__PURE__ */
|
|
7457
|
+
return /* @__PURE__ */ jsxs125(Card, { title: title || L.title, icon: "message-square", count: all.length, padding: "none", className: cx("agn-comments", className), ...rest, children: [
|
|
7458
|
+
/* @__PURE__ */ jsx135("div", { className: "agn-comments__list", style: { maxHeight }, children: all.length === 0 ? /* @__PURE__ */ jsx135(EmptyState, { compact: true, icon: "message-square", title: L.empty, children: L.emptyHint }) : /* @__PURE__ */ jsx135(Feed, { children: all.map((c, i) => /* @__PURE__ */ jsx135(
|
|
7295
7459
|
FeedPost,
|
|
7296
7460
|
{
|
|
7297
7461
|
author: c.author,
|
|
@@ -7306,16 +7470,17 @@ function CommentsWidget({ comments = [], user, onSubmit, onLike, onReply, title,
|
|
|
7306
7470
|
onLike: onLike ? () => onLike(c) : void 0,
|
|
7307
7471
|
onReply: onReply ? () => onReply(c) : void 0,
|
|
7308
7472
|
labels: { reply: L.reply, like: L.like, liked: L.liked },
|
|
7309
|
-
actions: c.resolved ? /* @__PURE__ */
|
|
7473
|
+
actions: c.resolved ? /* @__PURE__ */ jsx135(Tag, { tone: "ok", icon: "circle-check", children: L.resolved }) : void 0,
|
|
7310
7474
|
children: withMentions(c.text)
|
|
7311
7475
|
},
|
|
7312
7476
|
c.id || i
|
|
7313
7477
|
)) }) }),
|
|
7314
|
-
/* @__PURE__ */
|
|
7478
|
+
/* @__PURE__ */ jsx135("div", { className: "agn-comments__composer", children: /* @__PURE__ */ jsx135(Publisher, { user, placeholder: L.placeholder, submitLabel: L.submit, onSubmit: submit, labels: { placeholder: L.placeholder, submit: L.submit, attach: L.attach, mention: L.mention } }) })
|
|
7315
7479
|
] });
|
|
7316
7480
|
}
|
|
7317
7481
|
export {
|
|
7318
7482
|
Accordion,
|
|
7483
|
+
ActivityBar,
|
|
7319
7484
|
ActivityTimeline,
|
|
7320
7485
|
ActivityWidget,
|
|
7321
7486
|
AgendaWidget,
|