@burdenoff/fluidgrids-fe-sdk 2026.1111.15 → 2026.1111.17

package/dist/EntityTagPicker-BqRNsLCQ.js

@@ -0,0 +1,135 @@
+"use client";
+import { x as getFluidGridsConfig } from "./client-C9XSzSXr.js";
+import { d as useUntagEntity, s as useEntityTags, u as useTagEntity } from "./useEntityTags-DhnsZcTl.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TagBadge, TagsWidget } from "@burdenoff/fe-libs/tag";
+
+// src/components/shared/EntityTagPicker.tsx
+/**
+* EntityTagPicker — universal tag strip for FluidGrids entities.
+*
+* Reuse-first: the shared `TagsWidget` from `@burdenoff/fe-libs/tag` supplies
+* the search/create/vocabulary UX and the tags-svc graph sync; this wrapper
+* only owns persistence, which goes through the FluidGrids tag API
+* (`tagFluidgridsEntity` / `untagFluidgridsEntity` → wspace-tags-svc
+* assignment rows). We never stand up a parallel tag store.
+*
+* Workflows are tagged by `workflowKey`, not the version row id — pass the key
+* as `entityId` so every version of a workflow shares one tag set. Runs, data
+* tables, triggers and schedules are tagged by their id.
+*
+* Draft mode: omit `entityId` (create forms). Nothing is fetched or persisted;
+* selections are emitted through `onDraftChange` for the parent to flush with
+* `useDraftEntityTags` once the entity exists.
+*/
+function toTagItem(assignment) {
+	return {
+		id: assignment.tagId,
+		key: assignment.tagInfo?.key ?? assignment.tagId,
+		label: assignment.tagInfo?.label ?? assignment.tagInfo?.key ?? "Tag",
+		color: assignment.tagInfo?.color ?? null
+	};
+}
+function EntityTagPicker({ entityType, entityId, onDraftChange, readOnly = false, onChange, className }) {
+	const draftMode = !entityId;
+	const { workspaceId } = getFluidGridsConfig();
+	const { tags: assignments, refetch } = useEntityTags(entityType, entityId);
+	const tagEntity = useTagEntity();
+	const untagEntity = useUntagEntity();
+	const [current, setCurrent] = useState([]);
+	const currentRef = useRef([]);
+	const assignmentKey = assignments.map((a) => a.tagId).join("|");
+	const syncedKey = useRef(null);
+	useEffect(() => {
+		if (draftMode || syncedKey.current === assignmentKey) return;
+		syncedKey.current = assignmentKey;
+		const synced = assignments.map(toTagItem);
+		currentRef.current = synced;
+		setCurrent(synced);
+	}, [
+		assignmentKey,
+		assignments,
+		draftMode
+	]);
+	const handleAdd = useCallback(async (tag) => {
+		if (currentRef.current.some((t) => t.id === tag.id)) return;
+		const next = [...currentRef.current, tag];
+		currentRef.current = next;
+		setCurrent(next);
+		if (draftMode) {
+			onDraftChange?.(next.map((t) => t.id));
+			return;
+		}
+		try {
+			await tagEntity(entityType, entityId, tag.id);
+			await refetch();
+			onChange?.();
+		} catch {
+			const rolledBack = currentRef.current.filter((t) => t.id !== tag.id);
+			currentRef.current = rolledBack;
+			setCurrent(rolledBack);
+		}
+	}, [
+		draftMode,
+		entityId,
+		entityType,
+		onChange,
+		onDraftChange,
+		refetch,
+		tagEntity
+	]);
+	const handleRemove = useCallback(async (tagId) => {
+		const removed = currentRef.current.find((t) => t.id === tagId);
+		const next = currentRef.current.filter((t) => t.id !== tagId);
+		currentRef.current = next;
+		setCurrent(next);
+		if (draftMode) {
+			onDraftChange?.(next.map((t) => t.id));
+			return;
+		}
+		try {
+			await untagEntity(entityType, entityId, tagId);
+			await refetch();
+			onChange?.();
+		} catch {
+			if (removed) {
+				const rolledBack = [...currentRef.current, removed];
+				currentRef.current = rolledBack;
+				setCurrent(rolledBack);
+			}
+		}
+	}, [
+		draftMode,
+		entityId,
+		entityType,
+		onChange,
+		onDraftChange,
+		refetch,
+		untagEntity
+	]);
+	if (readOnly) {
+		if (current.length === 0) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: `flex flex-wrap items-center gap-1 ${className ?? ""}`,
+			children: current.map((tag) => /* @__PURE__ */ jsx(TagBadge, {
+				id: tag.id,
+				label: tag.label,
+				color: tag.color ?? void 0,
+				size: "sm"
+			}, tag.id))
+		});
+	}
+	return /* @__PURE__ */ jsx(TagsWidget, {
+		entityType,
+		entityId: entityId ?? "",
+		workspaceId: workspaceId || void 0,
+		tags: current,
+		onAdd: handleAdd,
+		onRemove: handleRemove,
+		syncGraphNotifications: !draftMode,
+		className
+	});
+}
+
+export { EntityTagPicker as t };