@burdenoff/fe-libs 2026.527.3 → 2026.527.4

package/dist/tag/TagsWidget.js

@@ -1,279 +1,134 @@
 import { useGatewayClient as e } from "../shared/graphql/GatewayContext.js";
 import { cn as t } from "../shared-utils.js";
-import { Command as n, CommandEmpty as r, CommandGroup as i, CommandInput as a, CommandItem as o, CommandList as ee } from "../ui/command.js";
-import { Popover as te, PopoverContent as ne, PopoverTrigger as re } from "../ui/popover.js";
-import { TagBadge as ie } from "./TagBadge.js";
-import { useCallback as s, useEffect as ae, useRef as oe, useState as c } from "react";
-import { Loader2 as l, Plus as u, Search as d, Tag as f, X as p } from "lucide-react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { gql as g } from "@apollo/client";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../ui/popover.js";
+import { CREATE_TAG as a, NOTIFY_TAG_ASSIGNED as ee, NOTIFY_TAG_REMOVED as o, SEARCH_TAGS as s } from "./tagsWidget/operations.js";
+import { useVocabResolver as c } from "./tagsWidget/useVocabResolver.js";
+import { TagBadgeList as l } from "./tagsWidget/TagBadgeList.js";
+import { AddTagTrigger as te } from "./tagsWidget/AddTagTrigger.js";
+import { TagSearchPopover as u } from "./tagsWidget/TagSearchPopover.js";
+import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useLazyQuery as _, useMutation as v } from "@apollo/client/react";
 //#region src/tag/TagsWidget.tsx
