@epam/ai-dial-chat-shared 1.3.0-dev.35 → 1.3.0-dev.353

package/components/NotificationStack/NotificationStack.js

@@ -0,0 +1,111 @@
+import { mergeClasses as e } from "../../utils/merge-class.js";
+import { copyToClipboard as t } from "../../utils/copy-to-clipboard.js";
+import { DIAL_ICON_SIZE as n, DIAL_KIT_ICON_STROKE as r, GhostIconButton as i, LiveRegion as a, LiveRegionElement as o, Notification as s } from "@epam/ai-dial-ui-kit";
+import { memo as c, useEffect as l, useLayoutEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { IconCopy as _ } from "@tabler/icons-react";
+import { createPortal as v } from "react-dom";
+//#region src/components/NotificationStack/NotificationStack.tsx
+var y = 2e3, b = "pointer-events-none fixed inset-x-0 bottom-[calc(1.5rem+env(safe-area-inset-bottom))] z-70 flex max-h-[calc(100dvh-3rem)] flex-col items-center gap-2 overflow-y-auto px-4 desktop:inset-s-auto desktop:me-6 desktop:w-[min(600px,calc(100vw-3rem))] desktop:items-end desktop:px-0", x = ({ requestId: s, labels: c, className: u }) => {
+	let [d, f] = p("idle");
+	l(() => {
+		if (d === "idle") return;
+		let e = window.setTimeout(() => f("idle"), y);
+		return () => window.clearTimeout(e);
+	}, [d]);
+	let m = async () => {
+		try {
+			let e = await t(s);
+			f(e ? "copied" : "failed");
+		} catch {
+			f("failed");
+		}
+	}, v = "";
+	return d === "copied" ? v = c.requestIdCopied : d === "failed" && (v = c.requestIdCopyFailed), /* @__PURE__ */ g("div", {
+		className: e("mt-1 flex min-w-0 items-center gap-1", u),
+		children: [
+			/* @__PURE__ */ g("span", {
+				className: "text-start",
+				children: [c.requestId, ":"]
+			}),
+			/* @__PURE__ */ h("span", {
+				dir: "ltr",
+				className: "min-w-0 truncate",
+				children: s
+			}),
+			/* @__PURE__ */ h(i, {
+				icon: /* @__PURE__ */ h(_, {
+					size: n.SM,
+					"aria-hidden": !0,
+					stroke: r
+				}),
+				"aria-label": c.copyRequestIdAriaLabel,
+				onClick: () => void m()
+			}),
+			/* @__PURE__ */ h(a, {
+				visuallyHidden: !0,
+				as: o.Span,
+				children: v
+			})
+		]
+	});
+}, S = c(({ item: e, onDismiss: t, dismissDelayMs: n, labels: r, requestIdClassName: i }) => {
+	l(() => {
+		if (e.requestId || e.action) return;
+		let r = setTimeout(() => t(e.id), n);
+		return () => clearTimeout(r);
+	}, [
+		e.id,
+		e.requestId,
+		e.action,
+		t,
+		n
+	]);
+	let a = d(() => /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
+		className: "max-h-[30vh] overflow-y-auto wrap-anywhere",
+		children: e.message
+	}), e.requestId && /* @__PURE__ */ h(x, {
+		requestId: e.requestId,
+		labels: r,
+		className: i
+	})] }), [
+		e.message,
+		e.requestId,
+		r,
+		i
+	]);
+	return /* @__PURE__ */ h(s, {
+		className: "pointer-events-auto w-full max-w-[min(600px,100%)] desktop:w-auto",
+		variant: e.variant,
+		title: e.title,
+		message: a,
+		action: e.action,
+		closable: !0,
+		closeAriaLabel: r.close,
+		onClose: () => t(e.id)
+	});
+}), C = c(({ items: e, onDismiss: t, labels: n, dismissDelayMs: r = 5e3, className: i = b, requestIdClassName: a = "dial-tiny-text" }) => {
+	let o = f(null), s = f(/* @__PURE__ */ new Set()), c = d(() => ({
+		requestId: n?.requestId ?? "Request ID",
+		copyRequestIdAriaLabel: n?.copyRequestIdAriaLabel ?? "Copy request ID",
+		requestIdCopied: n?.requestIdCopied ?? "Request ID copied",
+		requestIdCopyFailed: n?.requestIdCopyFailed ?? "Couldn't copy request ID",
+		close: n?.close ?? "Close notification"
+	}), [n]);
+	return u(() => {
+		let t = o.current, n = s.current;
+		t && e.some(({ id: e }) => !n.has(e)) && (t.scrollTop = t.scrollHeight), s.current = new Set(e.map(({ id: e }) => e));
+	}, [e]), e.length ? v(/* @__PURE__ */ h("div", {
+		ref: o,
+		className: i,
+		children: e.map((e) => /* @__PURE__ */ h(S, {
+			item: e,
+			onDismiss: t,
+			dismissDelayMs: r,
+			labels: c,
+			requestIdClassName: a
+		}, e.id))
+	}), document.body) : null;
+});
+//#endregion
+export { C as NotificationStack };

