// src/components/ui/DualValueDiffField.tsx "use client"; import { useState } from "react"; import { ArrowRight, Check, RotateCcw, TriangleAlert } from "lucide-react"; import { cx } from "@/lib/cx"; import Chip from "./Chip"; import Select from "./Select"; import Button from "./Button"; import { Badge } from "./Badge"; export interface DualValueDiffFieldProps { /** Facet name, e.g. "Genres". */ label: string; /** Source-of-record values (read-only). */ imported: string[]; /** Editorial values (editable). */ editorial: string[]; onEditorialChange: (values: string[]) => void; /** Full vocabulary for the add select. */ options: string[]; /** Editorial slots, e.g. 5 → "(2/5)". */ capacity?: number; /** Values needed for full completeness credit (≤ capacity). When set, the * Complete mark waits for the target instead of the first value. */ completenessTarget?: number; } function sameSet(a: string[], b: string[]) { return a.length === b.length && [...a].sort().join("|") === [...b].sort().join("|"); } /** The tagger's signature: imported metadata on the left stays untouched; * curators shape the editorial set on the right. Divergence is an explicit, * visible Override state — never a silent replacement. */ export default function DualValueDiffField({ label, imported, editorial, onEditorialChange, options, capacity, completenessTarget, }: DualValueDiffFieldProps) { const [pending, setPending] = useState(""); const override = !sameSet(imported, editorial); const available = options.filter((o) => !editorial.includes(o)); // Imported adoption can exceed the slot cap — a legit state, not an error, // but it must read as "trim me", never as a broken counter. const overCap = capacity !== undefined && editorial.length > capacity; const target = completenessTarget ?? 1; const complete = editorial.length >= target; const partial = !complete && editorial.length > 0 && completenessTarget !== undefined; return (

{label}

{override && Override} {overCap ? ( ) : complete ? ( ) : partial ? ( {editorial.length} of {target} toward completeness ) : null}

Imported

{imported.length === 0 && Nothing imported} {imported.map((v) => ( ))}

Editorial {capacity ? ( ({editorial.length}/{capacity}) ) : null}

{editorial.length === 0 && Empty — viewers see nothing for this facet} {editorial.map((v) => ( onEditorialChange(editorial.filter((x) => x !== v))} /> ))}

{override && ( )}

{overCap && capacity !== undefined && (

The imported set brought {editorial.length} values for {capacity} slots — remove{" "} {editorial.length - capacity} to fit the focused editorial set.

)}

); }