@epam/ai-dial-editor-builder 1.1.0-dev.391

package/components/AddAvatar/AddAvatar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { AddAvatarProps } from '../../models/add-avatar-props';
+/** Avatar preview box with an "Add avatar" button and a format/size caption, for entity-icon editing flows. */
+export declare const AddAvatar: FC<AddAvatarProps>;
+//# sourceMappingURL=AddAvatar.d.ts.map

package/components/AddAvatar/AddAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/AddAvatar/AddAvatar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAGpE,+GAA+G;AAC/G,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAmExC,CAAC"}

package/components/EditorLayout/EditorLayout.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { EditorLayoutProps } from '../../models/editor-layout-props';
+/**
+ * Two-column editor shell with a header row (back button, title, actions).
+ * On mobile/tablet, `actions` move out of the header into a dedicated bar
+ * pinned to the bottom of the page, outside the scrollable body.
+ */
+export declare const EditorLayout: FC<EditorLayoutProps>;
+//# sourceMappingURL=EditorLayout.d.ts.map

package/components/EditorLayout/EditorLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditorLayout/EditorLayout.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAG1E;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+F9C,CAAC"}

package/components/EditorSection/EditorSection.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { EditorSectionProps } from '../../models/editor-section-props';
+/** Bordered card wrapper for a named section inside an editor layout. */
+export declare const EditorSection: FC<EditorSectionProps>;
+//# sourceMappingURL=EditorSection.d.ts.map