package/components/PanelEmptyState/PanelEmptyState.d.ts

@@ -0,0 +1,32 @@
+import { FC, ReactNode } from 'react';
+/** CSS custom-property overrides for the `PanelEmptyState` component. */
+export interface PanelEmptyStateColors {
+    /** Label text color. */
+    label?: string;
+    /** Description text color. */
+    description?: string;
+}
+/** Props for `PanelEmptyState`. */
+export interface PanelEmptyStateProps {
+    /** Primary message of the empty state. */
+    label: string;
+    /** Secondary line under the label, e.g. what to do next. */
+    description?: string;
+    /** Optional way forward, such as a button, rendered under the text. */
+    action?: ReactNode;
+    /** Color overrides applied as CSS custom properties. */
+    colors?: PanelEmptyStateColors;
+    /** CSS class applied to the label text, on top of the kit's title typography. */
+    labelClassName?: string;
+    /** CSS class applied to the description text, on top of the kit's description typography. */
+    descriptionClassName?: string;
+    /** CSS class applied to the empty-state container. */
+    containerClassName?: string;
+    /** Decorative illustration above the label. Defaults to the kit's `NoDataContent` illustration. */
+    icon?: ReactNode;
+    /** Announces the empty state to assistive tech as it appears, e.g. after a search. */
+    live?: boolean;
+}
+/** Centered empty-state block for use inside a sidebar panel body. */
+export declare const PanelEmptyState: FC<PanelEmptyStateProps>;
+//# sourceMappingURL=PanelEmptyState.d.ts.map

package/components/PanelEmptyState/PanelEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelEmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/PanelEmptyState/PanelEmptyState.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,yEAAyE;AACzE,MAAM,WAAW,qBAAqB;IACpC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,mCAAmC;AACnC,MAAM,WAAW,oBAAoB;IACnC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wDAAwD;IACxD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6FAA6F;IAC7F,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sFAAsF;IACtF,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,sEAAsE;AACtE,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAmCpD,CAAC"}

package/components/PanelEmptyState/PanelEmptyState.js

