@burdenoff/microfe-vibecontrols 2026.601.20 → 2026.601.21

package/dist/components/notes/NotesTabPanel.js

@@ -12,50 +12,54 @@ import { VIBE_PERMISSIONS as c } from "../../constants/permissions.js";
 import { NoteCard as de } from "./NoteCard.js";
 import { NoteList as fe } from "./NoteList.js";
 import { NoteEditor as pe } from "./NoteEditor.js";
-import { useMemo as l, useState as u } from "react";
-import { useI18n as me } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { FileText as he, Globe as d, Grid as ge, List as _e, Lock as ve, Pin as ye, Plus as f, RefreshCw as be } from "lucide-react";
-import { useNavigate as xe } from "react-router-dom";
-import { useApolloClient as Se } from "@apollo/client/react";
-import { usePermissions as p } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AnimatePresence as Ce } from "framer-motion";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { AccessDenied as we, PermissionButton as Te } from "@burdenoff/fe-libs/shared/components";
-import { MotionItem as Ee, MotionList as De } from "@burdenoff/fe-libs/shared/motion";
+import { SHARE_REGISTRY as l } from "../sharing/shareRegistry.js";
+import { NoteShareDialog as me } from "../sharing/NoteShareDialog.js";
+import "../sharing/index.js";
+import { useMemo as u, useState as d } from "react";
+import { useI18n as he } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { FileText as ge, Globe as _e, Grid as ve, List as ye, Lock as be, Pin as xe, Plus as f, RefreshCw as Se } from "lucide-react";
+import { useNavigate as Ce } from "react-router-dom";
+import { useApolloClient as we } from "@apollo/client/react";
+import { usePermissions as Te } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AnimatePresence as Ee } from "framer-motion";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useFeatureFlag as De } from "@burdenoff/fe-libs/shared/feature-flags";
+import { AccessDenied as Oe, PermissionButton as ke } from "@burdenoff/fe-libs/shared/components";
+import { MotionItem as Ae, MotionList as je } from "@burdenoff/fe-libs/shared/motion";
 //#region src/components/notes/NotesTabPanel.tsx