package/components/EditorSection/EditorSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditorSection.d.ts","sourceRoot":"","sources":["../../../src/components/EditorSection/EditorSection.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAG5E,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0BhD,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+._section_l1mnx_1{border-color:var(--es-border-color,var(--stroke-tertiary,#e0e6f0))}._title_l1mnx_5{color:var(--es-title-color,var(--text-primary,#161b2d))}._headerBorder_1kidu_1{border-bottom-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._footerBorder_1kidu_5{border-top-color:var(--el-header-border-color,var(--stroke-tertiary,#e0e6f0))}._sidebarBorder_1kidu_9{border-inline-end-color:var(--el-sidebar-border-color,var(--stroke-tertiary,#e0e6f0))}._box_c9as8_1{background:var(--aa-box-bg,var(--bg-layer-raised,#fcfcfc));border-color:var(--aa-box-border,var(--stroke-tertiary,#e0e6f0))}._icon_c9as8_6{color:var(--aa-icon,var(--text-secondary,#57647a))}._caption_c9as8_10{color:var(--aa-caption,var(--text-tertiary,#848e9c))}
+/*$vite$:1*/

package/index.d.ts

@@ -0,0 +1,7 @@
+export type { EditorSectionProps, EditorSectionStyles, } from './models/editor-section-props';
+export type { EditorLayoutProps, EditorLayoutLabels, EditorLayoutStyles, } from './models/editor-layout-props';
+export type { AddAvatarProps, AddAvatarColors, AddAvatarStyles, } from './models/add-avatar-props';
+export { EditorSection } from './components/EditorSection/EditorSection';
+export { EditorLayout } from './components/EditorLayout/EditorLayout';
+export { AddAvatar } from './components/AddAvatar/AddAvatar';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AACvC,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,cAAc,EACd,eAAe,EACf,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC"}

package/index.js

@@ -0,0 +1,130 @@
+import { buildCssVars as e, mergeClasses as t } from "@epam/ai-dial-chat-shared";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { DIAL_ICON_SIZE as i, DIAL_KIT_ICON_STROKE as a, ElementSize as o, GhostIconButton as s, Label as c, LinkButton as l } from "@epam/ai-dial-ui-kit";
+import { IconArrowNarrowLeft as u, IconPhoto as d, IconPlus as f } from "@tabler/icons-react";
+import { useId as p } from "react";
+var m = {
+	section: "_section_l1mnx_1",
+	title: "_title_l1mnx_5"
+}, h = ({ title: i, children: a, styles: o, className: s }) => {
+	let c = e({
+		"--es-border-color": o?.colors?.borderColor,
+		"--es-title-color": o?.colors?.titleColor
+	});
+	return /* @__PURE__ */ r("section", {
+		className: t("flex flex-col gap-4 rounded border p-6", m.section, s),
+		style: c,
+		children: [i != null && /* @__PURE__ */ n("h2", {
+			className: t("dial-h3-text", m.title),
+			children: i
+		}), a]
+	});
+}, g = {
+	headerBorder: "_headerBorder_1kidu_1",
+	footerBorder: "_footerBorder_1kidu_5",
+	sidebarBorder: "_sidebarBorder_1kidu_9"
+}, _ = ({ title: o, onBack: c, backAriaLabel: l = "Back", actions: d, leftContent: f, rightContent: m, isSaving: h = !1, labels: _, styles: v, dir: y }) => {
+	let b = p(), x = h ? _?.savingStatusLabel ?? "Saving" : "";
+	return /* @__PURE__ */ r("div", {
+		dir: y,
+		className: "flex min-h-0 flex-1 flex-col",
+		style: e({
+			"--el-header-border-color": v?.colors?.headerBorderColor,
+			"--el-sidebar-border-color": v?.colors?.sidebarBorderColor
+		}),
+		children: [
+			/* @__PURE__ */ n("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				id: b,
+				children: x
+			}),
+			/* @__PURE__ */ r("div", {
+				className: t("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", g.headerBorder),
+				children: [/* @__PURE__ */ r("div", {
+					className: "flex min-w-0 flex-1 items-center gap-2",
+					children: [/* @__PURE__ */ n(s, {
+						icon: /* @__PURE__ */ n(u, {
+							size: i.LG,
+							stroke: a,
+							"aria-hidden": !0,
+							className: "rtl:scale-x-[-1]"
+						}),
+						"aria-label": l,
+						onClick: c
+					}), /* @__PURE__ */ n("h1", {
+						className: "dial-h2-text min-w-0 truncate",
+						children: o
+					})]
+				}), d != null && /* @__PURE__ */ n("div", {
+					className: "hidden shrink-0 items-center gap-2 desktop:flex",
+					children: d
+				})]
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "flex flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden",
+				children: [/* @__PURE__ */ n("div", {
+					className: t(m == null ? "desktop:flex-1" : "desktop:w-[360px] desktop:shrink-0 desktop:overflow-y-auto desktop:border-e", "desktop:overflow-y-auto", m == null ? void 0 : g.sidebarBorder),
+					children: f
+				}), m != null && /* @__PURE__ */ n("div", {
+					className: "desktop:flex-1 desktop:overflow-y-auto",
+					children: m
+				})]
+			}),
+			d != null && /* @__PURE__ */ n("div", {
+				className: t("flex shrink-0 flex-row-reverse items-center gap-2 border-t px-4 py-2 desktop:hidden [&>*]:flex-1", g.footerBorder),
+				children: d
+			})
+		]
+	});
+}, v = {
+	box: "_box_c9as8_1",
+	icon: "_icon_c9as8_6",
+	caption: "_caption_c9as8_10"
+}, y = ({ label: s, avatarUrl: u, avatarAlt: p = "", addAvatarLabel: m = "Add avatar", captionText: h = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: g, styles: _, className: y }) => {
+	let b = e({
+		"--aa-box-bg": _?.colors?.boxBackgroundColor,
+		"--aa-box-border": _?.colors?.boxBorderColor,
+		"--aa-icon": _?.colors?.placeholderIconColor,
+		"--aa-caption": _?.colors?.captionColor
+	});
+	return /* @__PURE__ */ r("div", {
+		className: t("flex flex-col gap-2", y),
+		style: b,
+		children: [/* @__PURE__ */ n(c, { label: s }), /* @__PURE__ */ r("div", {
+			className: "flex items-start gap-3",
+			children: [/* @__PURE__ */ n("div", {
+				className: t("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", v.box),
+				children: u ? /* @__PURE__ */ n("img", {
+					src: u,
+					alt: p,
+					className: "h-16 w-16 object-cover"
+				}) : /* @__PURE__ */ n(d, {
+					size: i.LG,
+					stroke: a,
+					"aria-hidden": !0,
+					className: v.icon
+				})
+			}), /* @__PURE__ */ r("div", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ n(l, {
+					size: o.Small,
+					iconBefore: /* @__PURE__ */ n(f, {
+						size: i.SM,
+						stroke: a,
+						"aria-hidden": !0
+					}),
+					className: "w-fit",
+					label: m,
+					onClick: g
+				}), /* @__PURE__ */ n("span", {
+					className: t("dial-tiny-text", v.caption),
+					children: h
+				})]
+			})]
+		})]
+	});
+};
+//#endregion
+export { y as AddAvatar, _ as EditorLayout, h as EditorSection };

