@epam/ai-dial-skills 1.1.0-dev.432

package/components/FavoriteSkillsPanel/FavoriteSkillsPanel.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { FavoriteSkillsPanelProps } from '../../models/favorite-skills-panel-props';
+/** Second-level "My Collection" panel: the user's favorite skills, or an empty-state hint, plus a "Browse" action. */
+export declare const FavoriteSkillsPanel: FC<FavoriteSkillsPanelProps>;
+//# sourceMappingURL=FavoriteSkillsPanel.d.ts.map

package/components/FavoriteSkillsPanel/FavoriteSkillsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FavoriteSkillsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FavoriteSkillsPanel/FavoriteSkillsPanel.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKL,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0CAA0C,CAAC;AAqCzF,sHAAsH;AACtH,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA4Q5D,CAAC"}

package/components/SkillCatalogModal/SkillCatalogModal.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SkillCatalogModalProps } from '../../models/skill-catalog-modal-props';
+/** "Use skill" browse-modal shell: a large popup hosting host-rendered picker content, mounted only while open. */
+export declare const SkillCatalogModal: FC<SkillCatalogModalProps>;
+//# sourceMappingURL=SkillCatalogModal.d.ts.map

package/components/SkillCatalogModal/SkillCatalogModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillCatalogModal.d.ts","sourceRoot":"","sources":["../../../src/components/SkillCatalogModal/SkillCatalogModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,wCAAwC,CAAC;AAErF,mHAAmH;AACnH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAoBxD,CAAC"}

package/components/SkillDetailsSidePanel/SkillDetailsSidePanel.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SkillDetailsSidePanelProps } from '../../models/skill-details-side-panel-props';
+/**
+ * Right-anchored side panel showing one skill's details, composed from
+ * `@epam/ai-dial-catalog`'s `DetailsPanel` — the skills-scoped composition
+ * point for hosts that surface skill details outside the Catalog page,
+ * without its page chrome.
+ */
+export declare const SkillDetailsSidePanel: FC<SkillDetailsSidePanelProps>;
+//# sourceMappingURL=SkillDetailsSidePanel.d.ts.map

package/components/SkillDetailsSidePanel/SkillDetailsSidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillDetailsSidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/SkillDetailsSidePanel/SkillDetailsSidePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AAE9F;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAEjC,CAAC"}

package/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.d.ts

@@ -0,0 +1,10 @@
+import { UseSkillSelectorOverlayOptions, UseSkillSelectorOverlayResult } from '../../models/skill-selector-overlay';
+/**
+ * Owns the Skills Add-menu flow: the favorites overlay with lazily resolved
+ * row descriptions, the "Use skill" browse modal's open state, the skill
+ * details side panel's open state, and the single selected skill shown as an
+ * input chip. The host injects the listing data, favorites state, the
+ * description fetch, labels, and the modal/panel components.
+ */
+export declare const useSkillSelectorOverlay: ({ isEnabled, skills, sharedWithMe, publicSkills, favoriteIds, onToggleFavorite, fetchSkillDescription, labels, renderCatalogContent, detailsPanelComponent: DetailsPanelComponent, }: UseSkillSelectorOverlayOptions) => UseSkillSelectorOverlayResult;
+//# sourceMappingURL=useSkillSelectorOverlay.d.ts.map

package/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSkillSelectorOverlay.d.ts","sourceRoot":"","sources":["../../../src/hooks/useSkillSelectorOverlay/useSkillSelectorOverlay.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,8BAA8B,EAC9B,6BAA6B,EAC9B,MAAM,qCAAqC,CAAC;AAE7C;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,sLAWrC,8BAA8B,KAAG,6BAyNnC,CAAC"}

package/index.css