@@ -5,14 +5,24 @@ import { NoDataContent as r } from "@epam/ai-dial-ui-kit";
 import { memo as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/PanelEmptyState/PanelEmptyState.tsx
-var o = i(({ label: i, colors: o, labelClassName: s = "dial-tiny-text", containerClassName: c, icon: l }) => /* @__PURE__ */ a("div", {
-	style: t({ "--pes-label-color": o?.label }),
-	children: /* @__PURE__ */ a(r, {
-		title: i,
-		icon: l,
-		titleClassName: e(n.label, s),
-		className: c
-	})
-}));
+var o = i(({ label: i, description: o, action: s, colors: c, labelClassName: l, descriptionClassName: u, containerClassName: d, icon: f, live: p }) => {
+	let m = t({
+		"--pes-label-color": c?.label,
+		"--pes-description-color": c?.description
+	});
+	return /* @__PURE__ */ a("div", {
+		style: m,
+		children: /* @__PURE__ */ a(r, {
+			title: i,
+			description: o,
+			action: s,
+			icon: f,
+			live: p,
+			titleClassName: e(n.label, l),
+			descriptionClassName: e(n.description, u),
+			className: d
+		})
+	});
+});
 //#endregion
 export { o as PanelEmptyState };

package/components/PanelEmptyState/PanelEmptyState.module.scss.js

@@ -1,3 +1,7 @@
-var e = { label: "_label_12p89_1" };
+//#region src/components/PanelEmptyState/PanelEmptyState.module.scss
+var e = "_label_1qwvo_1", t = "_description_1qwvo_5", n = {
+	label: e,
+	description: t
+};
 //#endregion
-export { e as default };
+export { n as default, t as description, e as label };

package/components/ResourceSummary/ResourceSummary.d.ts

@@ -0,0 +1,49 @@
+import { FC, ReactNode } from 'react';
+import { EntityHeaderItem } from '../../models/entity';
+/** CSS custom-property overrides for the `ResourceSummary` row. */
+export interface ResourceSummaryColors {
+    /** Row border color. Defaults to `--stroke-tertiary`. */
+    border?: string;
+    /** Row background color. Defaults to `--bg-layer-sunken`. */
+    background?: string;
+    /** Version tag border color. Defaults to `--stroke-tertiary`. */
+    versionTagBorder?: string;
+    /** Version tag background color. Defaults to `--bg-control-accent-alpha`. */
+    versionTagBackground?: string;
+    /** Version tag text color. Defaults to `--text-accent`. */
+    versionTagText?: string;
+}
+/** Typography overrides for the `ResourceSummary` row. */
+export interface ResourceSummaryTypography {
+    /** Typography class applied to the version tag. Defaults to `'dial-tiny-text'`. */
+    versionTagClassName?: string;
+}
+/** Style overrides for `ResourceSummary`. */
+export interface ResourceSummaryStyles {
+    /** Color overrides applied as CSS custom properties. */
+    colors?: ResourceSummaryColors;
+    /** Typography class overrides. */
+    typography?: ResourceSummaryTypography;
+}
+/** Props for `ResourceSummary`. */
+export interface ResourceSummaryProps {
+    /** Entity shown in the row as an icon, type label, name, and version tag. Ignored when `children` is set. */
+    item?: EntityHeaderItem;
+    /** Row content rendered instead of the entity header and version tag. */
+    children?: ReactNode;
+    /** Version tag text; `{version}` is replaced with `item.version`. The tag is omitted when `item.version` is empty. Defaults to `'Version {version} · current'`. */
+    versionLabel?: string;
+    /** Whether the version is shown as a trailing tag. When `false` it is shown inline after the name instead. Defaults to `true`. */
+    hasVersionTag?: boolean;
+    /** Size of the entity icon. Defaults to `40`. */
+    iconSize?: number;
+    /** CSS class applied to the row. */
+    className?: string;
+    /** Style overrides. */
+    styles?: ResourceSummaryStyles;
+    /** Color overrides applied as CSS custom properties. Prefer `styles.colors`. */
+    colors?: ResourceSummaryColors;
+}
+/** Bordered summary row pairing an entity's identity block with its current-version tag. */
+export declare const ResourceSummary: FC<ResourceSummaryProps>;
+//# sourceMappingURL=ResourceSummary.d.ts.map

package/components/ResourceSummary/ResourceSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ResourceSummary/ResourceSummary.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAM5D,mEAAmE;AACnE,MAAM,WAAW,qBAAqB;IACpC,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,0DAA0D;AAC1D,MAAM,WAAW,yBAAyB;IACxC,mFAAmF;IACnF,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,6CAA6C;AAC7C,MAAM,WAAW,qBAAqB;IACpC,wDAAwD;IACxD,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,kCAAkC;IAClC,UAAU,CAAC,EAAE,yBAAyB,CAAC;CACxC;AAED,mCAAmC;AACnC,MAAM,WAAW,oBAAoB;IACnC,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mKAAmK;IACnK,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kIAAkI;IAClI,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,gFAAgF;IAChF,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AAED,4FAA4F;AAC5F,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2DpD,CAAC"}

package/components/ResourceSummary/ResourceSummary.module.scss.js

@@ -1,6 +1,7 @@
-var e = {
-	row: "_row_1csuq_1",
-	versionTag: "_versionTag_1csuq_7"
+//#region src/components/ResourceSummary/ResourceSummary.module.scss
+var e = "_row_1csuq_1", t = "_versionTag_1csuq_7", n = {
+	row: e,
+	versionTag: t
 };
 //#endregion
-export { e as default };
+export { n as default, e as row, t as versionTag };

package/components/TextRefinementField/TextRefinementField.d.ts

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+import { TextRefinementResult } from '../../hooks/useTextRefinement';
+import { TextRefinementLabels } from '../../models/text-refinement';
+/** Props for `TextRefinementField`. */
+export interface TextRefinementFieldProps {
+    /** When false, renders `children` alone — no label row, actions, or feedback. */
+    isEnabled: boolean;
+    /** Id of the labelled control; also the prefix for the label and error ids. */
+    fieldId: string;
+    /** Visible field label; names the group. */
+    label: string;
+    /** Class applied to the `<label>`, after the kit `Label` defaults. */
+    labelClassName?: string;
+    /** Marks the label as required. */
+    required?: boolean;
+    /** Action, status, and error copy. */
+    labels?: TextRefinementLabels;
+    /** The field's `useTextRefinement` result. */
+    refinement: TextRefinementResult;
+    /** Disables both actions. */
+    disabled: boolean;
+    /** Class applied to the status message and the error message. */
+    feedbackClassName?: string;
+    /** Class applied to the error message, after `feedbackClassName`. */
+    errorClassName?: string;
+    /** Caption shown at the end of the row below the control, beside the refinement status — e.g. a character counter. */
+    caption?: string;
+    /** The refinable control, whose id must equal `fieldId`; it is made read-only while a request is pending. */
+    children: ReactNode;
+}
+/** Label row with Refine, Restore original and Regenerate actions and live feedback around one refinable field. */
+export declare const TextRefinementField: FC<TextRefinementFieldProps>;
+//# sourceMappingURL=TextRefinementField.d.ts.map

package/components/TextRefinementField/TextRefinementField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextRefinementField.d.ts","sourceRoot":"","sources":["../../../src/components/TextRefinementField/TextRefinementField.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA2B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAGzE,uCAAuC;AACvC,MAAM,WAAW,wBAAwB;IACvC,iFAAiF;IACjF,SAAS,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B,8CAA8C;IAC9C,UAAU,EAAE,oBAAoB,CAAC;IACjC,6BAA6B;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sHAAsH;IACtH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6GAA6G;IAC7G,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,mHAAmH;AACnH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA2K5D,CAAC"}

package/components/TextRefinementField/TextRefinementField.js

@@ -1,86 +1,115 @@
 import { mergeClasses as e } from "../../utils/merge-class.js";
 import { TextRefinementState as t } from "../../hooks/useTextRefinement.js";
-import { CaptionText as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, ElementSize as a, ErrorText as o, GhostButton as s, Label as c, Spinner as l } from "@epam/ai-dial-ui-kit";
-import { useRef as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { IconSparkles as m } from "@tabler/icons-react";
+import { CaptionText as n, DIAL_ICON_SIZE as r, DIAL_KIT_ICON_STROKE as i, ElementSize as a, ErrorText as o, GhostButton as s, Label as c, LiveRegionPoliteness as l, Spinner as u } from "@epam/ai-dial-ui-kit";
+import { useLayoutEffect as d, useRef as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconRestore as g, IconSparkles as _ } from "@tabler/icons-react";
 //#region src/components/TextRefinementField/TextRefinementField.tsx
-var h = ({ isEnabled: h, fieldId: g, label: _, labelClassName: v, required: y, labels: b, refinement: x, disabled: S, feedbackClassName: C, errorClassName: w, children: T }) => {
-	let E = u(null);
-	if (!h) return /* @__PURE__ */ f(d, { children: T });
-	let D = x.state === t.Error, O = {
+var v = ({ isEnabled: v, fieldId: y, label: b, labelClassName: x, required: S, labels: C, refinement: w, disabled: T, feedbackClassName: E, errorClassName: D, caption: O, children: k }) => {
+	let A = f(null), j = f(null), M = v && w.isPending;
+	d(() => {
+		if (!M) return;
+		let e = Array.from(j.current?.querySelectorAll("input, textarea") ?? []).find((e) => e.id === y);
+		if (!e) return;
+		let t = e.readOnly;
+		return e.readOnly = !0, () => {
+			e.readOnly = t;
+		};
+	}, [M, y]);
+	let N = O && /* @__PURE__ */ m(n, {
+		text: O,
+		className: "ms-auto shrink-0 text-end"
+	});
+	if (!v) return N ? /* @__PURE__ */ h("div", {
+		className: "flex min-w-0 flex-col gap-1",
+		children: [k, N]
+	}) : /* @__PURE__ */ m(p, { children: k });
+	let P = w.state === t.Error, F = w.canUndo, I = C?.refineWithAiLabel ?? "Refine with AI";
+	M ? I = C?.refineRefiningLabel ?? "Refining" : F && (I = C?.refineRegenerateLabel ?? "Regenerate");
+	let L = w.state === t.Pending || w.state === t.Success || w.state === t.Restored, R = {
 		[t.Idle]: "",
-		[t.Pending]: b?.refinePendingAriaLabel ?? "Refining text",
-		[t.Success]: b?.refineSuccessAriaLabel ?? "Text refined. Undo is available.",
-		[t.Restored]: b?.refineUndoAriaLabel ?? "Original text restored.",
-		[t.Unchanged]: b?.refineUnchangedAriaLabel ?? "No changes were needed.",
+		[t.Pending]: C?.refinePendingAriaLabel ?? "Refining text",
+		[t.Success]: C?.refineSuccessAriaLabel ?? "Text refined",
+		[t.Restored]: C?.refineUndoAriaLabel ?? "Original text restored.",
+		[t.Unchanged]: C?.refineUnchangedAriaLabel ?? "No changes were needed.",
 		[t.Error]: ""
-	}[x.state];
-	return /* @__PURE__ */ p("div", {
+	}[w.state];
+	return /* @__PURE__ */ h("div", {
 		className: "flex min-w-0 flex-col gap-1",
 		role: "group",
-		"aria-labelledby": g + "-label",
-		"aria-describedby": D ? g + "-refinement-error" : void 0,
+		"aria-labelledby": y + "-label",
+		"aria-describedby": P ? y + "-refinement-error" : void 0,
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ h("div", {
 				className: "flex min-w-0 flex-wrap items-center gap-x-3",
-				children: [/* @__PURE__ */ f(c, {
-					id: g + "-label",
-					htmlFor: g,
-					className: v,
-					label: _,
-					required: y
-				}), /* @__PURE__ */ p("div", {
-					ref: E,
+				children: [/* @__PURE__ */ m(c, {
+					id: y + "-label",
+					htmlFor: y,
+					className: x,
+					label: b,
+					required: S
+				}), /* @__PURE__ */ h("div", {
+					ref: A,
 					className: "ms-auto flex min-w-0 flex-wrap items-center",
-					children: [/* @__PURE__ */ f(s, {
+					children: [F && !M && /* @__PURE__ */ m(s, {
 						size: a.Small,
-						label: b?.refineWithAiLabel ?? "Refine with AI",
-						disabled: S || !x.canRefine,
+						label: C?.refineUndoLabel ?? "Restore original",
+						disabled: T,
 						onClick: () => {
-							x.refine();
+							w.undo();
+							let e = A.current?.querySelectorAll("button");
+							e?.[e.length - 1]?.focus();
 						},
-						iconBefore: x.isPending ? /* @__PURE__ */ f("span", {
+						iconBefore: /* @__PURE__ */ m(g, {
+							size: r.SM,
+							stroke: i,
+							"aria-hidden": !0
+						})
+					}), /* @__PURE__ */ m(s, {
+						size: a.Small,
+						label: I,
+						disabled: T || !w.canRefine,
+						onClick: () => {
+							w.refine();
+						},
+						iconBefore: M ? /* @__PURE__ */ m("span", {
 							"aria-hidden": !0,
-							children: /* @__PURE__ */ f(l, {
+							children: /* @__PURE__ */ m(u, {
 								size: r.SM,
 								ariaLabel: ""
 							})
-						}) : /* @__PURE__ */ f(m, {
+						}) : /* @__PURE__ */ m(_, {
 							size: r.SM,
 							stroke: i,
 							"aria-hidden": !0
 						})
-					}), x.canUndo && /* @__PURE__ */ f(s, {
-						size: a.Small,
-						label: b?.refineUndoLabel ?? "Undo",
-						disabled: S,
-						onClick: () => {
-							x.undo(), E.current?.querySelector("button")?.focus();
-						}
 					})]
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				"aria-busy": x.isPending,
-				children: T
+			/* @__PURE__ */ m("div", {
+				ref: j,
+				"aria-busy": w.isPending,
+				children: k
 			}),
-			/* @__PURE__ */ f("div", {
-				role: "status",
-				"aria-live": "polite",
-				children: /* @__PURE__ */ f(n, {
-					text: O,
-					className: C
-				})
+			/* @__PURE__ */ h("div", {
+				className: "flex min-w-0 items-start gap-3",
+				children: [/* @__PURE__ */ m("div", {
+					className: "min-w-0 flex-1",
+					children: /* @__PURE__ */ m(n, {
+						text: R,
+						announce: l.Polite,
+						className: e(E, L && "sr-only")
+					})
+				}), N]
 			}),
-			D && /* @__PURE__ */ f(o, {
-				role: "alert",
-				id: g + "-refinement-error",
-				className: e(C, w),
-				text: b?.refineErrorLabel ?? "Could not refine this text. Please try again."
+			/* @__PURE__ */ m(o, {
+				id: y + "-refinement-error",
+				announce: l.Assertive,
+				className: e(E, D),
+				text: P ? C?.refineErrorLabel ?? "Could not refine this text. Please try again." : ""
 			})
 		]
 	});
 };
 //#endregion
-export { h as TextRefinementField };
+export { v as TextRefinementField };

package/components/UnsavedChangesProvider/UnsavedChangesProvider.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactNode } from 'react';
+/** User-visible strings of the unsaved-changes dialog. */
+export interface UnsavedChangesLabels {
+    /** Dialog title, which also names the dialog. Defaults to `'Discard unsaved changes?'`. */
+    title?: string;
+    /** Dialog message. Defaults to `'You have unsaved changes. Leaving now will discard them.'`. */
+    message?: string;
+    /** Label of the discarding action. Defaults to `'Discard changes'`. */
+    confirmLabel?: string;
+    /** Label of the action that keeps the edits. Defaults to `'Keep editing'`. */
+    cancelLabel?: string;
+}
+/** Props for `UnsavedChangesProvider`. */
+export interface UnsavedChangesProviderProps {
+    /** Subtree whose forms and exits share the dialog. */
+    children: ReactNode;
+    /** User-visible strings of the dialog; each missing field keeps its English default. */
+    labels?: UnsavedChangesLabels;
+}
+/** Owns the single "Discard unsaved changes?" dialog and the dirty state of the one guarded form mounted below it. */
+export declare const UnsavedChangesProvider: FC<UnsavedChangesProviderProps>;
+//# sourceMappingURL=UnsavedChangesProvider.d.ts.map

package/components/UnsavedChangesProvider/UnsavedChangesProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnsavedChangesProvider.d.ts","sourceRoot":"","sources":["../../../src/components/UnsavedChangesProvider/UnsavedChangesProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,EAAE,EACP,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,0DAA0D;AAC1D,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AASD,0CAA0C;AAC1C,MAAM,WAAW,2BAA2B;IAC1C,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,wFAAwF;IACxF,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B;AAED,sHAAsH;AACtH,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAiFlE,CAAC"}

package/components/UnsavedChangesProvider/UnsavedChangesProvider.js

@@ -0,0 +1,57 @@
+import { ConfirmationDialog as e } from "../ConfirmationDialog/ConfirmationDialog.js";
+import { UnsavedChangesContext as t, UnsavedChangesInternalContext as n } from "./unsaved-changes-context.js";
+import { ConfirmationPopupVariant as r } from "@epam/ai-dial-ui-kit";
+import { useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/UnsavedChangesProvider/UnsavedChangesProvider.tsx
+var d = {
+	title: "Discard unsaved changes?",
+	message: "You have unsaved changes. Leaving now will discard them.",
+	confirmLabel: "Discard changes",
+	cancelLabel: "Keep editing"
+}, f = ({ children: f, labels: p }) => {
+	let [m, h] = c(!1), [g, _] = c(null), v = s(!1), y = {
+		title: p?.title ?? d.title,
+		message: p?.message ?? d.message,
+		confirmLabel: p?.confirmLabel ?? d.confirmLabel,
+		cancelLabel: p?.cancelLabel ?? d.cancelLabel
+	};
+	a(() => () => {
+		v.current = !1;
+	}, []);
+	let b = i((e) => (h(e), () => h(!1)), []), x = i((e) => (v.current = !1, _(e), () => _((t) => t === e ? null : t)), []), S = i((e) => {
+		x({
+			onDiscard: e,
+			shouldAllowUnload: !0
+		});
+	}, [x]), C = () => {
+		g && (_(null), g.shouldAllowUnload && (v.current = !0), g.onDiscard());
+	}, w = () => {
+		g && (_(null), g.onKeep?.());
+	}, T = o(() => ({
+		hasUnsavedChanges: m,
+		requestDiscard: S
+	}), [m, S]), E = o(() => ({
+		register: b,
+		open: x,
+		unloadAllowedRef: v
+	}), [b, x]);
+	return /* @__PURE__ */ l(n.Provider, {
+		value: E,
+		children: /* @__PURE__ */ u(t.Provider, {
+			value: T,
+			children: [f, /* @__PURE__ */ l(e, {
+				open: g != null,
+				title: y.title,
+				message: y.message,
+				confirmLabel: y.confirmLabel,
+				cancelLabel: y.cancelLabel,
+				variant: r.Danger,
+				onConfirm: C,
+				onClose: w
+			})]
+		})
+	});
+};
+//#endregion
+export { f as UnsavedChangesProvider };

package/components/UnsavedChangesProvider/unsaved-changes-context.d.ts

@@ -0,0 +1,44 @@
+import { RefObject } from 'react';
+/** Value of {@link useUnsavedChanges}. */
+export interface UnsavedChangesContextValue {
+    /** Whether the guarded form reports unsaved changes. `false` when no form is registered. */
+    hasUnsavedChanges: boolean;
+    /**
+     * Opens the unsaved-changes dialog. **Discard changes** allows the next page
+     * unload, closes the dialog and runs `onDiscard`; **Keep editing** or any
+     * dismissal closes it and runs nothing. Used by exits that are not router
+     * transitions, such as Log out.
+     */
+    requestDiscard: (onDiscard: () => void) => void;
+}
+/** Actions run by the dialog's two outcomes. */
+export interface PendingDiscard {
+    /** Runs when the user chooses Discard changes. */
+    onDiscard: () => void;
+    /** Runs when the user chooses Keep editing or dismisses the dialog. */
+    onKeep?: () => void;
+    /** Whether confirming lets the next `beforeunload` pass without the native prompt. Defaults to `false`. */
+    shouldAllowUnload?: boolean;
+}
+/** Registration and dialog plumbing shared by the provider and the leave-guard hooks. */
+export interface UnsavedChangesInternalContextValue {
+    /** Registers the guarded form's dirty state; the returned callback unregisters it. */
+    register: (isDirty: boolean) => () => void;
+    /**
+     * Opens the dialog wired to the given outcomes. The returned callback closes
+     * it without running either outcome, and does nothing once the dialog has
+     * been answered or another request has replaced it.
+     */
+    open: (pending: PendingDiscard) => () => void;
+    /** Set once a discard has allowed the page to unload; the `beforeunload` listener skips its prompt while it is `true`. */
+    unloadAllowedRef: RefObject<boolean>;
+}
+/** Public unsaved-changes state, read through `useUnsavedChanges`. */
+export declare const UnsavedChangesContext: import('react').Context<UnsavedChangesContextValue | undefined>;
+/** Registration and dialog plumbing, read through `useUnsavedChangesInternal`. */
+export declare const UnsavedChangesInternalContext: import('react').Context<UnsavedChangesInternalContextValue | undefined>;
+/** Returns the guarded form's dirty state and the dialog entry point for exits that are not router transitions; throws outside `UnsavedChangesProvider`. */
+export declare const useUnsavedChanges: () => UnsavedChangesContextValue;
+/** Returns the registration and dialog plumbing for the leave-guard hooks; throws outside `UnsavedChangesProvider`. Not re-exported from the package. */
+export declare const useUnsavedChangesInternal: () => UnsavedChangesInternalContextValue;
+//# sourceMappingURL=unsaved-changes-context.d.ts.map

package/components/UnsavedChangesProvider/unsaved-changes-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unsaved-changes-context.d.ts","sourceRoot":"","sources":["../../../src/components/UnsavedChangesProvider/unsaved-changes-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,0CAA0C;AAC1C,MAAM,WAAW,0BAA0B;IACzC,4FAA4F;IAC5F,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,cAAc,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CACjD;AAED,gDAAgD;AAChD,MAAM,WAAW,cAAc;IAC7B,kDAAkD;IAClD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2GAA2G;IAC3G,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,yFAAyF;AACzF,MAAM,WAAW,kCAAkC;IACjD,sFAAsF;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;IAC3C;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,MAAM,IAAI,CAAC;IAC9C,0HAA0H;IAC1H,gBAAgB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CACtC;AAED,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,iEAEtB,CAAC;AAEb,kFAAkF;AAClF,eAAO,MAAM,6BAA6B,yEAE9B,CAAC;AAEb,4JAA4J;AAC5J,eAAO,MAAM,iBAAiB,QAAO,0BAQpC,CAAC;AAEF,yJAAyJ;AACzJ,eAAO,MAAM,yBAAyB,QAChC,kCAQH,CAAC"}

package/components/UnsavedChangesProvider/unsaved-changes-context.js

@@ -0,0 +1,13 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/UnsavedChangesProvider/unsaved-changes-context.ts
+var n = e(void 0), r = e(void 0), i = () => {
+	let e = t(n);
+	if (!e) throw Error("useUnsavedChanges must be used within an UnsavedChangesProvider");
+	return e;
+}, a = () => {
+	let e = t(r);
+	if (!e) throw Error("The unsaved-changes leave guard must be used within an UnsavedChangesProvider");
+	return e;
+};
+//#endregion
+export { n as UnsavedChangesContext, r as UnsavedChangesInternalContext, i as useUnsavedChanges, a as useUnsavedChangesInternal };

package/constants/breakpoint.d.ts

@@ -0,0 +1,15 @@
+/** The viewport width (inclusive) where the desktop presentation begins. */
+export declare const DESKTOP_BREAKPOINT_PX = 1280;
+/** The largest viewport width that still renders the mobile/tablet presentation. */
+export declare const MOBILE_MAX_WIDTH_PX: number;
+/** `matchMedia` query matching the desktop band (1280px and wider). */
+export declare const DESKTOP_MEDIA_QUERY = "(min-width: 1280px)";
+/** `matchMedia` query matching the mobile/tablet band (up to 1279px). */
+export declare const MOBILE_MEDIA_QUERY = "(max-width: 1279px)";
+/** Inclusive boundary for anchored menus and bounded tablet panels, independent of layout. */
+export declare const TABLET_BREAKPOINT_PX = 768;
+/** Phone menu presentation, including fractional widths below 768px. */
+export declare const PHONE_MEDIA_QUERY = "(width < 768px)";
+/** Bounded overlays without changing the app's mobile layout policy. */
+export declare const TABLET_MEDIA_QUERY = "(768px <= width < 1280px)";
+//# sourceMappingURL=breakpoint.d.ts.map

package/constants/breakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../src/constants/breakpoint.ts"],"names":[],"mappings":"AAKA,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAE1C,oFAAoF;AACpF,eAAO,MAAM,mBAAmB,QAA4B,CAAC;AAE7D,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,wBAA4C,CAAC;AAE7E,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,wBAA0C,CAAC;AAE1E,8FAA8F;AAC9F,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wEAAwE;AACxE,eAAO,MAAM,iBAAiB,oBAAwC,CAAC;AAEvE,wEAAwE;AACxE,eAAO,MAAM,kBAAkB,8BAAsE,CAAC"}