package/models/add-avatar-props.d.ts

@@ -0,0 +1,36 @@
+/** CSS custom property overrides for `AddAvatar`. */
+export interface AddAvatarColors {
+    /** Background color of the 64x64 preview box shown when no avatar is set. Defaults to `--bg-layer-raised`. */
+    boxBackgroundColor?: string;
+    /** Border color of the 64x64 preview box. Defaults to `--stroke-tertiary`. */
+    boxBorderColor?: string;
+    /** Color of the placeholder photo icon shown when no avatar is set. Defaults to `--text-secondary`. */
+    placeholderIconColor?: string;
+    /** Color of the format/size caption text. Defaults to `--text-tertiary`. */
+    captionColor?: string;
+}
+/** Style overrides for `AddAvatar`. */
+export interface AddAvatarStyles {
+    /** Color token overrides. */
+    colors?: AddAvatarColors;
+}
+/** Props for `AddAvatar`. */
+export interface AddAvatarProps {
+    /** Field label rendered above the preview box and button (e.g. `'Avatar'`). */
+    label: string;
+    /** URL of the currently selected avatar image. When set, it fills the 64x64 preview box instead of the placeholder icon. */
+    avatarUrl?: string;
+    /** Alt text for the avatar image. Defaults to `''` (decorative — the field label and button already describe the control). */
+    avatarAlt?: string;
+    /** Label for the "Add avatar" button. Defaults to `'Add avatar'`. */
+    addAvatarLabel?: string;
+    /** Caption text describing the accepted formats and max size. Defaults to `'PNG, JPG or SVG (max 1 MB)'`. */
+    captionText?: string;
+    /** Called when the "Add avatar" button is clicked. The host opens its own file picker/manager and, once a file is chosen, passes its URL back in as `avatarUrl`. */
+    onAddAvatarClick: () => void;
+    /** Style overrides applied via CSS custom properties. */
+    styles?: AddAvatarStyles;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+}
+//# sourceMappingURL=add-avatar-props.d.ts.map