-var se = g`
-  query TagsWidget_SearchTags($query: String!, $vocabularyId: ID, $limit: Int) {
-    searchTags(query: $query, vocabularyId: $vocabularyId, limit: $limit) {
-      id
-      key
-      label
-      value
-      vocabularyId
-      parentId
-      hierarchyPath
-      color
-      icon
-      description
-      vocabulary {
-        key
-      }
-    }
-  }
-`, ce = g`
-  query TagsWidget_GetVocabularyByKey($key: String!) {
-    getVocabularyByKey(key: $key) {
-      id
-      key
-      name
-    }
-  }
-`, y = g`
-  mutation TagsWidget_CreateVocabulary($input: CreateVocabularyInput!) {
-    createVocabulary(input: $input) {
-      id
-      key
-      name
-    }
-  }
-`, le = g`
-  mutation TagsWidget_CreateTag($input: CreateTagInput!) {
-    createTag(input: $input) {
-      id
-      key
-      label
-      value
-      vocabularyId
-      parentId
-      hierarchyPath
-      color
-      icon
-      vocabulary {
-        key
-      }
-    }
-  }
-`, b = g`
-  mutation TagsWidget_NotifyTagAssigned($input: NotifyTagAssignedInput!) {
-    notifyTagAssigned(input: $input)
-  }
-`, ue = g`
-  mutation TagsWidget_NotifyTagRemoved($key: String!, $entityType: String!, $entityId: ID!) {
-    notifyTagRemoved(key: $key, entityType: $entityType, entityId: $entityId)
-  }
-`, x = "general";
-function S({ entityType: g, entityId: S, workspaceId: de, tags: C, onAdd: w, onRemove: T, vocabularyId: fe, allowCreate: E = !0, syncGraphNotifications: D = !0, maxTags: O = 20, className: pe }) {
-	let [me, k] = c(!1), [A, j] = c(""), [M, N] = c(null), [P, F] = c(fe), I = oe(null), L = e("workspace"), R = !de || !S, he = new Set(C.map((e) => e.id)), z = C.length < O, [B, { data: ge, loading: V }] = _(se, { client: L }), H = (ge?.searchTags ?? []).filter((e) => !he.has(e.id)), [U] = _(ce, { client: L }), [W] = v(y, { client: L }), [G, { loading: K }] = v(le, { client: L }), [q, J] = c(!1), [Y] = v(b, { client: L }), [X] = v(ue, { client: L }), Z = s(async () => {
-		if (P) return P;
-		let e = (await U({ variables: { key: x } })).data?.getVocabularyByKey;
-		if (e) return F(e.id), e.id;
-		let t = (await W({ variables: { input: {
-			key: x,
-			name: "General",
-			description: "Default vocabulary for general-purpose tags",
-			scope: "WORKSPACE",
-			allowCustomTags: !0
-		} } })).data?.createVocabulary;
-		if (!t) throw Error("Failed to create default vocabulary");
-		return F(t.id), t.id;
-	}, [
-		P,
-		U,
-		W
-	]), _e = s((e) => {
-		j(e), M && N(null), I.current && clearTimeout(I.current), e.trim() && (I.current = setTimeout(() => {
-			B({ variables: {
+function y({ entityType: y, entityId: b, workspaceId: x, tags: S, onAdd: C, onRemove: w, vocabularyId: T, allowCreate: E = !0, syncGraphNotifications: D = !0, maxTags: O = 20, className: k }) {
+	let [A, j] = m(!1), [M, N] = m(""), [P, F] = m(null), [I, L] = m(!1), R = p(null), z = e("workspace"), { resolvedVocabId: B, resolveVocabId: V } = c(z, T), H = !x || !b, U = new Set(S.map((e) => e.id)), W = S.length < O, [G, { data: K, loading: q }] = _(s, { client: z }), J = (K?.searchTags ?? []).filter((e) => !U.has(e.id)), [Y, { loading: X }] = v(a, { client: z }), [Z] = v(ee, { client: z }), [Q] = v(o, { client: z }), ne = d((e) => {
+		N(e), P && F(null), R.current && clearTimeout(R.current), e.trim() && (R.current = setTimeout(() => {
+			G({ variables: {
 				query: e,
-				vocabularyId: P,
+				vocabularyId: B,
 				limit: 10
 			} });
 		}, 250));
 	}, [
+		G,
 		B,
-		P,
-		M
+		P
 	]);
-	ae(() => () => {
-		I.current && clearTimeout(I.current);
+	f(() => () => {
+		R.current && clearTimeout(R.current);
 	}, []);
-	let Q = s(async (e) => {
-		if (!(!z || q)) {
-			J(!0);
+	let $ = d(async (e) => {
+		if (!(!W || I)) {
+			L(!0);
 			try {
-				await w({
+				await C({
 					...e,
 					vocabularyKey: e.vocabularyKey ?? e.vocabulary?.key ?? null
-				}), j(""), k(!1), D && Y({ variables: { input: {
+				}), N(""), j(!1), D && Z({ variables: { input: {
 					key: e.key,
-					entityType: g,
-					entityId: S,
+					entityType: y,
+					entityId: b,
 					source: "MANUAL"
 				} } });
 			} finally {
-				J(!1);
+				L(!1);
 			}
 		}
 	}, [
-		Y,
-		w,
-		g,
-		S,
-		z,
-		q,
+		Z,
+		C,
+		y,
+		b,
+		W,
+		I,
 		D
-	]), ve = s(async () => {
-		if (!(!E || !A.trim() || K)) {
-			N(null);
+	]), re = d(async () => {
+		if (!(!E || !M.trim() || X)) {
+			F(null);
 			try {
-				let e = A.trim(), t = e.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+				let e = M.trim(), t = e.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
 				if (!t) {
-					N("Must contain at least one letter or number");
+					F("Must contain at least one letter or number");
 					return;
 				}
-				let n = (await G({ variables: { input: {
+				let n = (await Y({ variables: { input: {
 					key: t,
 					label: e,
-					vocabularyId: await Z()
+					vocabularyId: await V()
 				} } })).data?.createTag;
 				if (!n) throw Error("No data returned");
-				await Q(n);
+				await $(n);
 			} catch (e) {
-				N(e instanceof Error ? e.message : "Failed to create tag");
+				F(e instanceof Error ? e.message : "Failed to create tag");
 			}
 		}
 	}, [
 		E,
-		A,
-		K,
-		Z,
-		G,
-		Q
-	]), ye = s(async (e) => {
-		let t = C.find((t) => t.id === e);
-		await T(e), t && D && X({ variables: {
+		M,
+		X,
+		V,
+		Y,
+		$
+	]), ie = d(async (e) => {
+		let t = S.find((t) => t.id === e);
+		await w(e), t && D && Q({ variables: {
 			key: t.key,
-			entityType: g,
-			entityId: S
+			entityType: y,
+			entityId: b
 		} });
 	}, [
-		X,
-		T,
-		C,
-		g,
+		Q,
+		w,
 		S,
+		y,
+		b,
 		D
 	]);
-	if (R) return null;
-	let $ = E && A.trim() && !V && H.length === 0;
-	return /* @__PURE__ */ h("div", {
-		className: t("flex flex-wrap items-center gap-1.5", pe),
-		children: [C.map((e) => /* @__PURE__ */ m(ie, {
-			id: e.id,
-			label: e.label,
-			color: e.color ?? void 0,
-			icon: e.icon ?? void 0,
-			description: e.description ?? void 0,
-			removable: !0,
-			onRemove: () => void ye(e.id),
-			size: "sm"
-		}, e.id)), z && /* @__PURE__ */ h(te, {
-			open: me,
-			onOpenChange: k,
-			children: [/* @__PURE__ */ m(re, {
+	if (H) return null;
+	let ae = !!(E && M.trim() && !q && J.length === 0);
+	return /* @__PURE__ */ g("div", {
+		className: t("flex flex-wrap items-center gap-1.5", k),
+		children: [/* @__PURE__ */ h(l, {
+			tags: S,
+			onRemove: (e) => void ie(e)
+		}), W && /* @__PURE__ */ g(n, {
+			open: A,
+			onOpenChange: j,
+			children: [/* @__PURE__ */ h(i, {
 				asChild: !0,
-				children: /* @__PURE__ */ h("button", {
-					type: "button",
-					"aria-label": "Add tag",
-					className: t("inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-dashed", "border-border text-muted-foreground text-xs", "hover:border-foreground hover:text-foreground transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
-					children: [/* @__PURE__ */ m(f, { className: "size-3" }), /* @__PURE__ */ m("span", { children: C.length === 0 ? "Add tags" : "Add" })]
-				})
-			}), /* @__PURE__ */ m(ne, {
+				children: /* @__PURE__ */ h(te, { hasTags: S.length > 0 })
+			}), /* @__PURE__ */ h(r, {
 				className: "w-64 p-0",
 				align: "start",
 				side: "bottom",
 				sideOffset: 4,
-				children: /* @__PURE__ */ h(n, {
-					shouldFilter: !1,
-					children: [
-						/* @__PURE__ */ h("div", {
-							className: "flex items-center border-b border-border px-3",
-							children: [
-								/* @__PURE__ */ m(d, { className: "size-4 shrink-0 text-muted-foreground" }),
-								/* @__PURE__ */ m(a, {
-									placeholder: "Search or create a tag...",
-									value: A,
-									onValueChange: _e,
-									className: "h-9 flex-1 border-0 bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
-								}),
-								V && /* @__PURE__ */ m(l, { className: "size-3.5 shrink-0 animate-spin text-muted-foreground" })
-							]
-						}),
-						/* @__PURE__ */ h(ee, {
-							className: "max-h-48 overflow-y-auto",
-							children: [
-								A.trim() === "" && /* @__PURE__ */ m(r, {
-									className: "py-4 text-center text-xs text-muted-foreground",
-									children: "Type to search or create a tag"
-								}),
-								H.length > 0 && /* @__PURE__ */ m(i, { children: H.map((e) => /* @__PURE__ */ h(o, {
-									value: e.id,
-									onSelect: () => void Q(e),
-									className: "flex items-center gap-2 px-3 py-2 cursor-pointer",
-									disabled: q,
-									children: [
-										e.icon && /* @__PURE__ */ m("span", {
-											className: "text-sm",
-											children: e.icon
-										}),
-										/* @__PURE__ */ m("span", {
-											className: "truncate text-sm",
-											style: e.color ? { color: e.color } : void 0,
-											children: e.label
-										}),
-										q && /* @__PURE__ */ m(l, { className: "ml-auto size-3 animate-spin" })
-									]
-								}, e.id)) }),
-								$ && /* @__PURE__ */ m(i, { children: /* @__PURE__ */ h(o, {
-									value: `__create__${A}`,
-									onSelect: () => void ve(),
-									className: "flex items-center gap-2 px-3 py-2 cursor-pointer text-primary",
-									disabled: K,
-									children: [K ? /* @__PURE__ */ m(l, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ m(u, { className: "size-3.5" }), /* @__PURE__ */ m("span", {
-										className: "text-sm truncate",
-										children: K ? "Creating..." : `Create "${A}"`
-									})]
-								}) }),
-								A.trim() !== "" && !V && H.length === 0 && !$ && /* @__PURE__ */ m(r, {
-									className: "py-4 text-center text-xs text-muted-foreground",
-									children: "No tags found"
-								}),
-								M && /* @__PURE__ */ m("div", {
-									className: "px-3 py-2 text-xs text-destructive border-t border-border",
-									children: M
-								})
-							]
-						}),
-						!z && /* @__PURE__ */ h("div", {
-							className: "border-t border-border px-3 py-2 text-xs text-muted-foreground flex items-center gap-1",
-							children: [
-								/* @__PURE__ */ m(p, { className: "size-3" }),
-								"Maximum ",
-								O,
-								" tags reached"
-							]
-						})
-					]
+				children: /* @__PURE__ */ h(u, {
+					search: M,
+					onSearchChange: ne,
+					searching: q,
+					searchResults: J,
+					adding: I,
+					creating: X,
+					showCreateOption: ae,
+					createError: P,
+					canAddMore: W,
+					maxTags: O,
+					onAssign: (e) => void $(e),
+					onCreate: () => void re()
 				})
 			})]
 		})]
 	});
 }
 //#endregion
-export { S as TagsWidget };
+export { y as TagsWidget };

package/dist/tag/tagsWidget/AddTagTrigger.js

@@ -0,0 +1,14 @@
+import { cn as e } from "../../shared-utils.js";
+import { Tag as t } from "lucide-react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/tag/tagsWidget/AddTagTrigger.tsx
+function i({ hasTags: i }) {
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		"aria-label": "Add tag",
+		className: e("inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-dashed", "border-border text-muted-foreground text-xs", "hover:border-foreground hover:text-foreground transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+		children: [/* @__PURE__ */ n(t, { className: "size-3" }), /* @__PURE__ */ n("span", { children: i ? "Add" : "Add tags" })]
+	});
+}
+//#endregion
+export { i as AddTagTrigger };

package/dist/tag/tagsWidget/TagBadgeList.js

@@ -0,0 +1,17 @@
+import { TagBadge as e } from "../TagBadge.js";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/tag/tagsWidget/TagBadgeList.tsx
+function r({ tags: r, onRemove: i }) {
+	return /* @__PURE__ */ n(t, { children: r.map((t) => /* @__PURE__ */ n(e, {
+		id: t.id,
+		label: t.label,
+		color: t.color ?? void 0,
+		icon: t.icon ?? void 0,
+		description: t.description ?? void 0,
+		removable: !0,
+		onRemove: () => i(t.id),
+		size: "sm"
+	}, t.id)) });
+}
+//#endregion
+export { r as TagBadgeList };

package/dist/tag/tagsWidget/TagSearchPopover.js

@@ -0,0 +1,80 @@
+import { Command as e, CommandEmpty as t, CommandGroup as n, CommandInput as r, CommandItem as i, CommandList as a } from "../../ui/command.js";
+import { Loader2 as o, Plus as s, Search as c, X as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/tag/tagsWidget/TagSearchPopover.tsx
+function f({ search: f, onSearchChange: p, searching: m, searchResults: h, adding: g, creating: _, showCreateOption: v, createError: y, canAddMore: b, maxTags: x, onAssign: S, onCreate: C }) {
+	return /* @__PURE__ */ d(e, {
+		shouldFilter: !1,
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "flex items-center border-b border-border px-3",
+				children: [
+					/* @__PURE__ */ u(c, { className: "size-4 shrink-0 text-muted-foreground" }),
+					/* @__PURE__ */ u(r, {
+						placeholder: "Search or create a tag...",
+						value: f,
+						onValueChange: p,
+						className: "h-9 flex-1 border-0 bg-transparent px-2 text-sm outline-none placeholder:text-muted-foreground"
+					}),
+					m && /* @__PURE__ */ u(o, { className: "size-3.5 shrink-0 animate-spin text-muted-foreground" })
+				]
+			}),
+			/* @__PURE__ */ d(a, {
+				className: "max-h-48 overflow-y-auto",
+				children: [
+					f.trim() === "" && /* @__PURE__ */ u(t, {
+						className: "py-4 text-center text-xs text-muted-foreground",
+						children: "Type to search or create a tag"
+					}),
+					h.length > 0 && /* @__PURE__ */ u(n, { children: h.map((e) => /* @__PURE__ */ d(i, {
+						value: e.id,
+						onSelect: () => S(e),
+						className: "flex items-center gap-2 px-3 py-2 cursor-pointer",
+						disabled: g,
+						children: [
+							e.icon && /* @__PURE__ */ u("span", {
+								className: "text-sm",
+								children: e.icon
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "truncate text-sm",
+								style: e.color ? { color: e.color } : void 0,
+								children: e.label
+							}),
+							g && /* @__PURE__ */ u(o, { className: "ml-auto size-3 animate-spin" })
+						]
+					}, e.id)) }),
+					v && /* @__PURE__ */ u(n, { children: /* @__PURE__ */ d(i, {
+						value: `__create__${f}`,
+						onSelect: C,
+						className: "flex items-center gap-2 px-3 py-2 cursor-pointer text-primary",
+						disabled: _,
+						children: [_ ? /* @__PURE__ */ u(o, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ u(s, { className: "size-3.5" }), /* @__PURE__ */ u("span", {
+							className: "text-sm truncate",
+							children: _ ? "Creating..." : `Create "${f}"`
+						})]
+					}) }),
+					f.trim() !== "" && !m && h.length === 0 && !v && /* @__PURE__ */ u(t, {
+						className: "py-4 text-center text-xs text-muted-foreground",
+						children: "No tags found"
+					}),
+					y && /* @__PURE__ */ u("div", {
+						className: "px-3 py-2 text-xs text-destructive border-t border-border",
+						children: y
+					})
+				]
+			}),
+			!b && /* @__PURE__ */ d("div", {
+				className: "border-t border-border px-3 py-2 text-xs text-muted-foreground flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ u(l, { className: "size-3" }),
+					"Maximum ",
+					x,
+					" tags reached"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { f as TagSearchPopover };

package/dist/tag/tagsWidget/operations.js

@@ -0,0 +1,64 @@
+import { gql as e } from "@apollo/client";
+//#region src/tag/tagsWidget/operations.ts
+var t = e`
+  query TagsWidget_SearchTags($query: String!, $vocabularyId: ID, $limit: Int) {
+    searchTags(query: $query, vocabularyId: $vocabularyId, limit: $limit) {
+      id
+      key
+      label
+      value
+      vocabularyId
+      parentId
+      hierarchyPath
+      color
+      icon
+      description
+      vocabulary {
+        key
+      }
+    }
+  }
+`, n = e`
+  query TagsWidget_GetVocabularyByKey($key: String!) {
+    getVocabularyByKey(key: $key) {
+      id
+      key
+      name
+    }
+  }
+`, r = e`
+  mutation TagsWidget_CreateVocabulary($input: CreateVocabularyInput!) {
+    createVocabulary(input: $input) {
+      id
+      key
+      name
+    }
+  }
+`, i = e`
+  mutation TagsWidget_CreateTag($input: CreateTagInput!) {
+    createTag(input: $input) {
+      id
+      key
+      label
+      value
+      vocabularyId
+      parentId
+      hierarchyPath
+      color
+      icon
+      vocabulary {
+        key
+      }
+    }
+  }
+`, a = e`
+  mutation TagsWidget_NotifyTagAssigned($input: NotifyTagAssignedInput!) {
+    notifyTagAssigned(input: $input)
+  }
+`, o = e`
+  mutation TagsWidget_NotifyTagRemoved($key: String!, $entityType: String!, $entityId: ID!) {
+    notifyTagRemoved(key: $key, entityType: $entityType, entityId: $entityId)
+  }
+`, s = "general";
+//#endregion
+export { i as CREATE_TAG, r as CREATE_VOCABULARY, s as DEFAULT_VOCAB_KEY, n as GET_VOCABULARY_BY_KEY, a as NOTIFY_TAG_ASSIGNED, o as NOTIFY_TAG_REMOVED, t as SEARCH_TAGS };

package/dist/tag/tagsWidget/useVocabResolver.js

@@ -0,0 +1,30 @@
+import { CREATE_VOCABULARY as e, DEFAULT_VOCAB_KEY as t, GET_VOCABULARY_BY_KEY as n } from "./operations.js";
+import { useCallback as r, useState as i } from "react";
+import { useLazyQuery as a, useMutation as o } from "@apollo/client/react";
+//#region src/tag/tagsWidget/useVocabResolver.ts
+function s(s, c) {
+	let [l, u] = i(c), [d] = a(n, { client: s }), [f] = o(e, { client: s });
+	return {
+		resolvedVocabId: l,
+		resolveVocabId: r(async () => {
+			if (l) return l;
+			let e = (await d({ variables: { key: t } })).data?.getVocabularyByKey;
+			if (e) return u(e.id), e.id;
+			let n = (await f({ variables: { input: {
+				key: t,
+				name: "General",
+				description: "Default vocabulary for general-purpose tags",
+				scope: "WORKSPACE",
+				allowCustomTags: !0
+			} } })).data?.createVocabulary;
+			if (!n) throw Error("Failed to create default vocabulary");
+			return u(n.id), n.id;
+		}, [
+			l,
+			d,
+			f
+		])
+	};
+}
+//#endregion
+export { s as useVocabResolver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fe-libs",
-  "version": "2026.527.3",
+  "version": "2026.527.4",
   "description": "Burdenoff frontend primitives and domain libraries",
   "type": "module",
   "imports": {