@epam/ai-dial-projects 1.3.0-dev.224 → 1.3.0-dev.234

package/index.js

@@ -1,241 +1,277 @@
-import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, PROHIBITED_CONVERSATION_NAME_CHARS_RE as n, PanelEmptyState as r, RequestStatus as i, TextRefinementField as a, buildCssVars as o, getAttachmentTypeFromMime as s, inferMimeTypeFromPath as c, mergeClasses as l, useAvailableHeightCap as ee, useTextRefinement as u } from "@epam/ai-dial-chat-shared";
-import { Button as d, ButtonAppearance as te, ButtonDropdown as ne, ButtonVariant as f, CardShell as p, DIAL_ICON_SIZE as m, DIAL_KIT_ICON_STROKE as h, ElementSize as g, ErrorText as _, FileDropzone as v, FolderPath as y, GhostButton as b, Highlight as x, Input as S, Label as re, MenuItemMark as ie, Search as ae, Spinner as oe, Textarea as C } from "@epam/ai-dial-ui-kit";
-import { IconArrowNarrowLeft as se, IconArrowsSort as ce, IconPlus as le } from "@tabler/icons-react";
-import { Suspense as ue, lazy as w, useCallback as T, useEffect as de, useId as E, useMemo as D, useRef as O, useState as k } from "react";
-import { jsx as A, jsxs as j } from "react/jsx-runtime";
-import { AttachmentCard as fe, FileDndOverlay as pe } from "@epam/ai-dial-attachment-input";
-import { BuilderFormContainer as me } from "@epam/ai-dial-builder-form";
-import { LazyMarkdownEditor as M } from "@epam/ai-dial-ui-kit/editors";
+import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, MarkdownRenderer as n, PROHIBITED_CONVERSATION_NAME_CHARS_RE as r, PanelEmptyState as i, RequestStatus as a, TextRefinementField as o, buildCssVars as ee, getAttachmentTypeFromMime as s, inferMimeTypeFromPath as c, mergeClasses as l, useAvailableHeightCap as u, useTextRefinement as d } from "@epam/ai-dial-chat-shared";
+import { Button as te, ButtonAppearance as ne, ButtonDropdown as f, ButtonVariant as re, CardShell as p, DIAL_ICON_SIZE as m, DIAL_KIT_ICON_STROKE as h, Dropdown as g, ElementSize as ie, EllipsisTooltip as _, ErrorText as v, FileDropzone as ae, FolderPath as y, GhostButton as b, GhostIconButton as x, Highlight as S, Input as C, Label as w, MenuItemMark as T, NeutralButton as oe, Search as se, Spinner as ce, Textarea as E } from "@epam/ai-dial-ui-kit";
+import { IconArrowNarrowLeft as le, IconArrowsSort as D, IconDotsVertical as ue, IconPin as O, IconPinFilled as k, IconPlus as A } from "@tabler/icons-react";
+import { Suspense as j, lazy as M, memo as N, useCallback as P, useEffect as de, useId as F, useMemo as I, useRef as L, useState as R } from "react";
+import { Fragment as fe, jsx as z, jsxs as B } from "react/jsx-runtime";
+import { AttachmentCard as pe, FileDndOverlay as me } from "@epam/ai-dial-attachment-input";
+import { BuilderFormContainer as he } from "@epam/ai-dial-builder-form";
+import { LazyMarkdownEditor as ge } from "@epam/ai-dial-ui-kit/editors";
 //#region src/types/projects-sort-key.ts