-function g({ context: g, vibeId: _, agentVibes: v = [] }) {
-	let { t: Oe } = me(), ke = xe(), y = Se(), { hasPermission: b, isLoading: x, permissions: Ae } = p(), S = b(c.NOTE_LIST), C = b(c.NOTE_CREATE), [w, je] = u(""), [T, Me] = u("all"), [E, Ne] = u("all"), [D, O] = u("all"), [k, Pe] = u(!1), [A, j] = u("grid"), [Fe, M] = u(!1), [Ie, N] = u(null), [Le, P] = u(!1), F = (e) => {
-		y.cache.evict({
+function h({ context: h, vibeId: g, agentVibes: _ = [] }) {
+	let { t: Me } = he(), Ne = Ce(), v = we(), { hasPermission: y, isLoading: b, permissions: Pe } = Te(), x = y(c.NOTE_LIST), Fe = y(c.NOTE_CREATE), Ie = De(l.note.featureFlag, l.note.defaultEnabled), Le = y(l.note.permission), Re = Ie && Le, [S, C] = d(null), [w, ze] = d(""), [T, Be] = d("all"), [E, Ve] = d("all"), [D, O] = d("all"), [k, He] = d(!1), [A, j] = d("grid"), [Ue, M] = d(!1), [We, N] = d(null), [Ge, P] = d(!1), F = (e) => {
+		v.cache.evict({
 			id: "ROOT_QUERY",
 			fieldName: "notes"
-		}), y.cache.gc(), e();
-	}, [Re] = ee({
+		}), v.cache.gc(), e();
+	}, [Ke] = ee({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), [ze] = re({
+	}), [qe] = re({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), [Be] = r({
+	}), [Je] = r({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), [Ve] = n({
+	}), [Ye] = n({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), [He] = ie({
+	}), [Xe] = ie({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
 	}), [I] = te({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), [Ue] = ne({
+	}), [Ze] = ne({
 		refetchQueries: [e],
 		awaitRefetchQueries: !0
-	}), L = x || !S, { data: R } = t({ skip: L }), { data: z, loading: B, error: V, refetch: H } = i({
+	}), L = b || !x, { data: R } = t({ skip: L }), { data: z, loading: B, error: V, refetch: H } = i({
 		variables: {
-			filter: l(() => {
+			filter: u(() => {
 				let e = D === "all" ? void 0 : D;
-				return g === "vibe" && _ ? {
-					vibeId: _,
+				return h === "vibe" && g ? {
+					vibeId: g,
 					isPinned: k ? !0 : void 0,
 					visibility: e
 				} : {
@@ -64,8 +68,8 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 					visibility: e
 				};
 			}, [
+				h,
 				g,
-				_,
 				T,
 				k,
 				D
@@ -74,7 +78,7 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 		},
 		fetchPolicy: "cache-and-network",
 		skip: L
-	}), We = l(() => g === "agent" ? [
+	}), Qe = u(() => h === "agent" ? [
 		{
 			value: "all",
 			label: "All Vibes"
@@ -83,14 +87,14 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 			value: "none",
 			label: "No Vibe (General)"
 		},
-		...v.map((e) => ({
+		..._.map((e) => ({
 			value: e.id,
 			label: e.name
 		}))
-	] : [], [g, v]), U = l(() => {
+	] : [], [h, _]), U = u(() => {
 		let e = R?.availableNoteTags ?? [];
 		return new Map(e.map((e) => [e.id, e]));
-	}, [R?.availableNoteTags]), W = l(() => {
+	}, [R?.availableNoteTags]), W = u(() => {
 		let e = (z?.notes?.items ?? []).map((e) => ({
 			id: e.id,
 			workspaceId: e.workspaceId,
@@ -132,23 +136,23 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 				name: e.vibe.name
 			} : void 0
 		}));
-		if (g === "agent" && v.length > 0) {
-			let t = new Set(v.map((e) => e.id));
+		if (h === "agent" && _.length > 0) {
+			let t = new Set(_.map((e) => e.id));
 			return e.filter((e) => e.vibeId && t.has(e.vibeId));
 		}
 		return e;
 	}, [
 		z?.notes?.items,
-		g,
-		v,
+		h,
+		_,
 		U
-	]), Ge = l(() => [{
+	]), $e = u(() => [{
 		value: "all",
 		label: "All Tags"
 	}, ...(R?.availableNoteTags ?? []).map((e) => ({
 		value: e.id,
 		label: e.label
-	}))], [R?.availableNoteTags]), G = l(() => W.filter((e) => {
+	}))], [R?.availableNoteTags]), G = u(() => W.filter((e) => {
 		if (w) {
 			let t = w.toLowerCase();
 			if (!(e.title.toLowerCase().includes(t) || e.content.toLowerCase().includes(t) || e.tagAssignments?.some((e) => e.tag?.label?.toLowerCase().includes(t)))) return !1;
@@ -158,32 +162,32 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 		W,
 		w,
 		E
-	]), K = l(() => [...G].sort((e, t) => e.isPinned && !t.isPinned ? -1 : !e.isPinned && t.isPinned ? 1 : new Date(t.updatedAt).getTime() - new Date(e.updatedAt).getTime()), [G]), q = (e) => {
+	]), K = u(() => [...G].sort((e, t) => e.isPinned && !t.isPinned ? -1 : !e.isPinned && t.isPinned ? 1 : new Date(t.updatedAt).getTime() - new Date(e.updatedAt).getTime()), [G]), q = (e) => {
 		N(e), M(!0);
 	}, J = () => {
 		N(null), M(!0);
 	}, Y = async (e) => {
 		try {
-			e.isPinned ? await ze({ variables: { id: e.id } }) : await Re({ variables: { id: e.id } }), F(H);
+			e.isPinned ? await qe({ variables: { id: e.id } }) : await Ke({ variables: { id: e.id } }), F(H);
 		} catch (e) {
 			console.error("Failed to toggle pin for note:", e);
 		}
 	}, X = async (e) => {
 		try {
-			await Be({ variables: { id: e.id } }), F(H);
+			await Je({ variables: { id: e.id } }), F(H);
 		} catch (e) {
 			console.error("Failed to delete note:", e);
 		}
-	}, Ke = async (e) => {
+	}, et = async (e) => {
 		let t = () => {
 			M(!1), N(null), oe(), P(!0);
 		};
 		try {
-			let n, r = g === "vibe" ? _ : e.vibeId;
+			let n, r = h === "vibe" ? g : e.vibeId;
 			if (e.id) {
 				let r;
 				try {
-					r = await He({ variables: {
+					r = await Xe({ variables: {
 						id: e.id,
 						input: {
 							title: e.title,
@@ -202,7 +206,7 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 			} else {
 				let i;
 				try {
-					i = await Ve({ variables: { input: {
+					i = await Ye({ variables: { input: {
 						title: e.title || "",
 						content: e.content || "",
 						vibeId: r,
@@ -227,41 +231,41 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 		} catch (e) {
 			console.error("Failed to save note:", e);
 		}
-	}, Z = async (e) => {
+	}, tt = async (e) => {
 		let t = e.visibility === "PRIVATE" ? o.Workspace : o.Private;
 		try {
-			await Ue({ variables: {
+			await Ze({ variables: {
 				id: e.id,
 				visibility: t
 			} }), F(H);
 		} catch (e) {
 			console.error("Failed to toggle note visibility:", e);
 		}
-	}, Q = {
+	}, Z = Re ? (e) => C(e) : void 0, Q = {
 		total: W.length,
 		pinned: W.filter((e) => e.isPinned).length
-	}, qe = l(() => g === "vibe" ? [] : v, [g, v]);
-	if (!x && Ae && !S) return /* @__PURE__ */ m(we, {
+	}, nt = u(() => h === "vibe" ? [] : _, [h, _]);
+	if (!b && Pe && !x) return /* @__PURE__ */ p(Oe, {
 		title: "Access Denied",
 		description: "You don't have permission to view notes.",
 		details: "Required permission: note:list"
 	});
-	if (B && W.length === 0) return /* @__PURE__ */ m(se, { message: "Loading notes..." });
-	if (V && W.length === 0) return /* @__PURE__ */ m(ce, {
+	if (B && W.length === 0) return /* @__PURE__ */ p(se, { message: "Loading notes..." });
+	if (V && W.length === 0) return /* @__PURE__ */ p(ce, {
 		title: "Failed to load notes",
 		message: V.message,
 		onRetry: () => H()
 	});
-	let $ = w || g === "agent" && T !== "all" || E !== "all" || k;
-	return /* @__PURE__ */ h("div", {
+	let $ = w || h === "agent" && T !== "all" || E !== "all" || k;
+	return /* @__PURE__ */ m("div", {
 		className: "space-y-4",
 		children: [
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h3", {
+				children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h3", {
 					className: "text-lg font-semibold text-text-primary",
 					children: "Notes"
-				}), /* @__PURE__ */ h("p", {
+				}), /* @__PURE__ */ m("p", {
 					className: "text-sm text-text-secondary",
 					children: [
 						Q.total,
@@ -271,107 +275,107 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 						Q.pinned,
 						" pinned"
 					]
-				})] }), /* @__PURE__ */ h("div", {
+				})] }), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m("button", {
+					children: [/* @__PURE__ */ p("button", {
 						type: "button",
 						onClick: () => H(),
 						disabled: B,
 						className: "flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
 						title: "Refresh notes",
-						children: /* @__PURE__ */ m(be, { className: `size-4 ${B ? "animate-spin" : ""}` })
-					}), /* @__PURE__ */ m(Te, {
+						children: /* @__PURE__ */ p(Se, { className: `size-4 ${B ? "animate-spin" : ""}` })
+					}), /* @__PURE__ */ p(ke, {
 						permission: c.NOTE_CREATE,
-						children: /* @__PURE__ */ h("button", {
+						children: /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: J,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-							children: [/* @__PURE__ */ m(f, { className: "size-4" }), "New Note"]
+							children: [/* @__PURE__ */ p(f, { className: "size-4" }), "New Note"]
 						})
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m("div", {
 				className: "space-y-3",
-				children: [/* @__PURE__ */ h("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m(ue, {
+					children: [/* @__PURE__ */ p(ue, {
 						value: w,
-						onChange: je,
+						onChange: ze,
 						placeholder: "Search notes...",
 						className: "flex-1 sm:w-64 sm:flex-none"
-					}), /* @__PURE__ */ h("div", {
+					}), /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-1 bg-bg-sunken rounded-md p-1 flex-shrink-0",
-						children: [/* @__PURE__ */ m("button", {
+						children: [/* @__PURE__ */ p("button", {
 							type: "button",
 							onClick: () => j("grid"),
 							className: `p-1.5 sm:p-2 rounded ${A === "grid" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
 							title: "Grid view",
-							children: /* @__PURE__ */ m(ge, { className: "size-4 text-text-secondary" })
-						}), /* @__PURE__ */ m("button", {
+							children: /* @__PURE__ */ p(ve, { className: "size-4 text-text-secondary" })
+						}), /* @__PURE__ */ p("button", {
 							type: "button",
 							onClick: () => j("list"),
 							className: `p-1.5 sm:p-2 rounded ${A === "list" ? "bg-bg-surface shadow-sm" : "hover:bg-bg-surface/50"}`,
 							title: "List view",
-							children: /* @__PURE__ */ m(_e, { className: "size-4 text-text-secondary" })
+							children: /* @__PURE__ */ p(ye, { className: "size-4 text-text-secondary" })
 						})]
 					})]
-				}), /* @__PURE__ */ h("div", {
+				}), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2 sm:gap-3 flex-wrap",
 					children: [
-						g === "agent" && /* @__PURE__ */ m(s, {
+						h === "agent" && /* @__PURE__ */ p(s, {
 							label: "Vibe",
 							value: T,
-							options: We,
-							onChange: Me
+							options: Qe,
+							onChange: Be
 						}),
-						/* @__PURE__ */ m(s, {
+						/* @__PURE__ */ p(s, {
 							label: "Tag",
 							value: E,
-							options: Ge,
-							onChange: Ne
+							options: $e,
+							onChange: Ve
 						}),
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ m("div", {
 							className: "flex items-center gap-1 bg-bg-sunken rounded-md p-0.5",
 							children: [
-								/* @__PURE__ */ m("button", {
+								/* @__PURE__ */ p("button", {
 									type: "button",
 									onClick: () => O("all"),
 									className: `px-2.5 py-1 text-xs rounded transition-colors ${D === "all" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-secondary"}`,
 									children: "All"
 								}),
-								/* @__PURE__ */ h("button", {
+								/* @__PURE__ */ m("button", {
 									type: "button",
 									onClick: () => O("WORKSPACE"),
 									className: `flex items-center gap-1 px-2.5 py-1 text-xs rounded transition-colors ${D === "WORKSPACE" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-secondary"}`,
-									children: [/* @__PURE__ */ m(d, { className: "size-3" }), "Shared"]
+									children: [/* @__PURE__ */ p(_e, { className: "size-3" }), "Shared"]
 								}),
-								/* @__PURE__ */ h("button", {
+								/* @__PURE__ */ m("button", {
 									type: "button",
 									onClick: () => O("PRIVATE"),
 									className: `flex items-center gap-1 px-2.5 py-1 text-xs rounded transition-colors ${D === "PRIVATE" ? "bg-bg-surface text-text-primary shadow-sm" : "text-text-muted hover:text-text-secondary"}`,
-									children: [/* @__PURE__ */ m(ve, { className: "size-3" }), "Private"]
+									children: [/* @__PURE__ */ p(be, { className: "size-3" }), "Private"]
 								})
 							]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p("div", {
 				className: "flex items-center gap-2",
-				children: /* @__PURE__ */ h("button", {
+				children: /* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => Pe(!k),
+					onClick: () => He(!k),
 					className: `flex items-center gap-2 px-3 py-1.5 text-sm rounded-full transition-colors ${k ? "bg-status-warning-bg text-status-warning-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken/80"}`,
 					children: [
-						/* @__PURE__ */ m(ye, { className: "size-3" }),
+						/* @__PURE__ */ p(xe, { className: "size-3" }),
 						"Pinned (",
 						Q.pinned,
 						")"
 					]
 				})
 			}),
-			$ ? /* @__PURE__ */ h("p", {
+			$ ? /* @__PURE__ */ m("p", {
 				className: "text-sm text-text-secondary",
 				children: [
 					"Showing ",
@@ -379,67 +383,80 @@ function g({ context: g, vibeId: _, agentVibes: v = [] }) {
 					" of ",
 					W.length,
 					" notes",
-					B && /* @__PURE__ */ m("span", {
+					B && /* @__PURE__ */ p("span", {
 						className: "ml-2 text-text-muted",
 						children: "(refreshing…)"
 					})
 				]
 			}) : null,
-			/* @__PURE__ */ m(Ce, {
+			/* @__PURE__ */ p(Ee, {
 				mode: "wait",
-				children: K.length > 0 ? A === "grid" ? /* @__PURE__ */ m(De, {
+				children: K.length > 0 ? A === "grid" ? /* @__PURE__ */ p(je, {
 					stagger: .04,
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-					children: K.map((e) => /* @__PURE__ */ m(Ee, { children: /* @__PURE__ */ m(de, {
+					children: K.map((e) => /* @__PURE__ */ p(Ae, { children: /* @__PURE__ */ p(de, {
 						note: e,
 						onOpen: q,
 						onEdit: q,
 						onPin: Y,
 						onUnpin: Y,
 						onDelete: X,
-						onShare: Z
+						onShare: tt,
+						onShareAccess: Z
 					}) }, e.id))
-				}, "grid") : /* @__PURE__ */ m(fe, {
+				}, "grid") : /* @__PURE__ */ p(fe, {
 					notes: K,
 					onOpen: q,
 					onEdit: q,
 					onPin: Y,
 					onUnpin: Y,
 					onDelete: X,
-					onShare: Z
-				}, "list") : /* @__PURE__ */ m(le, {
-					icon: /* @__PURE__ */ m(he, { className: "size-8 text-text-secondary" }),
+					onShare: tt,
+					onShareAccess: Z
+				}, "list") : /* @__PURE__ */ p(le, {
+					icon: /* @__PURE__ */ p(ge, { className: "size-8 text-text-secondary" }),
 					title: $ ? "No notes found" : "No notes yet",
 					description: $ ? "Try adjusting your search or filters" : "Create your first note to start documenting your work",
-					action: !$ && C ? /* @__PURE__ */ h("button", {
+					action: !$ && Fe ? /* @__PURE__ */ m("button", {
 						type: "button",
 						onClick: J,
 						className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
-						children: [/* @__PURE__ */ m(f, { className: "size-4" }), "New Note"]
+						children: [/* @__PURE__ */ p(f, { className: "size-4" }), "New Note"]
 					}) : void 0
 				})
 			}),
-			Fe && /* @__PURE__ */ m(pe, {
-				note: Ie || void 0,
-				vibeOptions: qe,
-				defaultVibeId: g === "vibe" ? _ : void 0,
-				hideVibeSelect: g === "vibe",
-				onSubmit: Ke,
+			Ue && /* @__PURE__ */ p(pe, {
+				note: We || void 0,
+				vibeOptions: nt,
+				defaultVibeId: h === "vibe" ? g : void 0,
+				hideVibeSelect: h === "vibe",
+				onSubmit: et,
 				onCancel: () => M(!1)
 			}),
-			/* @__PURE__ */ m(ae, {
-				isOpen: Le,
+			/* @__PURE__ */ p(ae, {
+				isOpen: Ge,
 				onClose: () => P(!1),
 				onConfirm: () => {
-					P(!1), ke("/billing/plans");
+					P(!1), Ne("/billing/plans");
 				},
 				title: "Note Quota Reached",
 				message: "You've used all available note quota on your current plan. Upgrade your plan to create or update more notes."
+			}),
+			S && /* @__PURE__ */ p(me, {
+				note: {
+					id: S.id,
+					title: S.title,
+					vibeId: S.vibeId
+				},
+				open: !!S,
+				onOpenChange: (e) => {
+					e || C(null);
+				}
 			})
 		]
 	});
 }
 //#endregion
-export { g as NotesTabPanel };
+export { h as NotesTabPanel };
 
 //# sourceMappingURL=NotesTabPanel.js.map