package/models/add-avatar-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-avatar-props.d.ts","sourceRoot":"","sources":["../../src/models/add-avatar-props.ts"],"names":[],"mappings":"AAAA,qDAAqD;AACrD,MAAM,WAAW,eAAe;IAC9B,8GAA8G;IAC9G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uGAAuG;IACvG,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,uCAAuC;AACvC,MAAM,WAAW,eAAe;IAC9B,6BAA6B;IAC7B,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,6BAA6B;AAC7B,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,4HAA4H;IAC5H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8HAA8H;IAC9H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6GAA6G;IAC7G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oKAAoK;IACpK,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,yDAAyD;IACzD,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/models/editor-layout-props.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+/** Text labels for `EditorLayout`. All strings have English defaults. */
+export interface EditorLayoutLabels {
+    /** SR-only text announced while `isSaving` is `true`. Defaults to `'Saving'`. */
+    savingStatusLabel?: string;
+}
+/** CSS custom property overrides for `EditorLayout`. */
+export interface EditorLayoutColors {
+    /** Bottom border color of the header row. Defaults to `--stroke-tertiary`. */
+    headerBorderColor?: string;
+    /** Inline-end border color of the left sidebar panel. Defaults to `--stroke-tertiary`. */
+    sidebarBorderColor?: string;
+}
+/** Style overrides for `EditorLayout`. */
+export interface EditorLayoutStyles {
+    /** Color token overrides. */
+    colors?: EditorLayoutColors;
+}
+/** Props for `EditorLayout`. */
+export interface EditorLayoutProps {
+    /** Heading text rendered as `<h1>` in the header row. */
+    title: string;
+    /** Called when the back-arrow button is clicked. */
+    onBack: () => void;
+    /** Accessible label for the back-arrow button. Defaults to `'Back'`. */
+    backAriaLabel?: string;
+    /** Inline-end slot in the header row — typically Cancel + Save buttons. */
+    actions?: ReactNode;
+    /** Left column content (Metadata section at desktop; top on mobile). */
+    leftContent?: ReactNode;
+    /** Right column content (Setup section at desktop; bottom on mobile). When absent, left content fills full width. */
+    rightContent?: ReactNode;
+    /** When `true`, the SR-only saving status region announces `labels.savingStatusLabel`. */
+    isSaving?: boolean;
+    /** Text labels with English defaults. */
+    labels?: EditorLayoutLabels;
+    /** Style overrides applied via CSS custom properties. */
+    styles?: EditorLayoutStyles;
+    /** `dir` attribute forwarded to the root element for explicit direction override. */
+    dir?: 'ltr' | 'rtl';
+}
+//# sourceMappingURL=editor-layout-props.d.ts.map

package/models/editor-layout-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-layout-props.d.ts","sourceRoot":"","sources":["../../src/models/editor-layout-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yEAAyE;AACzE,MAAM,WAAW,kBAAkB;IACjC,iFAAiF;IACjF,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wDAAwD;AACxD,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0FAA0F;IAC1F,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,0CAA0C;AAC1C,MAAM,WAAW,kBAAkB;IACjC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED,gCAAgC;AAChC,MAAM,WAAW,iBAAiB;IAChC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qHAAqH;IACrH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,yDAAyD;IACzD,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,qFAAqF;IACrF,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CACrB"}

package/models/editor-section-props.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/** CSS custom property overrides for `EditorSection`. */
+export interface EditorSectionColors {
+    /** Border color of the section card. Defaults to `--stroke-tertiary`. */
+    borderColor?: string;
+    /** Color of the section title heading. Defaults to `--text-primary`. */
+    titleColor?: string;
+}
+/** Style overrides for `EditorSection`. */
+export interface EditorSectionStyles {
+    /** Color token overrides. */
+    colors?: EditorSectionColors;
+}
+/** Props for `EditorSection`. */
+export interface EditorSectionProps {
+    /** Optional heading rendered above the section body. */
+    title?: string;
+    /** Section body content. */
+    children?: ReactNode;
+    /** Optional style overrides applied via CSS custom properties. */
+    styles?: EditorSectionStyles;
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+}
+//# sourceMappingURL=editor-section-props.d.ts.map

package/models/editor-section-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-section-props.d.ts","sourceRoot":"","sources":["../../src/models/editor-section-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,yDAAyD;AACzD,MAAM,WAAW,mBAAmB;IAClC,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,2CAA2C;AAC3C,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,MAAM,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,iCAAiC;AACjC,MAAM,WAAW,kBAAkB;IACjC,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@epam/ai-dial-editor-builder",
+  "description": "Shared two-column editor layout and section wrapper for DIAL authoring UIs",
+  "version": "1.1.0-dev.391",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    }
+  },
+  "peerDependencies": {
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.391",
+    "@epam/ai-dial-ui-kit": "*",
+    "@tabler/icons-react": "^3.0.0",
+    "react": "^19.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/epam/ai-dial-chat.git",
+    "directory": "libs/editor-builder"
+  }
+}