-var N = /* @__PURE__ */ function(e) {
+var V = /* @__PURE__ */ function(e) {
 	return e.Newest = "newest", e.Oldest = "oldest", e.NameAsc = "name-asc", e;
-}({}), he = (e, t) => {
+}({}), _e = (e, t) => {
 	let n = t.trim().toLocaleLowerCase();
 	return n ? e.filter((e) => e.name.toLocaleLowerCase().includes(n)) : e;
-}, ge = (e, t, n) => {
+}, H = (e, t, n) => {
 	let r = new Intl.Collator(n, {
 		sensitivity: "base",
 		numeric: !0
-	}), i = (e, t) => r.compare(e.name, t.name);
-	if (t === N.NameAsc) return [...e].sort(i);
-	let a = t === N.Oldest ? 1 : -1;
-	return [...e].sort((e, t) => e.updatedAt == null && t.updatedAt == null ? i(e, t) : e.updatedAt == null ? 1 : t.updatedAt == null ? -1 : (e.updatedAt - t.updatedAt) * a || i(e, t));
-}, P = {
-	card: "_card_1b611_1",
-	title: "_title_1b611_5",
-	footer: "_footer_1b611_9",
-	path: "_path_1b611_13"
-}, F = (e, t) => [e, ...(t ?? "").split("/").filter((e) => e.length > 0)], I = ({ project: e, searchQuery: t, sourceLabel: n, folderPathLabel: r, titleClassName: i, pathLabelClassName: a, pathLeafClassName: o }) => /* @__PURE__ */ A("li", {
-	className: "flex min-w-0",
-	children: /* @__PURE__ */ j(p, {
-		"aria-label": e.name,
-		className: l("flex w-full min-w-0 flex-col gap-3", P.card),
-		children: [/* @__PURE__ */ A(x, {
-			text: e.name,
-			query: t,
-			maxLines: 1,
-			className: l("min-w-0", i, P.title)
-		}), /* @__PURE__ */ A(y, {
-			segments: F(n, e.parentPath),
-			ariaLabel: r,
-			labelClassName: l(a, P.path),
-			leafClassName: l(o, P.path),
-			className: l("mt-auto pt-3", P.footer)
-		})]
-	})
-}), L = {
+	}), i = (e, t) => r.compare(e.name, t.name), a = (e, t) => Number(t.isPinned ?? !1) - Number(e.isPinned ?? !1);
+	if (t === V.NameAsc) return [...e].sort((e, t) => a(e, t) || i(e, t));
+	let o = t === V.Oldest ? 1 : -1;
+	return [...e].sort((e, t) => {
+		let n = a(e, t);
+		return n === 0 ? e.updatedAt == null && t.updatedAt == null ? i(e, t) : e.updatedAt == null ? 1 : t.updatedAt == null ? -1 : (e.updatedAt - t.updatedAt) * o || i(e, t) : n;
+	});
+}, U = {
+	card: "_card_175or_1",
+	title: "_title_175or_5",
+	footer: "_footer_175or_9",
+	path: "_path_175or_13",
+	pin: "_pin_175or_17",
+	link: "_link_175or_23",
+	aboveLink: "_aboveLink_175or_39",
+	interactive: "_interactive_175or_44"
+}, ve = (e, t) => [e, ...(t ?? "").split("/").filter((e) => e.length > 0)], ye = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey, W = ({ project: e, searchQuery: t, sourceLabel: n, folderPathLabel: r, pinnedLabel: i, href: a, onOpen: o, titleClassName: ee, pathLabelClassName: s, pathLeafClassName: c }) => {
+	let u = /* @__PURE__ */ z(S, {
+		text: e.name,
+		query: t,
+		maxLines: 1,
+		className: l("min-w-0", ee, U.title, a != null && U.aboveLink)
+	});
+	return /* @__PURE__ */ z("li", {
+		className: "flex min-w-0",
+		children: /* @__PURE__ */ B(p, {
+			"aria-label": e.name,
+			className: l("relative flex w-full min-w-0 flex-col gap-3", U.card, a != null && U.interactive),
+			children: [/* @__PURE__ */ B("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [a == null ? /* @__PURE__ */ z("div", {
+					className: "min-w-0 flex-1",
+					children: u
+				}) : /* @__PURE__ */ z("a", {
+					href: a,
+					onClick: (t) => {
+						o != null && ye(t) && (t.preventDefault(), o(e.id));
+					},
+					className: l("min-w-0 flex-1", U.link),
+					children: u
+				}), e.isPinned && /* @__PURE__ */ B("span", {
+					className: l("shrink-0", U.pin),
+					children: [/* @__PURE__ */ z(k, {
+						size: m.SM,
+						"aria-hidden": !0
+					}), /* @__PURE__ */ z("span", {
+						className: "sr-only",
+						children: i
+					})]
+				})]
+			}), /* @__PURE__ */ z(y, {
+				segments: ve(n, e.parentPath),
+				ariaLabel: r,
+				labelClassName: l(s, U.path),
+				leafClassName: l(c, U.path),
+				className: l("mt-auto pt-3", U.footer, a != null && U.aboveLink)
+			})]
+		})
+	});
+}, G = {
 	container: "_container_4rer8_1",
 	subtitle: "_subtitle_4rer8_5",
 	sortButton: "_sortButton_4rer8_9"
-}, R = ({ projects: e, isLoading: t = !1, hasError: n = !1, incompleteSources: i = [], onRetry: a, onCreateProject: s, searchQuery: c, onSearchQueryChange: ee, sortKey: u, onSortKeyChange: p, labels: _, locale: v, styles: y }) => {
-	let { colors: x, typography: S } = y ?? {}, re = S?.titleClassName ?? "dial-h1-text", C = S?.subtitleClassName ?? "dial-body-text", se = S?.cardTitleClassName ?? "dial-body-semi-text", ue = S?.pathLabelClassName ?? "dial-tiny-text", w = S?.pathLeafClassName ?? "dial-tiny-semi-text", T = o({
-		"--pr-bg": x?.background,
-		"--pr-subtitle-text": x?.subtitleText,
-		"--pr-sort-text": x?.sortButtonText,
-		"--pr-card-bg": x?.cardBackground,
-		"--pr-card-title-text": x?.cardTitleText,
-		"--pr-card-divider": x?.cardDivider,
-		"--pr-path-text": x?.pathText
-	}), de = c.trim(), E = i.length > 0, O = E && e.length === 0, k = D(() => ge(he(e, c), u, v), [
+}, be = ({ projects: e, isLoading: t = !1, hasError: n = !1, incompleteSources: r = [], onRetry: a, onCreateProject: o, onOpenProject: s, getProjectHref: c, searchQuery: u, onSearchQueryChange: d, sortKey: p, onSortKeyChange: g, labels: _, locale: v, styles: ae }) => {
+	let { colors: y, typography: x } = ae ?? {}, S = x?.titleClassName ?? "dial-h1-text", C = x?.subtitleClassName ?? "dial-body-text", w = x?.cardTitleClassName ?? "dial-body-semi-text", oe = x?.pathLabelClassName ?? "dial-tiny-text", E = x?.pathLeafClassName ?? "dial-tiny-semi-text", le = ee({
+		"--pr-bg": y?.background,
+		"--pr-subtitle-text": y?.subtitleText,
+		"--pr-sort-text": y?.sortButtonText,
+		"--pr-card-bg": y?.cardBackground,
+		"--pr-card-hover-bg": y?.cardHoverBackground,
+		"--pr-card-title-text": y?.cardTitleText,
+		"--pr-card-divider": y?.cardDivider,
+		"--pr-path-text": y?.pathText
+	}), ue = u.trim(), O = r.length > 0, k = O && e.length === 0, j = I(() => H(_e(e, u), p, v), [
 		e,
-		c,
 		u,
+		p,
 		v
-	]), fe = _.sortOptions.find((e) => e.value === u)?.label ?? _.sortLabel, pe = D(() => _.sortOptions.map((e) => ({
+	]), M = _.sortOptions.find((e) => e.value === p)?.label ?? _.sortLabel, N = I(() => _.sortOptions.map((e) => ({
 		key: e.value,
 		label: e.label,
-		mark: ie.Check,
-		checked: e.value === u,
-		onClick: () => p(e.value)
+		mark: T.Check,
+		checked: e.value === p,
+		onClick: () => g(e.value)
 	})), [
 		_.sortOptions,
-		u,
-		p
-	]), me = (e) => {
-		ee(e ?? "");
-	}, M = () => {
-		if (!t) return n ? _.errorLabel : E ? _.incompleteLabel : e.length === 0 ? _.emptyStateLabel : k.length === 0 ? _.noResultsLabel : _.resultCountLabel(k.length);
-	}, N = () => s ? /* @__PURE__ */ A(d, {
+		p,
+		g
+	]), P = (e) => {
+		d(e ?? "");
+	}, de = () => {
+		if (!t) return n ? _.errorLabel : O ? _.incompleteLabel : e.length === 0 ? _.emptyStateLabel : j.length === 0 ? _.noResultsLabel : _.resultCountLabel(j.length);
+	}, F = () => o ? /* @__PURE__ */ z(te, {
 		label: _.createProjectLabel,
-		variant: f.Primary,
-		iconBefore: /* @__PURE__ */ A(le, {
+		variant: re.Primary,
+		iconBefore: /* @__PURE__ */ z(A, {
 			size: m.SM,
 			stroke: h,
 			"aria-hidden": !0
 		}),
-		onClick: s,
+		onClick: o,
 		className: "shrink-0"
-	}) : void 0, P = () => t ? /* @__PURE__ */ A(oe, {}) : n || O ? /* @__PURE__ */ j("div", {
+	}) : void 0, L = () => t ? /* @__PURE__ */ z(ce, {}) : n || k ? /* @__PURE__ */ B("div", {
 		className: "flex flex-col items-center gap-3",
-		children: [/* @__PURE__ */ A("p", {
-			className: l(C, L.subtitle),
+		children: [/* @__PURE__ */ z("p", {
+			className: l(C, G.subtitle),
 			children: n ? _.errorLabel : _.incompleteLabel
-		}), /* @__PURE__ */ A(b, {
+		}), /* @__PURE__ */ z(b, {
 			label: _.retryLabel,
 			onClick: a
 		})]
-	}) : e.length === 0 ? /* @__PURE__ */ A(r, {
+	}) : e.length === 0 ? /* @__PURE__ */ z(i, {
 		label: _.emptyStateLabel,
 		description: _.emptyStateDescription,
-		action: N()
-	}) : k.length === 0 ? /* @__PURE__ */ A(r, { label: _.noResultsLabel }) : /* @__PURE__ */ A("ul", {
+		action: F()
+	}) : j.length === 0 ? /* @__PURE__ */ z(i, { label: _.noResultsLabel }) : /* @__PURE__ */ z("ul", {
 		className: "m-0 grid w-full max-w-[1116px] min-w-0 list-none grid-cols-1 gap-5 p-0 desktop:grid-cols-3",
-		children: k.map((e) => /* @__PURE__ */ A(I, {
+		children: j.map((e) => /* @__PURE__ */ z(W, {
 			project: e,
-			searchQuery: de,
+			searchQuery: ue,
 			sourceLabel: _.sourceLabels[e.source],
 			folderPathLabel: _.folderPathLabel,
-			titleClassName: se,
-			pathLabelClassName: ue,
-			pathLeafClassName: w
+			pinnedLabel: _.pinnedLabel ?? "Pinned",
+			href: c?.(e.id),
+			onOpen: s,
+			titleClassName: w,
+			pathLabelClassName: oe,
+			pathLeafClassName: E
 		}, e.id))
-	}), F = t || n || k.length === 0;
-	return /* @__PURE__ */ j("div", {
-		style: T,
-		className: l("flex h-full w-full min-w-0 flex-col gap-4 overflow-y-auto px-4 py-4 desktop:gap-6 desktop:px-8", L.container),
+	}), R = t || n || j.length === 0;
+	return /* @__PURE__ */ B("div", {
+		style: le,
+		className: l("flex h-full w-full min-w-0 flex-col gap-4 overflow-y-auto px-4 py-4 desktop:gap-6 desktop:px-8", G.container),
 		children: [
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex min-w-0 items-start justify-between gap-3",
-				children: [/* @__PURE__ */ j("div", {
+				children: [/* @__PURE__ */ B("div", {
 					className: "min-w-0",
-					children: [/* @__PURE__ */ A("h1", {
-						className: l("break-words", re),
+					children: [/* @__PURE__ */ z("h1", {
+						className: l("break-words", S),
 						children: _.title
-					}), /* @__PURE__ */ A("p", {
-						className: l("mt-1", C, L.subtitle),
+					}), /* @__PURE__ */ z("p", {
+						className: l("mt-1", C, G.subtitle),
 						children: _.subtitle
 					})]
-				}), N()]
+				}), F()]
 			}),
-			/* @__PURE__ */ j("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex flex-col gap-3 desktop:flex-row desktop:items-center",
-				children: [/* @__PURE__ */ A("div", {
+				children: [/* @__PURE__ */ z("div", {
 					role: "search",
 					className: "min-w-0 flex-1",
-					children: /* @__PURE__ */ A(ae, {
-						value: c,
-						onChange: me,
+					children: /* @__PURE__ */ z(se, {
+						value: u,
+						onChange: P,
 						placeholder: _.searchPlaceholder,
 						clearLabel: _.clearSearchLabel,
 						"aria-label": _.searchAriaLabel,
-						size: g.Large
+						size: ie.Large
 					})
-				}), _.sortOptions.length > 0 && /* @__PURE__ */ A("div", {
+				}), _.sortOptions.length > 0 && /* @__PURE__ */ z("div", {
 					role: "group",
 					"aria-label": _.sortLabel,
 					className: "shrink-0",
-					children: /* @__PURE__ */ A(ne, {
-						items: pe,
-						label: fe,
-						variant: f.Primary,
-						appearance: te.Ghost,
-						iconBefore: /* @__PURE__ */ A(ce, {
+					children: /* @__PURE__ */ z(f, {
+						items: N,
+						label: M,
+						variant: re.Primary,
+						appearance: ne.Ghost,
+						iconBefore: /* @__PURE__ */ z(D, {
 							size: m.SM,
 							"aria-hidden": !0,
 							stroke: h
 						}),
-						className: L.sortButton
+						className: G.sortButton
 					})
 				})]
 			}),
-			/* @__PURE__ */ A("span", {
+			/* @__PURE__ */ z("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: M()
+				children: de()
 			}),
-			E && !t && !n && !O && /* @__PURE__ */ j("div", {
+			O && !t && !n && !k && /* @__PURE__ */ B("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ A("p", {
-					className: l(C, L.subtitle),
+				children: [/* @__PURE__ */ z("p", {
+					className: l(C, G.subtitle),
 					children: _.incompleteLabel
-				}), /* @__PURE__ */ A(b, {
+				}), /* @__PURE__ */ z(b, {
 					label: _.retryLabel,
 					onClick: a
 				})]
 			}),
-			/* @__PURE__ */ A("div", {
-				className: l("flex w-full min-w-0 flex-1 flex-col", F && "items-center justify-center"),
-				children: P()
+			/* @__PURE__ */ z("div", {
+				className: l("flex w-full min-w-0 flex-1 flex-col", R && "items-center justify-center"),
+				children: L()
 			})
 		]
 	});
-}, z = /* @__PURE__ */ function(e) {
+}, xe = /* @__PURE__ */ function(e) {
 	return e.Personal = "personal", e.Shared = "shared", e.Organization = "organization", e;
-}({}), B = (e) => !!e.dataTransfer?.types.includes("Files"), _e = (e) => {
-	let [t, n] = k(!1), r = O(0);
+}({}), K = (e) => !!e.dataTransfer?.types.includes("Files"), Se = (e) => {
+	let [t, n] = R(!1), r = L(0);
 	return {
 		isDragActive: t,
 		handlers: {
-			onDragEnter: T((e) => {
-				B(e) && (e.preventDefault(), r.current += 1, n(!0));
+			onDragEnter: P((e) => {
+				K(e) && (e.preventDefault(), r.current += 1, n(!0));
 			}, []),
-			onDragLeave: T((e) => {
-				B(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
+			onDragLeave: P((e) => {
+				K(e) && (--r.current, r.current <= 0 && (r.current = 0, n(!1)));
 			}, []),
-			onDragOver: T((e) => {
-				B(e) && e.preventDefault();
+			onDragOver: P((e) => {
+				K(e) && e.preventDefault();
 			}, []),
-			onDrop: T((t) => {
-				if (!B(t)) return;
+			onDrop: P((t) => {
+				if (!K(t)) return;
 				t.preventDefault(), r.current = 0, n(!1);
 				let i = Array.from(t.dataTransfer?.files ?? []);
 				i.length > 0 && e(i);
 			}, [e])
 		}
 	};
-}, V = /* @__PURE__ */ function(e) {
+}, q = /* @__PURE__ */ function(e) {
 	return e.UnsupportedType = "unsupported-type", e.TooLarge = "too-large", e.CapacityExceeded = "capacity-exceeded", e.Duplicate = "duplicate", e.InvalidName = "invalid-name", e;
-}({}), H = /* @__PURE__ */ function(e) {
+}({}), J = /* @__PURE__ */ function(e) {
 	return e.Required = "required", e.InvalidCharacters = "invalid-characters", e.Reserved = "reserved", e.TooLong = "too-long", e;
-}({}), ve = 255, U = new RegExp(n.source, "u"), ye = /[\p{Cc}‎‏‪-‮⁦-⁩]/u, be = /* @__PURE__ */ new Set([
+}({}), Ce = 255, Y = new RegExp(r.source, "u"), we = /[\p{Cc}‎‏‪-‮⁦-⁩]/u, Te = /* @__PURE__ */ new Set([
 	".",
 	"..",
 	"v",
 	"files",
 	".dial-resource",
 	".dial-folder"
-]), xe = (e) => new TextEncoder().encode(e).length, Se = (e) => {
+]), Ee = (e) => new TextEncoder().encode(e).length, De = (e) => {
 	let t = e.trim();
-	return t.length === 0 ? H.Required : xe(t) > 255 ? H.TooLong : U.test(t) || ye.test(t) ? H.InvalidCharacters : be.has(t) ? H.Reserved : null;
-}, W = (e) => {
+	return t.length === 0 ? J.Required : Ee(t) > 255 ? J.TooLong : Y.test(t) || we.test(t) ? J.InvalidCharacters : Te.has(t) ? J.Reserved : null;
+}, X = (e) => {
 	let t = e.lastIndexOf(".");
 	return t > 0 ? e.slice(t + 1).toLowerCase() : "";
-}, Ce = (e) => e.reduce((e, t) => e + t.file.size, 0), G = 0, we = () => (G += 1, `project-context-${Date.now()}-${G}`), Te = (e) => {
+}, Oe = (e) => "isStored" in e && e.isStored, ke = (e) => Oe(e) ? e.size : e.file.size, Ae = (e) => e.reduce((e, t) => e + ke(t), 0), je = 0, Me = () => (je += 1, `project-context-${Date.now()}-${je}`), Ne = (e) => {
 	let t = e.type || c(e.name) || "application/octet-stream";
 	return {
-		id: we(),
+		id: Me(),
 		name: e.name,
 		contentType: t,
 		type: s(t),
-		status: i.Idle,
+		status: a.Idle,
 		file: e
 	};
-}, K = (e, t, n, r) => Se(e.name) != null || e.name.trim() !== e.name ? V.InvalidName : r.allowedExtensions.includes(W(e.name)) ? t.has(e.name) ? V.Duplicate : e.size > r.maxFileBytes ? V.TooLarge : n + e.size > r.maxTotalBytes ? V.CapacityExceeded : null : V.UnsupportedType, Ee = (e, t, n) => {
-	let r = new Set(t.map((e) => e.name)), i = Ce(t), a = [], o = [];
+}, Pe = (e, t, n, r) => De(e.name) != null || e.name.trim() !== e.name ? q.InvalidName : r.allowedExtensions.includes(X(e.name)) ? t.has(e.name) ? q.Duplicate : e.size > r.maxFileBytes ? q.TooLarge : n + e.size > r.maxTotalBytes ? q.CapacityExceeded : null : q.UnsupportedType, Fe = (e, t, n) => {
+	let r = new Set(t.map((e) => e.name)), i = Ae(t), a = [], o = [];
 	for (let t of e) {
-		let e = K(t, r, i, n);
-		e == null ? (r.add(t.name), i += t.size, a.push(Te(t))) : o.push({
+		let e = Pe(t, r, i, n);
+		e == null ? (r.add(t.name), i += t.size, a.push(Ne(t))) : o.push({
 			name: t.name,
 			reason: e
 		});
@@ -244,38 +280,42 @@ var N = /* @__PURE__ */ function(e) {
 		accepted: a,
 		rejected: o
 	};
-}, q = (e, t) => t <= 0 ? 100 : Math.min(100, Math.max(0, Math.round(e / t * 100))), J = {
+}, Ie = (e, t) => e <= 0 ? 0 : t <= 0 ? 100 : Math.min(100, Math.max(1, Math.round(e / t * 100))), Z = (e, t) => {
+	let n = t.trim().toLowerCase();
+	return n === "" ? e : e.filter((e) => e.name.toLowerCase().includes(n));
+}, Q = {
 	track: "_track_15unh_1",
 	fill: "_fill_15unh_5",
 	text: "_text_15unh_9"
-}, De = ({ usedBytes: e, maxBytes: t, ariaLabel: n, formatLabel: r, textClassName: i = "dial-tiny-text" }) => {
+}, Le = ({ usedBytes: e, maxBytes: t, ariaLabel: n, formatLabel: r, textClassName: i = "dial-tiny-text" }) => {
 	if (e <= 0) return null;
-	let a = q(e, t), o = r(a);
-	return /* @__PURE__ */ j("div", {
-		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ A("div", {
+	let a = Ie(e, t), o = r(a);
+	return /* @__PURE__ */ B("div", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ z("div", {
 			role: "meter",
 			"aria-label": n,
 			"aria-valuemin": 0,
 			"aria-valuemax": t,
 			"aria-valuenow": Math.min(e, t),
 			"aria-valuetext": o,
-			className: l("h-1 w-full overflow-hidden rounded-full", J.track),
-			children: /* @__PURE__ */ A("div", {
-				className: l("h-full rounded-full", J.fill),
+			className: l("h-1 w-[60px] shrink-0 overflow-hidden rounded-full", Q.track),
+			children: /* @__PURE__ */ z("div", {
+				className: l("h-full rounded-full", Q.fill),
 				style: { width: `${a}%` }
 			})
-		}), /* @__PURE__ */ A("span", {
+		}), /* @__PURE__ */ z("span", {
 			"aria-hidden": !0,
-			className: l(i, J.text),
+			className: l("whitespace-nowrap", i, Q.text),
 			children: o
 		})]
 	});
-}, Oe = {
-	formColumn: "_formColumn_16edi_1",
-	helper: "_helper_16edi_10"
-}, ke = w(async () => ({ default: (await M()).MarkdownEditor })), Ae = "device", je = "file-manager", Y = ({ values: n, errors: r, onFieldChange: i, contextFiles: s, onContextFilesChange: c, allowedExtensions: d, maxFileBytes: p, maxTotalBytes: g, onPickFromFileManager: y, onRefineDescription: b, onRefineInstructions: x, onBack: ie, onCancel: ae, onSubmit: ce, isSubmitting: w = !1, labels: M, markdownEditorTheme: N, className: he, styles: ge }) => {
-	let P = E(), F = E(), I = E(), L = E(), R = E(), z = O(null), B = O(null), V = ee(), [H, ve] = k(!1), [U, ye] = k([]), [be, xe] = k(""), W = O(void 0), G = T((e) => e ? async (t, n) => {
+}, Re = {
+	formColumn: "_formColumn_1fxsc_1",
+	helper: "_helper_1fxsc_10",
+	label: "_label_1fxsc_14"
+}, ze = M(async () => ({ default: (await ge()).MarkdownEditor })), Be = "device", Ve = "file-manager", He = ({ values: n, errors: r, onFieldChange: i, contextFiles: a, onContextFilesChange: s, allowedExtensions: c, maxFileBytes: te, maxTotalBytes: ne, onPickFromFileManager: p, onRefineDescription: g, onRefineInstructions: _, onBack: y, onCancel: b, onSubmit: x, isSubmitting: S = !1, labels: T, markdownEditorTheme: oe, className: se, styles: D }) => {
+	let ue = F(), O = F(), k = F(), A = F(), M = F(), N = L(null), fe = L(null), ge = u(), [V, _e] = R(!1), [H, U] = R([]), [ve, ye] = R(""), W = L(void 0), G = P((e) => e ? async (t, n) => {
 		if (W.current && !W.current.aborted) throw new DOMException("Busy", "AbortError");
 		W.current = n;
 		try {
@@ -283,251 +323,473 @@ var N = /* @__PURE__ */ function(e) {
 		} finally {
 			W.current === n && (W.current = void 0);
 		}
-	} : void 0, []), we = D(() => G(b), [G, b]), Te = D(() => G(x), [G, x]), K = u({
+	} : void 0, []), be = I(() => G(g), [G, g]), xe = I(() => G(_), [G, _]), K = d({
 		value: n.description,
 		onChange: (e) => i("description", e),
-		onRefine: we,
-		disabled: w
-	}), q = u({
+		onRefine: be,
+		disabled: S
+	}), q = d({
 		value: n.instructions,
 		onChange: (e) => i("instructions", e),
-		onRefine: Te,
-		disabled: w
-	}), J = K.isPending || q.isPending, Y = Se(n.name), X = r.name ?? (H && Y != null ? M.nameErrors[Y] : void 0), Me = Y != null || w || J;
+		onRefine: xe,
+		disabled: S
+	}), J = K.isPending || q.isPending, Ce = De(n.name), Y = r.name ?? (V && Ce != null ? T.nameErrors[Ce] : void 0), we = Ce != null || S || J;
 	de(() => {
-		r.name && z.current?.focus();
+		r.name && N.current?.focus();
 	}, [r.name]);
-	let Ne = D(() => Ce(s), [s]), Pe = D(() => d.map((e) => `.${e}`).join(","), [d]), Z = (e) => {
+	let Te = I(() => Ae(a), [a]), Ee = I(() => c.map((e) => `.${e}`).join(","), [c]), X = (e) => {
 		if (e.length === 0) return;
-		let { accepted: t, rejected: n } = Ee(e, s, {
-			allowedExtensions: d,
-			maxFileBytes: p,
-			maxTotalBytes: g
+		let { accepted: t, rejected: n } = Fe(e, a, {
+			allowedExtensions: c,
+			maxFileBytes: te,
+			maxTotalBytes: ne
 		});
-		ye(n), t.length > 0 && c([...s, ...t]), xe([t.length > 0 ? M.filesAddedStatus(t.length) : "", ...n.map(({ name: e, reason: t }) => M.fileRejections[t](e))].filter(Boolean).join(" "));
-	}, { isDragActive: Fe, handlers: Ie } = _e(Z), Le = (e) => {
-		let t = s.find((t) => t.id === e);
-		c(s.filter((t) => t.id !== e)), ye([]), t && xe(M.fileRemovedStatus(t.name));
-	}, Re = (e) => {
-		Z(Array.from(e.target.files ?? [])), e.target.value = "";
-	}, ze = async () => {
-		if (y) try {
-			let e = await y();
-			e && Z(e);
+		U(n), t.length > 0 && s([...a, ...t]), ye([t.length > 0 ? T.filesAddedStatus(t.length) : "", ...n.map(({ name: e, reason: t }) => T.fileRejections[t](e))].filter(Boolean).join(" "));
+	}, { isDragActive: Oe, handlers: ke } = Se(X), je = (e) => {
+		let t = a.find((t) => t.id === e);
+		s(a.filter((t) => t.id !== e)), U([]), t && ye(T.fileRemovedStatus(t.name));
+	}, Me = (e) => {
+		X(Array.from(e.target.files ?? [])), e.target.value = "";
+	}, Ne = async () => {
+		if (p) try {
+			let e = await p();
+			e && X(e);
 		} catch {}
-	}, Be = [{
-		key: Ae,
-		label: M.addFromDeviceLabel,
-		onClick: () => B.current?.click()
-	}, ...y ? [{
-		key: je,
-		label: M.addFromFileManagerLabel,
-		onClick: () => void ze()
-	}] : []], Ve = () => {
-		!Me && (!W.current || W.current.aborted) && ce();
-	}, { colors: Q, typography: He } = ge ?? {}, Ue = He?.titleClassName ?? "dial-h1-text", $ = He?.labelClassName ?? "dial-body-semi-text", We = He?.helperClassName ?? "dial-tiny-text", Ge = o({
-		"--pcf-helper-text": Q?.helperText,
-		"--pcf-meter-track": Q?.meterTrack,
-		"--pcf-meter-fill": Q?.meterFill
-	}), Ke = M.refinement, qe = r.context, Je = !!qe;
-	return /* @__PURE__ */ j("div", {
-		className: l("relative flex h-full min-h-0 w-full", he),
-		...Ie,
+	}, Pe = [{
+		key: Be,
+		label: T.addFromDeviceLabel,
+		onClick: () => fe.current?.click()
+	}, ...p ? [{
+		key: Ve,
+		label: T.addFromFileManagerLabel,
+		onClick: () => void Ne()
+	}] : []], Ie = () => {
+		!we && (!W.current || W.current.aborted) && x();
+	}, { colors: Z, typography: Q } = D ?? {}, He = Q?.titleClassName ?? "dial-h1-text", $ = l(Q?.labelClassName ?? "dial-tiny-semi-text", Re.label), Ue = Q?.helperClassName ?? "dial-tiny-text", We = ee({
+		"--pcf-helper-text": Z?.helperText,
+		"--pcf-label-text": Z?.labelText,
+		"--pcf-meter-track": Z?.meterTrack,
+		"--pcf-meter-fill": Z?.meterFill
+	}), Ge = T.refinement, Ke = r.context, qe = !!Ke;
+	return /* @__PURE__ */ B("div", {
+		className: l("relative flex h-full min-h-0 w-full", se),
+		...ke,
 		children: [
-			/* @__PURE__ */ A(pe, {
-				isVisible: Fe,
+			/* @__PURE__ */ z(me, {
+				isVisible: Oe,
 				labels: {
-					title: M.dropOverlayTitle,
-					subtitle: M.dropOverlaySubtitle
+					title: T.dropOverlayTitle,
+					subtitle: T.dropOverlaySubtitle
 				}
 			}),
-			/* @__PURE__ */ A(me, {
+			/* @__PURE__ */ z(he, {
 				labels: {
-					title: M.title,
-					backButtonLabel: M.backLabel,
-					cancelButtonLabel: M.cancelLabel,
-					submitButtonLabel: M.createLabel,
-					submittingLabel: M.submittingLabel ?? M.createLabel
+					title: T.title,
+					backButtonLabel: T.backLabel,
+					cancelButtonLabel: T.cancelLabel,
+					submitButtonLabel: T.createLabel,
+					submittingLabel: T.submittingLabel ?? T.createLabel
 				},
-				onBack: ie,
-				onCancel: ae,
-				onSubmit: Ve,
-				isCancelDisabled: w,
-				isSubmitDisabled: Me,
-				isSubmitting: w,
-				backIcon: /* @__PURE__ */ A(se, {
+				onBack: y,
+				onCancel: b,
+				onSubmit: Ie,
+				isCancelDisabled: S,
+				isSubmitDisabled: we,
+				isSubmitting: S,
+				backIcon: /* @__PURE__ */ z(le, {
 					size: m.LG,
 					stroke: h,
 					"aria-hidden": !0,
 					className: "rtl:scale-x-[-1]"
 				}),
 				styles: {
-					colors: { background: Q?.background },
+					colors: { background: Z?.background },
 					header: {
-						colors: { borderColor: Q?.headerBorder },
-						typography: { fontClassName: Ue }
+						colors: { borderColor: Z?.headerBorder },
+						typography: { fontClassName: He }
 					},
-					cssVars: Ge
+					cssVars: We
 				},
-				children: /* @__PURE__ */ j("div", {
-					className: l("mx-auto flex w-full max-w-[996px] min-w-0 flex-col gap-5 py-6", Oe.formColumn),
+				children: /* @__PURE__ */ B("div", {
+					className: l("mx-auto flex w-full max-w-[1040px] min-w-0 flex-col gap-5 py-6", Re.formColumn),
 					children: [
-						/* @__PURE__ */ j("div", {
+						/* @__PURE__ */ B("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ A(S, {
-								id: P,
-								inputRef: z,
+							children: [/* @__PURE__ */ z(C, {
+								id: ue,
+								inputRef: N,
 								value: n.name,
 								onChange: (e) => i("name", e ?? ""),
-								onBlur: () => ve(!0),
-								placeholder: M.namePlaceholder,
+								onBlur: () => _e(!0),
+								placeholder: T.namePlaceholder,
 								labelProps: {
-									label: M.nameLabel,
+									label: T.nameLabel,
 									required: !0
 								},
 								required: !0,
 								"aria-required": !0,
-								invalid: !!X,
-								"aria-invalid": !!X,
-								"aria-describedby": X ? F : void 0
-							}), X && /* @__PURE__ */ A(_, {
-								id: F,
+								invalid: !!Y,
+								"aria-invalid": !!Y,
+								"aria-describedby": Y ? O : void 0
+							}), Y && /* @__PURE__ */ z(v, {
+								id: O,
 								role: r.name ? "alert" : void 0,
-								className: We,
-								text: X
+								className: Ue,
+								text: Y
 							})]
 						}),
-						/* @__PURE__ */ A(a, {
-							isEnabled: !!b,
-							fieldId: I,
-							label: M.descriptionLabel,
+						/* @__PURE__ */ z(o, {
+							isEnabled: !!g,
+							fieldId: k,
+							label: T.descriptionLabel,
 							labelClassName: $,
-							labels: Ke,
+							labels: Ge,
 							refinement: K,
-							disabled: w || J,
-							children: /* @__PURE__ */ A(C, {
-								id: I,
+							disabled: S || J,
+							children: /* @__PURE__ */ z(E, {
+								id: k,
 								value: n.description,
 								onChange: (e) => {
 									K.reset(), i("description", e);
 								},
-								placeholder: M.descriptionPlaceholder,
-								labelProps: b ? void 0 : { label: M.descriptionLabel }
+								placeholder: T.descriptionPlaceholder,
+								labelProps: g ? void 0 : { label: T.descriptionLabel }
 							})
 						}),
-						/* @__PURE__ */ A(a, {
-							isEnabled: !!x,
-							fieldId: L,
-							label: M.instructionsLabel,
+						/* @__PURE__ */ z(o, {
+							isEnabled: !!_,
+							fieldId: A,
+							label: T.instructionsLabel,
 							labelClassName: $,
-							labels: Ke,
+							labels: Ge,
 							refinement: q,
-							disabled: w || J,
-							children: /* @__PURE__ */ j("div", {
-								className: "flex flex-1 flex-col gap-1",
-								children: [!x && /* @__PURE__ */ A(re, {
-									htmlFor: L,
+							disabled: S || J,
+							children: /* @__PURE__ */ B("div", {
+								className: "flex flex-1 flex-col gap-2",
+								children: [!_ && /* @__PURE__ */ z(w, {
+									htmlFor: A,
 									className: $,
-									label: M.instructionsLabel
-								}), /* @__PURE__ */ A("div", {
-									ref: V,
+									label: T.instructionsLabel
+								}), /* @__PURE__ */ z("div", {
+									ref: ge,
 									className: l("w-full", e, t),
-									children: /* @__PURE__ */ A(ue, {
-										fallback: /* @__PURE__ */ A(oe, {}),
-										children: /* @__PURE__ */ A(ke, {
-											id: L,
+									children: /* @__PURE__ */ z(j, {
+										fallback: /* @__PURE__ */ z(ce, {}),
+										children: /* @__PURE__ */ z(ze, {
+											id: A,
 											value: n.instructions,
 											onChange: (e) => {
 												q.reset(), i("instructions", e);
 											},
-											height: 360,
-											theme: N,
-											placeholder: M.instructionsPlaceholder
+											height: 176,
+											theme: oe,
+											placeholder: T.instructionsPlaceholder
 										})
 									})
 								})]
 							})
 						}),
-						/* @__PURE__ */ j("section", {
-							"aria-labelledby": R,
-							className: "flex flex-col gap-3",
+						/* @__PURE__ */ B("section", {
+							"aria-labelledby": M,
+							className: "flex flex-col gap-2",
 							children: [
-								/* @__PURE__ */ j("div", {
-									className: "flex min-w-0 items-center justify-between gap-2",
-									children: [/* @__PURE__ */ A("h2", {
-										id: R,
+								/* @__PURE__ */ B("div", {
+									className: "flex min-w-0 flex-wrap items-center justify-between gap-2",
+									children: [/* @__PURE__ */ z("h2", {
+										id: M,
 										className: $,
-										children: M.contextLabel
-									}), /* @__PURE__ */ A(ne, {
-										items: Be,
-										label: M.addLabel,
-										variant: f.Primary,
-										appearance: te.Ghost,
-										disabled: w,
-										iconBefore: /* @__PURE__ */ A(le, {
-											size: m.SM,
-											stroke: h,
-											"aria-hidden": !0
-										})
+										children: T.contextLabel
+									}), /* @__PURE__ */ B("div", {
+										className: "flex min-w-0 items-center gap-4",
+										children: [/* @__PURE__ */ z(Le, {
+											usedBytes: Te,
+											maxBytes: ne,
+											ariaLabel: T.capacityMeterLabel,
+											formatLabel: T.capacityLabel,
+											textClassName: Ue
+										}), /* @__PURE__ */ z(f, {
+											items: Pe,
+											label: T.addLabel,
+											variant: re.Neutral,
+											size: ie.Small,
+											disabled: S
+										})]
 									})]
 								}),
-								/* @__PURE__ */ A("input", {
-									ref: B,
+								/* @__PURE__ */ z("input", {
+									ref: fe,
 									type: "file",
 									multiple: !0,
-									accept: Pe,
+									accept: Ee,
 									tabIndex: -1,
 									"aria-hidden": !0,
 									className: "sr-only",
-									onChange: Re
+									onChange: Me
 								}),
-								/* @__PURE__ */ A(v, {
-									label: M.dropZoneLabel,
-									description: M.dropZoneHint,
-									accept: Pe,
+								/* @__PURE__ */ z(ae, {
+									label: T.dropZoneLabel,
+									description: T.dropZoneHint,
+									accept: Ee,
 									multiple: !0,
-									disabled: w,
-									onChange: Z,
-									onReject: Z
+									disabled: S,
+									onChange: X,
+									onReject: X
 								}),
-								(U.length > 0 || Je) && /* @__PURE__ */ j("ul", {
-									className: l("flex flex-col gap-1", We, Oe.helper),
-									children: [U.map(({ name: e, reason: t }) => /* @__PURE__ */ A("li", { children: M.fileRejections[t](e) }, `${t}:${e}`)), Je && /* @__PURE__ */ A("li", {
+								(H.length > 0 || qe) && /* @__PURE__ */ B("ul", {
+									className: l("flex flex-col gap-1", Ue, Re.helper),
+									children: [H.map(({ name: e, reason: t }) => /* @__PURE__ */ z("li", { children: T.fileRejections[t](e) }, `${t}:${e}`)), qe && /* @__PURE__ */ z("li", {
 										role: "alert",
-										children: qe
+										children: Ke
 									})]
 								}),
-								s.length > 0 && /* @__PURE__ */ A("ul", {
-									className: "flex min-w-0 flex-wrap gap-2",
-									children: s.map((e) => /* @__PURE__ */ A("li", {
+								a.length > 0 && /* @__PURE__ */ z("ul", {
+									className: "flex min-w-0 flex-wrap gap-2 pt-1",
+									children: a.map((e) => /* @__PURE__ */ z("li", {
 										className: "min-w-0",
-										children: /* @__PURE__ */ A(fe, {
+										children: /* @__PURE__ */ z(pe, {
 											attachment: e,
-											onRemove: Le,
-											labels: { removeLabel: M.removeFileLabel(e.name) }
+											onRemove: je,
+											labels: { removeLabel: T.removeFileLabel(e.name) }
 										})
 									}, e.id))
-								}),
-								/* @__PURE__ */ A(De, {
-									usedBytes: Ne,
-									maxBytes: g,
-									ariaLabel: M.capacityMeterLabel,
-									formatLabel: M.capacityLabel,
-									textClassName: We
 								})
 							]
 						})
 					]
 				})
 			}),
-			/* @__PURE__ */ A("span", {
+			/* @__PURE__ */ z("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: w ? M.creatingStatus : be
+				children: S ? T.creatingStatus : ve
 			})
 		]
 	});
-};
+}, $ = {
+	container: "_container_16lvl_1",
+	header: "_header_16lvl_5",
+	title: "_title_16lvl_9",
+	body: "_body_16lvl_13",
+	secondary: "_secondary_16lvl_17",
+	panel: "_panel_16lvl_21"
+}, Ue = (e) => ({
+	id: e.name,
+	name: e.name,
+	contentType: e.contentType,
+	type: s(e.contentType),
+	status: a.Idle
+}), We = N(({ project: e, isLoading: t = !1, hasError: r = !1, isNotFound: a = !1, isPinned: o, isPinPending: s = !1, contextSearchQuery: c, onContextSearchQueryChange: u, onBack: d, onTogglePin: ne, onPublish: f, onEdit: p, onShare: ie, onDelete: v, onDownload: ae, onOpenFile: y, onRetry: S, onBrowseProjects: C, labels: w, styles: T }) => {
+	let { colors: E, typography: D } = T ?? {}, A = D?.titleClassName ?? "dial-h2-text", j = D?.panelTitleClassName ?? "dial-body-semi-text", M = D?.sectionTitleClassName ?? "dial-tiny-text", N = D?.bodyClassName ?? "dial-small-text", P = D?.helperClassName ?? "dial-tiny-text", de = D?.instructionsHeadingClassName ?? "dial-small-semi-text", L = ee({
+		"--pv-bg": E?.background,
+		"--pv-border": E?.border,
+		"--pv-heading-text": E?.headingText,
+		"--pv-body-text": E?.bodyText,
+		"--pv-secondary-text": E?.secondaryText
+	}), R = I(() => e?.contextFiles ?? [], [e]), me = I(() => Z(R, c), [R, c]), he = c.trim(), ge = F(), V = I(() => {
+		let e = l("mb-1 mt-3 first:mt-0", de);
+		return {
+			h1: e,
+			h2: e,
+			h3: e,
+			h4: e,
+			h5: e,
+			h6: e,
+			p: N,
+			ul: N,
+			ol: N
+		};
+	}, [N, de]), _e = (e) => {
+		let t = [];
+		return e && f && t.push({
+			key: "publish",
+			label: w.publishLabel,
+			onClick: f
+		}), e && p && t.push({
+			key: "edit",
+			label: w.editLabel,
+			onClick: p
+		}), ie && t.push({
+			key: "share",
+			label: w.shareLabel,
+			onClick: ie
+		}), t.push({
+			key: "download",
+			label: w.downloadLabel,
+			onClick: ae
+		}), v && t.push({
+			key: "delete",
+			label: w.deleteLabel,
+			danger: !0,
+			onClick: v
+		}), t;
+	}, H = (e, t) => /* @__PURE__ */ z("div", {
+		className: t,
+		children: /* @__PURE__ */ z(g, {
+			items: _e(e),
+			matchReferenceWidth: !1,
+			listClassName: "w-[200px]",
+			children: /* @__PURE__ */ z(x, {
+				icon: /* @__PURE__ */ z(ue, {
+					size: m.MD,
+					"aria-hidden": !0,
+					stroke: h
+				}),
+				"aria-label": w.moreActionsLabel
+			})
+		})
+	});
+	return t || r || a || e == null ? /* @__PURE__ */ z("div", {
+		style: L,
+		className: l("flex h-full w-full min-w-0 items-center justify-center p-4", $.container),
+		children: t ? /* @__PURE__ */ z(ce, {}) : r ? /* @__PURE__ */ B("div", {
+			className: "flex flex-col items-center gap-3",
+			children: [/* @__PURE__ */ z("p", {
+				role: "alert",
+				className: l(N, $.body),
+				children: w.errorLabel
+			}), /* @__PURE__ */ z(b, {
+				label: w.retryLabel,
+				onClick: S
+			})]
+		}) : /* @__PURE__ */ B("div", {
+			className: "flex flex-col items-center gap-3",
+			children: [/* @__PURE__ */ z("p", {
+				role: "alert",
+				className: l(N, $.body),
+				children: w.notFoundLabel
+			}), /* @__PURE__ */ z(b, {
+				label: w.browseProjectsLabel,
+				onClick: C
+			})]
+		})
+	}) : /* @__PURE__ */ B("div", {
+		style: L,
+		className: l("flex h-full w-full min-w-0 flex-col overflow-y-auto", $.container),
+		children: [/* @__PURE__ */ B("header", {
+			className: l("flex min-w-0 items-center gap-2 px-4 py-3 desktop:px-8", $.header),
+			children: [
+				/* @__PURE__ */ z(x, {
+					icon: /* @__PURE__ */ z(le, {
+						size: m.LG,
+						className: "rtl:scale-x-[-1]",
+						"aria-hidden": !0,
+						stroke: h
+					}),
+					"aria-label": w.backLabel,
+					onClick: d
+				}),
+				/* @__PURE__ */ z("h1", {
+					className: l("min-w-0 flex-1", A, $.title),
+					children: /* @__PURE__ */ z(_, { text: e.name })
+				}),
+				/* @__PURE__ */ z(x, {
+					icon: o ? /* @__PURE__ */ z(k, {
+						size: m.MD,
+						"aria-hidden": !0
+					}) : /* @__PURE__ */ z(O, {
+						size: m.MD,
+						"aria-hidden": !0,
+						stroke: h
+					}),
+					"aria-label": w.pinLabel,
+					"aria-pressed": o,
+					"aria-disabled": s || void 0,
+					onClick: () => {
+						s || ne();
+					}
+				}),
+				f && /* @__PURE__ */ z(oe, {
+					label: w.publishLabel,
+					onClick: f,
+					className: "hidden shrink-0 desktop:inline-flex"
+				}),
+				p && /* @__PURE__ */ z(te, {
+					label: w.editLabel,
+					variant: re.Primary,
+					onClick: p,
+					className: "hidden shrink-0 desktop:inline-flex"
+				}),
+				H(!1, "hidden desktop:block"),
+				H(!0, "desktop:hidden")
+			]
+		}), /* @__PURE__ */ z("div", {
+			className: "flex min-w-0 flex-1 flex-col desktop:flex-row desktop:justify-end",
+			children: /* @__PURE__ */ B("aside", {
+				"aria-labelledby": ge,
+				className: l("flex w-full min-w-0 flex-col gap-5 border-t px-4 py-6 desktop:w-[488px] desktop:shrink-0 desktop:border-s desktop:border-t-0 desktop:px-8", $.panel),
+				children: [
+					/* @__PURE__ */ z("h2", {
+						id: ge,
+						className: l(j, $.title),
+						children: w.detailsLabel
+					}),
+					e.description !== "" && /* @__PURE__ */ B("section", {
+						className: "flex min-w-0 flex-col gap-1",
+						children: [/* @__PURE__ */ z("h3", {
+							className: l(M, $.secondary),
+							children: w.descriptionLabel
+						}), /* @__PURE__ */ z("p", {
+							className: l("break-words whitespace-pre-line", N, $.body),
+							children: e.description
+						})]
+					}),
+					e.instructions !== "" && /* @__PURE__ */ B("section", {
+						className: "flex min-w-0 flex-col gap-1",
+						children: [/* @__PURE__ */ z("h3", {
+							className: l(M, $.secondary),
+							children: w.instructionsLabel
+						}), /* @__PURE__ */ z("div", {
+							className: l("min-w-0 break-words", N, $.body),
+							children: /* @__PURE__ */ z(n, {
+								content: e.instructions,
+								classNames: V
+							})
+						})]
+					}),
+					/* @__PURE__ */ B("section", {
+						className: "flex min-w-0 flex-col gap-2",
+						children: [/* @__PURE__ */ z("h3", {
+							className: l(M, $.secondary),
+							children: w.contextLabel
+						}), R.length === 0 ? /* @__PURE__ */ z(i, { label: w.emptyContextLabel }) : /* @__PURE__ */ B(fe, { children: [
+							/* @__PURE__ */ z("div", {
+								role: "search",
+								children: /* @__PURE__ */ z(se, {
+									value: c,
+									onChange: (e) => u(e ?? ""),
+									placeholder: w.contextSearchPlaceholder,
+									clearLabel: w.clearSearchLabel,
+									"aria-label": w.contextSearchAriaLabel
+								})
+							}),
+							me.length === 0 ? /* @__PURE__ */ z("p", {
+								className: l(P, $.secondary),
+								children: w.noContextMatchesLabel
+							}) : /* @__PURE__ */ z("ul", {
+								className: "m-0 flex min-w-0 list-none flex-wrap gap-2 p-0 pt-2",
+								children: me.map((e) => /* @__PURE__ */ z("li", {
+									className: "min-w-0",
+									children: /* @__PURE__ */ z(pe, {
+										attachment: Ue(e),
+										searchQuery: he,
+										onClick: y,
+										labels: { clickLabel: w.openFileLabel(e.name) }
+									})
+								}, e.name))
+							}),
+							/* @__PURE__ */ z("span", {
+								role: "status",
+								"aria-live": "polite",
+								className: "sr-only",
+								children: he === "" ? "" : w.contextResultCountLabel(me.length)
+							})
+						] })]
+					})
+				]
+			})
+		})]
+	});
+});
 //#endregion
-export { V as ContextFileRejection, ve as PROJECT_NAME_MAX_BYTES, Y as ProjectCreateForm, H as ProjectNameError, z as ProjectSource, R as Projects, N as ProjectsSortKey, Ee as checkContextFiles, Ce as getContextFilesSize, Se as validateProjectName };
+export { q as ContextFileRejection, Ce as PROJECT_NAME_MAX_BYTES, He as ProjectCreateForm, J as ProjectNameError, xe as ProjectSource, We as ProjectView, be as Projects, V as ProjectsSortKey, Fe as checkContextFiles, Z as filterContextFileItems, Ae as getContextFilesSize, Oe as isStoredContextFile, De as validateProjectName };