@@ -0,0 +1,2 @@
+._row_1ovug_1:hover,._row_1ovug_1:focus-visible{background:var(--fs-row-hover-bg,var(--bg-layer-sunken,#eef1f7))}._header_1ovug_5{color:var(--fs-header-text,var(--text-tertiary,#848e9c))}._emptyHint_1ovug_9{color:var(--fs-empty-hint-text,var(--text-icon-tertiary,#848e9c))}._star_1ovug_13{color:var(--fs-star-color,var(--text-warning-icon,#eec840))}._footer_1ovug_17{border-top-color:var(--fs-footer-border,var(--stroke-tertiary,#e0e6f0))}._rowEnter_1ovug_25{animation:.2s ease-out _rowFadeIn_1ovug_1}._rowLeaving_1ovug_29{pointer-events:none;animation:.18s ease-out forwards _rowFadeOut_1ovug_1}@keyframes _rowFadeIn_1ovug_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes _rowFadeOut_1ovug_1{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.96)}}._listContent_1ovug_57{transition:max-height .2s}@media (prefers-reduced-motion:reduce){._rowEnter_1ovug_25,._rowLeaving_1ovug_29{animation:none}._listContent_1ovug_57{transition:none}}
+/*$vite$:1*/

package/index.d.ts

@@ -0,0 +1,11 @@
+export { FavoriteSkillsPanel } from './components/FavoriteSkillsPanel/FavoriteSkillsPanel';
+export { SkillCatalogModal } from './components/SkillCatalogModal/SkillCatalogModal';
+export { SkillDetailsSidePanel } from './components/SkillDetailsSidePanel/SkillDetailsSidePanel';
+export { useSkillSelectorOverlay } from './hooks/useSkillSelectorOverlay/useSkillSelectorOverlay';
+export { buildFavoriteSkillItem } from './models/favorite-skill-item';
+export type { FavoriteSkillItem, SkillListingEntry, } from './models/favorite-skill-item';
+export type { FavoriteSkillsPanelColors, FavoriteSkillsPanelLabels, FavoriteSkillsPanelProps, } from './models/favorite-skills-panel-props';
+export type { SkillCatalogModalProps } from './models/skill-catalog-modal-props';
+export type { SkillDetailsSidePanelProps } from './models/skill-details-side-panel-props';
+export type { SkillDetailsPanelComponentProps, SkillSelectorOverlayLabels, UseSkillSelectorOverlayOptions, UseSkillSelectorOverlayResult, } from './models/skill-selector-overlay';
+//# 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,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,MAAM,0DAA0D,CAAC;AACjG,OAAO,EAAE,uBAAuB,EAAE,MAAM,yDAAyD,CAAC;AAClG,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,YAAY,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,yBAAyB,EACzB,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,sCAAsC,CAAC;AAC9C,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACjF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAC1F,YAAY,EACV,+BAA+B,EAC/B,0BAA0B,EAC1B,8BAA8B,EAC9B,6BAA6B,GAC9B,MAAM,iCAAiC,CAAC"}

package/index.js

@@ -0,0 +1,280 @@
+import { DeploymentIcon as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
+import { BASE_ICON_SIZE as r, Button as i, ButtonAppearance as a, ButtonVariant as o, DIAL_ICON_SIZE as s, DIAL_KIT_ICON_STROKE as c, GhostButton as l, InteractiveTooltip as u, Popup as d, PopupSize as f, Spinner as p, ToggleIconButton as m } from "@epam/ai-dial-ui-kit";
+import { IconBlocks as h, IconEye as g, IconStarFilled as _ } from "@tabler/icons-react";
+import { Suspense as v, useCallback as y, useEffect as b, useLayoutEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { DetailsPanel as D } from "@epam/ai-dial-catalog";
+var O = {
+	row: "_row_1ovug_1",
+	header: "_header_1ovug_5",
+	emptyHint: "_emptyHint_1ovug_9",
+	star: "_star_1ovug_13",
+	footer: "_footer_1ovug_17",
+	rowEnter: "_rowEnter_1ovug_25",
+	rowFadeIn: "_rowFadeIn_1ovug_1",
+	rowLeaving: "_rowLeaving_1ovug_29",
+	rowFadeOut: "_rowFadeOut_1ovug_1",
+	listContent: "_listContent_1ovug_57"
+}, k = "px-3 pb-0.5 pt-2", A = 180, j = 288, M = 300, N = ({ onOpen: e }) => {
+	let t = C(e);
+	return t.current = e, b(() => {
+		t.current();
+	}, []), null;
+}, P = ({ favorites: r, onSelect: d, onToggleFavorite: f, onBrowse: h, onViewDetails: v, onItemTooltipOpen: y, labels: S = {}, colors: D, nameClassName: P = "dial-small-text", headerClassName: F = "dial-tiny-lead-semi-text", emptyHintClassName: I = "dial-small-text" }) => {
+	let { myCollectionLabel: L = "My Collection", emptyHintLabel: R = "Star a skill to pin it here", browseLabel: z = "Browse", removeFromFavoritesLabel: B = "Remove from favorites", viewDetailsLabel: V = "View details" } = S, H = t({
+		"--fs-row-hover-bg": D?.rowHoverBackground,
+		"--fs-header-text": D?.headerText,
+		"--fs-empty-hint-text": D?.emptyHintText,
+		"--fs-star-color": D?.starColor,
+		"--fs-footer-border": D?.footerBorder
+	}), [U, W] = w(/* @__PURE__ */ new Set()), G = C(/* @__PURE__ */ new Map()), [K, q] = w(null), J = C(void 0), Y = () => {
+		clearTimeout(J.current), J.current = void 0;
+	}, X = (e) => {
+		Y(), q(e);
+	}, Z = () => {
+		Y(), J.current = setTimeout(() => {
+			q(null), J.current = void 0;
+		}, M);
+	};
+	b(() => {
+		let e = G.current;
+		return () => {
+			e.forEach((e) => clearTimeout(e)), e.clear(), clearTimeout(J.current);
+		};
+	}, []);
+	let Q = C(null), [$, ee] = w();
+	x(() => {
+		Q.current && ee(Math.min(Q.current.scrollHeight, j));
+	}, [r]);
+	let te = (e, t) => {
+		e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d(t));
+	}, ne = (e) => {
+		W((t) => new Set(t).add(e));
+		let t = setTimeout(() => {
+			f(e), W((t) => {
+				let n = new Set(t);
+				return n.delete(e), n;
+			}), G.current.delete(e);
+		}, A);
+		G.current.set(e, t);
+	};
+	return /* @__PURE__ */ E("div", {
+		className: "flex min-w-[240px] flex-col",
+		style: H,
+		children: [
+			/* @__PURE__ */ T("p", {
+				className: n(F, k, O.header),
+				children: L
+			}),
+			/* @__PURE__ */ T("div", {
+				className: n("max-h-72 min-h-0 flex-1 overflow-y-auto", O.listContent),
+				style: { maxHeight: $ },
+				children: /* @__PURE__ */ T("div", {
+					ref: Q,
+					children: r.length > 0 ? /* @__PURE__ */ T("ul", {
+						className: "flex flex-col gap-1 px-1 pb-1",
+						children: r.map((t) => {
+							let r = /* @__PURE__ */ E("div", {
+								role: "button",
+								tabIndex: 0,
+								className: n("flex cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 transition-colors", O.row),
+								onClick: () => d(t),
+								onKeyDown: (e) => te(e, t),
+								onMouseEnter: () => X(t.id),
+								onMouseLeave: Z,
+								onFocus: () => X(t.id),
+								onBlur: Z,
+								children: [
+									/* @__PURE__ */ T(e, {
+										size: s.MD,
+										initialsName: t.name
+									}),
+									/* @__PURE__ */ T("span", {
+										className: n(P, "min-w-0 flex-1 truncate text-start"),
+										children: t.name
+									}),
+									/* @__PURE__ */ T(m, {
+										icon: /* @__PURE__ */ T(_, {
+											size: s.SM,
+											className: O.star,
+											"aria-hidden": !0
+										}),
+										"aria-label": B,
+										isSelected: !0,
+										onClick: (e) => {
+											e.stopPropagation(), ne(t.id);
+										}
+									})
+								]
+							}), l = t.description != null && t.description !== "";
+							return /* @__PURE__ */ T("li", {
+								className: U.has(t.id) ? O.rowLeaving : O.rowEnter,
+								children: /* @__PURE__ */ T(u, {
+									asChild: !0,
+									open: K === t.id,
+									contentClassName: "max-w-[550px]",
+									content: /* @__PURE__ */ E("div", {
+										className: "flex flex-col gap-3",
+										onMouseEnter: Y,
+										onMouseLeave: Z,
+										onFocus: Y,
+										onBlur: Z,
+										children: [
+											/* @__PURE__ */ T(N, { onOpen: () => y?.(t.id) }),
+											t.isDescriptionLoading && /* @__PURE__ */ T(p, { size: s.SM }),
+											!t.isDescriptionLoading && l && /* @__PURE__ */ T("p", {
+												className: "text-start",
+												children: t.description
+											}),
+											/* @__PURE__ */ T(i, {
+												variant: o.Primary,
+												appearance: a.Link,
+												label: V,
+												iconBefore: /* @__PURE__ */ T(g, {
+													size: s.SM,
+													stroke: c,
+													"aria-hidden": !0
+												}),
+												onClick: () => v(t)
+											})
+										]
+									}),
+									children: r
+								})
+							}, t.id);
+						})
+					}) : /* @__PURE__ */ T("p", {
+						className: n(I, "px-4 py-4 text-start", O.emptyHint),
+						children: R
+					})
+				})
+			}),
+			/* @__PURE__ */ T("div", {
+				className: n("border-t px-2 py-3", O.footer),
+				children: /* @__PURE__ */ T(l, {
+					label: z,
+					className: "w-full justify-center",
+					onClick: h
+				})
+			})
+		]
+	});
+}, F = ({ isOpen: e, onClose: t, onSelect: n, title: r, renderContent: i }) => /* @__PURE__ */ T(d, {
+	open: e,
+	header: r,
+	size: f.Lg,
+	className: "h-[min(90vh,860px)] !max-w-[min(95vw,1200px)] overflow-hidden",
+	onClose: t,
+	children: /* @__PURE__ */ T("div", {
+		className: "h-[min(80vh,840px)] overflow-auto",
+		children: /* @__PURE__ */ T(v, {
+			fallback: null,
+			children: e && i(n, t)
+		})
+	})
+}), I = (e) => /* @__PURE__ */ T(D, { ...e }), L = (e, t, n) => ({
+	id: e.url,
+	name: e.name,
+	description: t.get(e.url) ?? void 0,
+	isDescriptionLoading: n.has(e.url)
+}), R = ({ isEnabled: t, skills: n, sharedWithMe: i, publicSkills: a, favoriteIds: o, onToggleFavorite: l, fetchSkillDescription: u, labels: d, renderCatalogContent: f, detailsPanelComponent: p }) => {
+	let { addMenuLabel: m = "Skills", backLabel: g = "Back", catalogModalTitleLabel: _ = "Use skill", panelLabels: b } = d ?? {}, [x, E] = w(!1), [D, O] = w(null), [k, A] = w(null), [j, M] = w(/* @__PURE__ */ new Map()), [N, I] = w(/* @__PURE__ */ new Set()), R = C(/* @__PURE__ */ new Set()), z = S(() => [
+		...n,
+		...i ?? [],
+		...a ?? []
+	], [
+		n,
+		i,
+		a
+	]), B = S(() => z.filter((e) => o.has(e.url)).map((e) => L(e, j, N)), [
+		z,
+		o,
+		j,
+		N
+	]), V = S(() => z.find((e) => e.url === k) ?? null, [z, k]), H = y((e) => {
+		A(e);
+	}, []), U = y(() => {
+		A(null);
+	}, []), W = S(() => V == null ? [] : [{
+		id: V.url,
+		label: V.name,
+		icon: /* @__PURE__ */ T(e, {
+			size: s.SM,
+			initialsName: V.name
+		}),
+		onRemove: U
+	}], [V, U]), G = y((e) => {
+		j.has(e) || R.current.has(e) || (R.current.add(e), I((t) => new Set(t).add(e)), u(e).then((t) => {
+			R.current.delete(e), I((t) => {
+				let n = new Set(t);
+				return n.delete(e), n;
+			}), M((n) => new Map(n).set(e, t));
+		}));
+	}, [j, u]), K = y((e) => /* @__PURE__ */ T(P, {
+		favorites: B,
+		onSelect: (t) => {
+			H(t.id), e();
+		},
+		onToggleFavorite: l,
+		onBrowse: () => {
+			e(), E(!0);
+		},
+		onViewDetails: (t) => {
+			e(), O(t.id);
+		},
+		onItemTooltipOpen: G,
+		labels: b
+	}), [
+		B,
+		H,
+		l,
+		G,
+		b
+	]), q = S(() => ({
+		key: "skills",
+		title: m,
+		icon: /* @__PURE__ */ T(h, {
+			size: r,
+			"aria-hidden": !0,
+			stroke: c
+		}),
+		renderOverlay: K,
+		backLabel: g
+	}), [
+		m,
+		g,
+		K
+	]);
+	return t ? {
+		skillMenuOverlay: q,
+		skillCatalogModal: /* @__PURE__ */ T(F, {
+			isOpen: x,
+			onClose: () => E(!1),
+			onSelect: (e) => {
+				H(e), E(!1);
+			},
+			title: _,
+			renderContent: f
+		}),
+		skillDetailsPanel: /* @__PURE__ */ T(v, {
+			fallback: null,
+			children: /* @__PURE__ */ T(p, {
+				skillId: D,
+				onClose: () => O(null),
+				onUseInChat: (e) => {
+					H(e), O(null);
+				}
+			})
+		}),
+		selectedSkillChips: W,
+		selectSkill: H
+	} : {
+		skillMenuOverlay: void 0,
+		skillCatalogModal: null,
+		skillDetailsPanel: null,
+		selectedSkillChips: [],
+		selectSkill: () => void 0
+	};
+};
+//#endregion
+export { P as FavoriteSkillsPanel, F as SkillCatalogModal, I as SkillDetailsSidePanel, L as buildFavoriteSkillItem, R as useSkillSelectorOverlay };

package/models/favorite-skill-item.d.ts

@@ -0,0 +1,35 @@
+/** A single favorited skill as shown in {@link FavoriteSkillsPanelProps}. */
+export interface FavoriteSkillItem {
+    /**
+     * Stable identifier for the skill: the `skills/{bucket}/{path}` resource
+     * URL, identical to the skill's `CatalogItem` id.
+     */
+    id: string;
+    /** Display name. */
+    name: string;
+    /** Short description shown in a tooltip on hover. Omitted when empty. */
+    description?: string;
+    /**
+     * Whether the description is still being resolved by the host. While
+     * `true` the tooltip shows a spinner in the description's place.
+     */
+    isDescriptionLoading?: boolean;
+}
+/**
+ * The listing-entry fields needed to build a favorite row — satisfied by the
+ * host's skill listing DTO or any `{ url, name }` object.
+ */
+export interface SkillListingEntry {
+    /** Stable identifier for the skill: the `skills/{bucket}/{path}` resource URL. */
+    url: string;
+    /** Display name. */
+    name: string;
+}
+/**
+ * Builds a {@link FavoriteSkillItem} from a listing entry and the host's
+ * resolved description cache. A cached `null` (no description or a failed
+ * fetch) and a not-yet-fetched id both yield no description paragraph; ids
+ * in `pendingIds` are marked as loading so the row's tooltip shows a spinner.
+ */
+export declare const buildFavoriteSkillItem: (skill: SkillListingEntry, descriptions: ReadonlyMap<string, string | null>, pendingIds: ReadonlySet<string>) => FavoriteSkillItem;
+//# sourceMappingURL=favorite-skill-item.d.ts.map

package/models/favorite-skill-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorite-skill-item.d.ts","sourceRoot":"","sources":["../../src/models/favorite-skill-item.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,kFAAkF;IAClF,GAAG,EAAE,MAAM,CAAC;IACZ,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,iBAAiB,EACxB,cAAc,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,EAChD,YAAY,WAAW,CAAC,MAAM,CAAC,KAC9B,iBAKD,CAAC"}

package/models/favorite-skills-panel-props.d.ts

@@ -0,0 +1,53 @@
+import { FavoriteSkillItem } from './favorite-skill-item';
+/** Localizable string labels for {@link FavoriteSkillsPanelProps}'s component. */
+export interface FavoriteSkillsPanelLabels {
+    /** Header above the favorites list. Defaults to `'My Collection'`. */
+    myCollectionLabel?: string;
+    /** Hint shown when there are no favorites. Defaults to `'Star a skill to pin it here'`. */
+    emptyHintLabel?: string;
+    /** Label for the footer action button. Defaults to `'Browse'`. */
+    browseLabel?: string;
+    /** Accessible label for a row's remove-from-favorites star button. Defaults to `'Remove from favorites'`. */
+    removeFromFavoritesLabel?: string;
+    /** Label for a row tooltip's "View details" action. Defaults to `'View details'`. */
+    viewDetailsLabel?: string;
+}
+/** CSS custom-property overrides for the favorites panel. */
+export interface FavoriteSkillsPanelColors {
+    /** Background color of a row on hover. Defaults to `--bg-layer-sunken`. */
+    rowHoverBackground?: string;
+    /** Text color of the "My Collection" header. Defaults to `--text-tertiary`. */
+    headerText?: string;
+    /** Text color of the empty-favorites hint. Defaults to `--text-icon-tertiary`. */
+    emptyHintText?: string;
+    /** Fill color of a row's star icon. Defaults to `--text-warning-icon`. */
+    starColor?: string;
+    /** Border color above the footer's Browse button. Defaults to `--stroke-tertiary`. */
+    footerBorder?: string;
+}
+/** Props for the favorites panel component. */
+export interface FavoriteSkillsPanelProps {
+    /** The user's favorited skills, already resolved by the host. */
+    favorites: FavoriteSkillItem[];
+    /** Called when a row is activated (click, Enter, or Space). */
+    onSelect: (item: FavoriteSkillItem) => void;
+    /** Called with a skill's id when its row's star button is clicked to remove it from favorites. */
+    onToggleFavorite: (id: string) => void;
+    /** Called when the "Browse" button is clicked. */
+    onBrowse: () => void;
+    /** Called when a row tooltip's "View details" button is clicked. */
+    onViewDetails: (item: FavoriteSkillItem) => void;
+    /** Called with a skill's id each time one of its row's interactive tooltips opens (hover or focus). */
+    onItemTooltipOpen?: (id: string) => void;
+    /** Localizable string overrides. */
+    labels?: FavoriteSkillsPanelLabels;
+    /** Color overrides applied as CSS custom properties. */
+    colors?: FavoriteSkillsPanelColors;
+    /** CSS class applied to a row's skill name. Defaults to `'dial-small-text'`. */
+    nameClassName?: string;
+    /** CSS class applied to the "My Collection" header. Defaults to `'dial-tiny-lead-semi-text'`, which uppercases the label itself. */
+    headerClassName?: string;
+    /** CSS class applied to the empty-favorites hint. Defaults to `'dial-small-text'`. */
+    emptyHintClassName?: string;
+}
+//# sourceMappingURL=favorite-skills-panel-props.d.ts.map

package/models/favorite-skills-panel-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorite-skills-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/favorite-skills-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE/D,kFAAkF;AAClF,MAAM,WAAW,yBAAyB;IACxC,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2FAA2F;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6GAA6G;IAC7G,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,6DAA6D;AAC7D,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,+CAA+C;AAC/C,MAAM,WAAW,wBAAwB;IACvC,iEAAiE;IACjE,SAAS,EAAE,iBAAiB,EAAE,CAAC;IAC/B,+DAA+D;IAC/D,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,kGAAkG;IAClG,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,oEAAoE;IACpE,aAAa,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,uGAAuG;IACvG,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,oCAAoC;IACpC,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,wDAAwD;IACxD,MAAM,CAAC,EAAE,yBAAyB,CAAC;IACnC,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oIAAoI;IACpI,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sFAAsF;IACtF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/models/skill-catalog-modal-props.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+/** Props for the SkillCatalogModal component. */
+export interface SkillCatalogModalProps {
+    /** Whether the modal is open. */
+    isOpen: boolean;
+    /** Called when the modal should close (close button or backdrop click). */
+    onClose: () => void;
+    /** Called with the selected skill's resource URL when the content picks one. */
+    onSelect: (id: string) => void;
+    /** Header title. */
+    title: string;
+    /**
+     * Renders the modal body's picker content, mounted only while the modal is
+     * open; receives the selection and close callbacks to wire into it.
+     */
+    renderContent: (onSelect: (id: string) => void, onClose: () => void) => ReactNode;
+}
+//# sourceMappingURL=skill-catalog-modal-props.d.ts.map

package/models/skill-catalog-modal-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-catalog-modal-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-catalog-modal-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,iDAAiD;AACjD,MAAM,WAAW,sBAAsB;IACrC,iCAAiC;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gFAAgF;IAChF,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,EAC9B,OAAO,EAAE,MAAM,IAAI,KAChB,SAAS,CAAC;CAChB"}

package/models/skill-details-side-panel-props.d.ts

@@ -0,0 +1,52 @@
+import { CatalogContentFilePreview, CatalogItem, ItemDetailsStyles, ItemDetailsTexts } from '@epam/ai-dial-catalog';
+import { ReactNode } from 'react';
+/**
+ * Props for {@link SkillDetailsSidePanel} — the skill-scoped surface of
+ * `@epam/ai-dial-catalog`'s `DetailsPanelProps`, narrowed to the actions a
+ * skill details surface offers. Publish, share, credentials, and download
+ * stay with the Catalog page: omitting them hides those actions.
+ */
+export interface SkillDetailsSidePanelProps {
+    /** The skill catalog item to display in the panel. */
+    item: CatalogItem;
+    /** Controls whether the panel is visible. */
+    isOpen: boolean;
+    /** Initial starred state for the skill. Default: `false`. */
+    isStarred?: boolean;
+    /**
+     * When `true`, a fetch for the structured Overview tab is pending; the
+     * panel shows a small loading indicator next to the tab row.
+     */
+    isDetailsLoading?: boolean;
+    /** Called when the panel should close (close button or backdrop click). */
+    onClose: () => void;
+    /** Called when the star/favorite button is toggled. */
+    onToggleFavorite?: (id: string, isStarred: boolean) => void;
+    /** Called when the header's "Use in chat" button is clicked. */
+    onUseInChat?: (item: CatalogItem) => void;
+    /** Controls whether the header's primary action button is shown for the skill. */
+    isPrimaryActionVisible?: (item: CatalogItem) => boolean;
+    /**
+     * Resolves the text of a file picked in the Content tab, given its opaque
+     * `id`. Superseded by `onLoadContentFilePreview` and
+     * `renderContentFilePreview` when those are supplied.
+     */
+    onLoadContentFile?: (fileId: string) => Promise<string | undefined>;
+    /**
+     * Resolves a picked file's typed preview, given its opaque `id`. Takes
+     * precedence over `onLoadContentFile`; superseded by
+     * `renderContentFilePreview` when that is supplied.
+     */
+    onLoadContentFilePreview?: (fileId: string) => Promise<CatalogContentFilePreview | undefined>;
+    /**
+     * Renders a picked file through a host-owned preview surface. Takes
+     * precedence over both loading callbacks. The file id is opaque to the
+     * panel; `fileName` is the basename resolved from the supplied tree.
+     */
+    renderContentFilePreview?: (fileId: string, fileName: string) => ReactNode;
+    /** Text overrides for the panel's user-visible strings. */
+    texts?: ItemDetailsTexts;
+    /** Grouped style overrides. */
+    styles?: ItemDetailsStyles;
+}
+//# sourceMappingURL=skill-details-side-panel-props.d.ts.map

package/models/skill-details-side-panel-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-details-side-panel-props.d.ts","sourceRoot":"","sources":["../../src/models/skill-details-side-panel-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,yBAAyB,EACzB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,WAAW,0BAA0B;IACzC,sDAAsD;IACtD,IAAI,EAAE,WAAW,CAAC;IAClB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D,gEAAgE;IAChE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,kFAAkF;IAClF,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAC;IACxD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpE;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CACzB,MAAM,EAAE,MAAM,KACX,OAAO,CAAC,yBAAyB,GAAG,SAAS,CAAC,CAAC;IACpD;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B"}

package/models/skill-selector-overlay.d.ts

@@ -0,0 +1,91 @@
+import { MenuOverlayConfig, SelectedEntityChip } from '@epam/ai-dial-conversation-input';
+import { ComponentType, ReactNode } from 'react';
+import { SkillListingEntry } from './favorite-skill-item';
+import { FavoriteSkillsPanelLabels } from './favorite-skills-panel-props';
+/** Props accepted by the details-panel component injected into `useSkillSelectorOverlay`. */
+export interface SkillDetailsPanelComponentProps {
+    /** Resource URL of the skill whose details are shown; `null` renders nothing. */
+    skillId: string | null;
+    /** Called when the panel should close (close button or backdrop click). */
+    onClose: () => void;
+    /**
+     * Called with the skill's resource URL when the panel's "Use in chat" is
+     * clicked; the hook also closes the panel.
+     */
+    onUseInChat: (skillId: string) => void;
+}
+/** Localizable string labels for the skill selector overlay flow. */
+export interface SkillSelectorOverlayLabels {
+    /** Add-menu entry label and mobile sheet title. Defaults to `'Skills'`. */
+    addMenuLabel?: string;
+    /** Accessible label for the mobile sheet's back arrow. Defaults to `'Back'`. */
+    backLabel?: string;
+    /** Header title of the "Use skill" browse modal. Defaults to `'Use skill'`. */
+    catalogModalTitleLabel?: string;
+    /** Labels forwarded to the favorites panel rendered as the overlay. */
+    panelLabels?: FavoriteSkillsPanelLabels;
+}
+/** Options accepted by `useSkillSelectorOverlay`. */
+export interface UseSkillSelectorOverlayOptions {
+    /**
+     * Whether the skill flow is enabled. While `false` the hook returns empty
+     * outputs: no menu entry, no modal, no panel, no chips.
+     */
+    isEnabled: boolean;
+    /** The user's own skills. */
+    skills: SkillListingEntry[];
+    /** Skills shared with the user, when the host distinguishes them. */
+    sharedWithMe?: SkillListingEntry[];
+    /** Public skills, when the host distinguishes them. */
+    publicSkills?: SkillListingEntry[];
+    /** Ids (`skills/{bucket}/{path}` URLs) of the user's favorited skills. */
+    favoriteIds: ReadonlySet<string>;
+    /** Removes a skill from favorites; fired by a row's star button. */
+    onToggleFavorite: (id: string) => void;
+    /**
+     * Resolves a skill's manifest description for its row tooltip. Returning
+     * `null` marks the skill as description-less for the rest of the session.
+     */
+    fetchSkillDescription: (skillId: string) => Promise<string | null>;
+    /** Localizable string overrides. */
+    labels?: SkillSelectorOverlayLabels;
+    /**
+     * Renders the browse modal's picker content (e.g. a host catalog view);
+     * receives the selection and close callbacks to wire into it, and is
+     * mounted only while the modal is open.
+     */
+    renderCatalogContent: (onSelect: (id: string) => void, onClose: () => void) => ReactNode;
+    /** The skill details side panel; may be a lazily loaded component. */
+    detailsPanelComponent: ComponentType<SkillDetailsPanelComponentProps>;
+}
+/** Returned by `useSkillSelectorOverlay`. */
+export interface UseSkillSelectorOverlayResult {
+    /**
+     * The Skills entry for the `menuOverlays` prop of
+     * `ConversationInput`/`Input`. `undefined` while `isEnabled` is `false`: the
+     * host omits the entry entirely when this is `undefined`, so a stub renderer
+     * would leave the menu item in place with nothing behind it.
+     */
+    skillMenuOverlay?: MenuOverlayConfig;
+    /**
+     * The browse modal element. Render at a stable level outside the popover
+     * (e.g. next to the input); `null` while `isEnabled` is `false`.
+     */
+    skillCatalogModal: ReactNode;
+    /**
+     * The skill details side panel opened by a row tooltip's "View details".
+     * `null` while `isEnabled` is `false`.
+     */
+    skillDetailsPanel: ReactNode;
+    /**
+     * The selected skill as input chip data — at most one entry, replaced on
+     * every selection. Empty while `isEnabled` is `false` or nothing is selected.
+     */
+    selectedSkillChips: SelectedEntityChip[];
+    /**
+     * Selects a skill by its resource URL (`skills/{bucket}/{path}`), replacing
+     * any prior selection.
+     */
+    selectSkill: (skillId: string) => void;
+}
+//# sourceMappingURL=skill-selector-overlay.d.ts.map

package/models/skill-selector-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill-selector-overlay.d.ts","sourceRoot":"","sources":["../../src/models/skill-selector-overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE/E,6FAA6F;AAC7F,MAAM,WAAW,+BAA+B;IAC9C,iFAAiF;IACjF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2EAA2E;IAC3E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,qEAAqE;AACrE,MAAM,WAAW,0BAA0B;IACzC,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,uEAAuE;IACvE,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,qDAAqD;AACrD,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,SAAS,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,qEAAqE;IACrE,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,uDAAuD;IACvD,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACnC,0EAA0E;IAC1E,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,oEAAoE;IACpE,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,qBAAqB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACnE,oCAAoC;IACpC,MAAM,CAAC,EAAE,0BAA0B,CAAC;IACpC;;;;OAIG;IACH,oBAAoB,EAAE,CACpB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,EAC9B,OAAO,EAAE,MAAM,IAAI,KAChB,SAAS,CAAC;IACf,sEAAsE;IACtE,qBAAqB,EAAE,aAAa,CAAC,+BAA+B,CAAC,CAAC;CACvE;AAED,6CAA6C;AAC7C,MAAM,WAAW,6BAA6B;IAC5C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IACrC;;;OAGG;IACH,iBAAiB,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,kBAAkB,EAAE,kBAAkB,EAAE,CAAC;IACzC;;;OAGG;IACH,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC"}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@epam/ai-dial-skills",
+  "description": "Host-agnostic UI for picking a favorite skill to attach to a chat input",
+  "version": "1.1.0-dev.432",
+  "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-catalog": "1.1.0-dev.432",
+    "@epam/ai-dial-chat-shared": "1.1.0-dev.432",
+    "@epam/ai-dial-conversation-input": "1.1.0-dev.432",
+    "@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/skills"
+  }
+}

package/test-setup.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=test-setup.d.ts.map

package/test-setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":""}