@campfire-interactive/volume-intelligence-ui 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -124,7 +124,7 @@ interface TenantVolumeConfig {
     sourceId: string;
     source: SourceWithSegments;
 }
-type SegmentMappingCategory = 'hierarchy_level' | 'automotive_field' | 'period' | 'value';
+type SegmentMappingCategory = 'hierarchy_level' | 'automotive_field' | 'period' | 'value' | 'dimension';
 interface SegmentMappingRow {
     id: string;
     sourceId: string;
@@ -308,6 +308,19 @@ interface SourceAdminTransport {
     listUploads(params?: UploadListParams): Promise<UploadListResponse>;
     clearSourceData(sourceId: string, confirm: string): Promise<ClearSourceDataResult>;
     getRequiredMappingStatus?(sourceId: string): Promise<RequiredMappingStatus>;
+    getMappableDimensions?(): Promise<MappableDimension[]>;
+}
+/** One dimension the operator can map a source column to. The category+targetKey
+ *  say where the mapping is stored (a hierarchy level, an automotive field, or a
+ *  dim slot); `label` is what the operator sees; `required` drives ordering +
+ *  validation. The storage detail is deliberately hidden from the UI — the
+ *  operator just picks a column per dimension. */
+interface MappableDimension {
+    key: string;
+    label: string;
+    required: boolean;
+    category: 'hierarchy_level' | 'automotive_field' | 'dimension';
+    targetKey: string;
 }
 
 interface VolumeFilesTransport {
@@ -368,6 +381,22 @@ interface VolumeSourcesListProps {
  */
 declare function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras, className }: VolumeSourcesListProps): react.JSX.Element;
 
+/**
+ * Segment mapper — a catalog-driven, required-first assignment surface built for
+ * large column pools (100+). For each dimension the operator gives a source
+ * column; the storage detail (a hierarchy level / automotive field / dim slot)
+ * rides on the MappableDimension and is routed on save, never shown.
+ *
+ * Three ways to fill it, so a big pool stays manageable:
+ *   1. AUTO-MATCH on load — fuzzy-matches column names to the still-unmapped
+ *      dimensions and pre-fills strong hits (tagged "auto", editable).
+ *   2. CLICK — click a dimension to focus it, then click a pool column.
+ *   3. DRAG — drag a pool column chip onto a dimension.
+ * The pool is searchable and hides already-used columns.
+ *
+ * When the host doesn't supply the tenant catalog, falls back to
+ * CANONICAL_MAPPABLE (level1..6 + required automotive) so the mapper still works.
+ */
 interface AutomotiveSlot {
     key: string;
     label: string;
@@ -377,11 +406,10 @@ interface AutomotiveSlot {
 }
 interface UnifiedSegmentMapperProps {
     segments: VolumeSourceSegment[];
-    hierarchyInitial: SegmentMappingRow[];
-    automotiveInitial: SegmentMappingRow[];
-    automotiveSlots: AutomotiveSlot[];
-    transformRules: readonly string[];
-    transformRuleLabels: Record<string, string>;
+    /** The tenant's mappable dimensions; falls back to CANONICAL_MAPPABLE. */
+    mappableDimensions?: MappableDimension[];
+    /** Existing mappings across all categories, used to prefill the pickers. */
+    initialMappings: SegmentMappingRow[];
     onSave: (hierarchy: Array<{
         targetKey: string;
         segmentId: string;
@@ -389,12 +417,13 @@ interface UnifiedSegmentMapperProps {
         targetKey: string;
         segmentId: string;
         transformRule?: string | null;
+    }>, dimensions: Array<{
+        targetKey: string;
+        segmentId: string;
     }>) => Promise<void>;
     saving: boolean;
-    hierarchyMode?: 'tree' | 'sparse';
-    baseHierarchyHint?: Partial<Record<number, string>>;
 }
-declare function UnifiedSegmentMapper({ segments, hierarchyInitial, automotiveInitial, automotiveSlots, transformRules, transformRuleLabels, onSave, saving, hierarchyMode, baseHierarchyHint, }: UnifiedSegmentMapperProps): react.JSX.Element;
+declare function UnifiedSegmentMapper({ segments, mappableDimensions, initialMappings, onSave, saving, }: UnifiedSegmentMapperProps): react.JSX.Element;
 
 interface VolumeSourceDetailProps {
     transport: SourceAdminTransport;

package/dist/index.js

@@ -997,7 +997,7 @@ function VolumeSourcesList({ transport, onOpenSource, renderActiveSourceExtras,
 
 // src/UnifiedSegmentMapper.tsx
 import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
-import { Search, CheckCircle2 as CheckCircle22 } from "lucide-react";
+import { Search, Wand2 } from "lucide-react";
 
 // src/constants.ts
 var HIERARCHY_LEVEL_COUNT = 6;
@@ -1025,259 +1025,255 @@ var AUTOMOTIVE_TRANSFORM_LABELS = {
   normalise_country: "Convert country code (e.g. USA \u2192 US)",
   parse_iso_date: "Parse to ISO date (YYYY-MM-DD)"
 };
+var CANONICAL_MAPPABLE = [
+  { key: "oem", label: "OEM", required: true, category: "hierarchy_level", targetKey: "level1" },
+  { key: "platform", label: "Platform", required: true, category: "hierarchy_level", targetKey: "level2" },
+  { key: "program", label: "Program", required: true, category: "hierarchy_level", targetKey: "level3" },
+  { key: "plant", label: "Plant", required: true, category: "hierarchy_level", targetKey: "level4" },
+  { key: "nameplate", label: "Nameplate", required: true, category: "hierarchy_level", targetKey: "level5" },
+  { key: "trim", label: "Trim Level", required: false, category: "hierarchy_level", targetKey: "level6" },
+  { key: "region", label: "Region", required: true, category: "automotive_field", targetKey: "region" },
+  { key: "plant_country", label: "Plant Country", required: true, category: "automotive_field", targetKey: "plant_country" },
+  { key: "sop_date", label: "SOP (Start of Production)", required: true, category: "automotive_field", targetKey: "sop_date" },
+  { key: "eop_date", label: "EOP (End of Production)", required: true, category: "automotive_field", targetKey: "eop_date" },
+  { key: "brand", label: "Brand", required: false, category: "automotive_field", targetKey: "brand" }
+];
 
 // src/UnifiedSegmentMapper.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var LEVELS = [1, 2, 3, 4, 5, 6];
+var autoTransform = (targetKey) => AUTOMOTIVE_SLOTS.find((s) => s.key === targetKey)?.defaultTransform ?? null;
+var norm = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
+var toks = (s) => s.toLowerCase().split(/[^a-z0-9]+/).filter(Boolean);
+function score(dim, colLabel) {
+  const c = norm(colLabel);
+  if (!c) return 0;
+  let best = 0;
+  for (const name of [dim.label, dim.key, dim.targetKey]) {
+    const d = norm(name);
+    if (!d) continue;
+    if (d === c) best = Math.max(best, 100);
+    else if (c.includes(d) || d.includes(c)) best = Math.max(best, 75);
+  }
+  const ct = new Set(toks(colLabel));
+  const dt = toks(dim.label);
+  if (dt.length) {
+    const overlap = dt.filter((t) => ct.has(t)).length / dt.length;
+    best = Math.max(best, Math.round(overlap * 60));
+  }
+  return best;
+}
+var AUTO_THRESHOLD = 70;
+function autoMatch(dims, segments, existing) {
+  const used = new Set(Object.values(existing).filter(Boolean));
+  const picks = {};
+  const autoKeys = /* @__PURE__ */ new Set();
+  const empty = dims.filter((d) => !existing[d.key]).sort((a, b) => a.required === b.required ? 0 : a.required ? -1 : 1);
+  for (const d of empty) {
+    let bestId = null;
+    let bestScore = AUTO_THRESHOLD - 1;
+    for (const s of segments) {
+      if (used.has(s.id)) continue;
+      const sc = score(d, s.label);
+      if (sc > bestScore) {
+        bestScore = sc;
+        bestId = s.id;
+      }
+    }
+    if (bestId) {
+      picks[d.key] = bestId;
+      used.add(bestId);
+      autoKeys.add(d.key);
+    }
+  }
+  return { picks, autoKeys };
+}
 function UnifiedSegmentMapper({
   segments,
-  hierarchyInitial,
-  automotiveInitial,
-  automotiveSlots,
-  transformRules,
-  transformRuleLabels,
+  mappableDimensions,
+  initialMappings,
   onSave,
-  saving,
-  hierarchyMode = "tree",
-  baseHierarchyHint
+  saving
 }) {
-  const isSparse = hierarchyMode === "sparse";
-  const [hierAssign, setHierAssign] = useState4({});
-  const [autoAssign, setAutoAssign] = useState4({});
-  const [searchQuery, setSearchQuery] = useState4("");
+  const dims = useMemo3(
+    () => mappableDimensions?.length ? mappableDimensions : CANONICAL_MAPPABLE,
+    [mappableDimensions]
+  );
+  const [assign, setAssign] = useState4({});
+  const [savedAssign, setSavedAssign] = useState4({});
+  const [autoKeys, setAutoKeys] = useState4(/* @__PURE__ */ new Set());
+  const [activeDim, setActiveDim] = useState4(null);
+  const [query, setQuery] = useState4("");
   const [dragging, setDragging] = useState4(null);
-  const [dropTarget, setDropTarget] = useState4(null);
+  const [dropDim, setDropDim] = useState4(null);
   useEffect4(() => {
-    const initHier = {};
-    for (const lv of LEVELS) {
-      initHier[lv] = hierarchyInitial.find((m) => m.targetKey === `level${lv}`)?.segmentId ?? null;
+    const existing = {};
+    const claimed = /* @__PURE__ */ new Set();
+    for (const d of dims) {
+      const segId = initialMappings.find((m) => m.targetCategory === d.category && m.targetKey === d.targetKey)?.segmentId ?? "";
+      existing[d.key] = segId && !claimed.has(segId) ? segId : "";
+      if (existing[d.key]) claimed.add(segId);
     }
-    setHierAssign(initHier);
-    const initAuto = {};
-    for (const slot of automotiveSlots) {
-      const existing = automotiveInitial.find((m) => m.targetKey === slot.key);
-      initAuto[slot.key] = {
-        segmentId: existing?.segmentId ?? null,
-        transformRule: existing?.transformRule ?? slot.defaultTransform ?? null
-      };
-    }
-    setAutoAssign(initAuto);
-  }, [hierarchyInitial, automotiveInitial, automotiveSlots]);
+    const { picks, autoKeys: keys } = autoMatch(dims, segments, existing);
+    setAssign({ ...existing, ...picks });
+    setSavedAssign(existing);
+    setAutoKeys(keys);
+    setActiveDim(null);
+  }, [initialMappings, mappableDimensions, segments]);
   const segmentById = useMemo3(() => new Map(segments.map((s) => [s.id, s])), [segments]);
-  const usedIds = useMemo3(() => {
-    const s = /* @__PURE__ */ new Set();
-    for (const v of Object.values(hierAssign)) if (v) s.add(v);
-    for (const a of Object.values(autoAssign)) if (a.segmentId) s.add(a.segmentId);
-    return s;
-  }, [hierAssign, autoAssign]);
-  const poolSegments = useMemo3(() => {
-    const q = searchQuery.trim().toLowerCase();
+  const usedIds = useMemo3(() => new Set(Object.values(assign).filter(Boolean)), [assign]);
+  const pool = useMemo3(() => {
+    const q = query.trim().toLowerCase();
     return segments.filter((s) => !usedIds.has(s.id)).filter((s) => !q || s.label.toLowerCase().includes(q)).sort((a, b) => a.label.localeCompare(b.label));
-  }, [segments, usedIds, searchQuery]);
-  const hierarchyCoveredKeys = useMemo3(() => {
-    const covered = /* @__PURE__ */ new Set();
-    for (const slot of automotiveSlots) {
-      if (slot.hierarchyCoveredByLevel == null) continue;
-      const lvSegId = hierAssign[slot.hierarchyCoveredByLevel];
-      if (lvSegId && !autoAssign[slot.key]?.segmentId) covered.add(slot.key);
-    }
-    return covered;
-  }, [automotiveSlots, hierAssign, autoAssign]);
-  const hierarchyErrors = useMemo3(() => {
-    if (isSparse) return [];
-    const errors = [];
-    for (let n = 2; n <= 6; n++) {
-      if (hierAssign[n] && !hierAssign[n - 1]) {
-        errors.push(`${DEFAULT_LEVEL_NAMES[n]} requires ${DEFAULT_LEVEL_NAMES[n - 1]} to be set first`);
-      }
-    }
-    return errors;
-  }, [hierAssign, isSparse]);
-  const missingAutomotive = useMemo3(() => {
-    const out = [];
-    for (const slot of automotiveSlots) {
-      if (hierarchyCoveredKeys.has(slot.key)) continue;
-      const explicitRequired = slot.required || slot.hierarchyCoveredByLevel != null && hierAssign[slot.hierarchyCoveredByLevel] == null;
-      if (explicitRequired && !autoAssign[slot.key]?.segmentId) out.push(slot.label);
-    }
-    return out;
-  }, [automotiveSlots, hierarchyCoveredKeys, hierAssign, autoAssign]);
-  const isDirty = useMemo3(() => {
-    for (const lv of LEVELS) {
-      const cur = hierAssign[lv] ?? null;
-      const saved = hierarchyInitial.find((m) => m.targetKey === `level${lv}`)?.segmentId ?? null;
-      if (cur !== saved) return true;
-    }
-    for (const slot of automotiveSlots) {
-      const cur = autoAssign[slot.key] ?? { segmentId: null, transformRule: null };
-      const saved = automotiveInitial.find((m) => m.targetKey === slot.key);
-      const savedSeg = saved?.segmentId ?? null;
-      const savedRule = saved?.transformRule ?? slot.defaultTransform ?? null;
-      if (cur.segmentId !== savedSeg || cur.transformRule !== savedRule) return true;
-    }
-    return false;
-  }, [hierAssign, autoAssign, hierarchyInitial, automotiveInitial, automotiveSlots]);
-  const canSave = isDirty && hierarchyErrors.length === 0 && missingAutomotive.length === 0 && !saving;
-  function startDrag(payload) {
-    setDragging(payload);
-  }
-  function endDrag() {
-    setDragging(null);
-    setDropTarget(null);
-  }
-  function dropOnHier(level, payload) {
-    const parts = payload.split(":");
-    const kind = parts[0];
-    const segId = parts[2] ?? parts[1];
-    setHierAssign((prev) => {
-      const next = { ...prev };
-      const displaced = next[level] ?? null;
-      next[level] = segId;
-      if (kind === "hier") {
-        const fromLevel = parseInt(parts[1], 10);
-        next[fromLevel] = displaced;
+  }, [segments, usedIds, query]);
+  const required = useMemo3(() => dims.filter((d) => d.required), [dims]);
+  const optional = useMemo3(() => dims.filter((d) => !d.required), [dims]);
+  const missingRequired = required.filter((d) => !assign[d.key]).map((d) => d.label);
+  const autoCount = useMemo3(() => [...autoKeys].filter((k) => !!assign[k]).length, [autoKeys, assign]);
+  const dirty = dims.some((d) => (assign[d.key] ?? "") !== (savedAssign[d.key] ?? ""));
+  const canSave = dirty && missingRequired.length === 0 && !saving;
+  function setOne(dimKey, segId) {
+    setAssign((p) => {
+      const next = { ...p, [dimKey]: segId };
+      if (segId) {
+        for (const k of Object.keys(next)) if (k !== dimKey && next[k] === segId) next[k] = "";
       }
       return next;
     });
-    if (kind === "auto") {
-      const slotKey = parts[1];
-      setAutoAssign((p) => ({ ...p, [slotKey]: { segmentId: null, transformRule: p[slotKey]?.transformRule ?? null } }));
-    }
-    endDrag();
-  }
-  function dropOnAuto(slotKey, payload) {
-    const parts = payload.split(":");
-    const kind = parts[0];
-    const segId = parts[2] ?? parts[1];
-    setAutoAssign((prev) => {
-      const slot = automotiveSlots.find((s) => s.key === slotKey);
-      return {
-        ...prev,
-        [slotKey]: { segmentId: segId, transformRule: prev[slotKey]?.transformRule ?? slot?.defaultTransform ?? null }
-      };
+    setAutoKeys((prev) => {
+      if (!prev.has(dimKey)) return prev;
+      const next = new Set(prev);
+      next.delete(dimKey);
+      return next;
     });
-    if (kind === "hier") {
-      const fromLevel = parseInt(parts[1], 10);
-      setHierAssign((p) => ({ ...p, [fromLevel]: null }));
-    } else if (kind === "auto") {
-      const fromKey = parts[1];
-      if (fromKey !== slotKey) {
-        setAutoAssign((p) => ({ ...p, [fromKey]: { segmentId: null, transformRule: p[fromKey]?.transformRule ?? null } }));
-      }
-    }
-    endDrag();
   }
-  function dropOnPool(payload) {
-    const parts = payload.split(":");
-    const kind = parts[0];
-    if (kind === "hier") {
-      const lv = parseInt(parts[1], 10);
-      setHierAssign((p) => ({ ...p, [lv]: null }));
-    } else if (kind === "auto") {
-      const slotKey = parts[1];
-      setAutoAssign((p) => ({ ...p, [slotKey]: { segmentId: null, transformRule: p[slotKey]?.transformRule ?? null } }));
-    }
-    endDrag();
-  }
-  function clearAuto(slotKey) {
-    setAutoAssign((p) => ({ ...p, [slotKey]: { segmentId: null, transformRule: p[slotKey]?.transformRule ?? null } }));
-  }
-  function setAutoTransform(slotKey, rule) {
-    setAutoAssign((p) => ({ ...p, [slotKey]: { ...p[slotKey], transformRule: rule } }));
+  function clickColumn(segId) {
+    if (!activeDim) return;
+    setOne(activeDim, segId);
+    const nextEmpty = [...required, ...optional].find((d) => d.key !== activeDim && !assign[d.key] && d.required);
+    setActiveDim(nextEmpty?.key ?? null);
   }
   async function handleSave() {
-    const hierEntries = [];
-    for (const lv of LEVELS) {
-      const segId = hierAssign[lv];
-      if (segId) hierEntries.push({ targetKey: `level${lv}`, segmentId: segId });
+    const hierarchy = [];
+    const automotive = [];
+    const dimensions = [];
+    const managedH = new Set(dims.filter((d) => d.category === "hierarchy_level").map((d) => d.targetKey));
+    const managedA = new Set(dims.filter((d) => d.category === "automotive_field").map((d) => d.targetKey));
+    const managedD = new Set(dims.filter((d) => d.category === "dimension").map((d) => d.targetKey));
+    const existingTransform = /* @__PURE__ */ new Map();
+    for (const m of initialMappings) {
+      if (m.targetCategory === "automotive_field") existingTransform.set(m.targetKey, m.transformRule);
+      if (m.targetCategory === "hierarchy_level" && !managedH.has(m.targetKey))
+        hierarchy.push({ targetKey: m.targetKey, segmentId: m.segmentId });
+      else if (m.targetCategory === "automotive_field" && !managedA.has(m.targetKey))
+        automotive.push({ targetKey: m.targetKey, segmentId: m.segmentId, transformRule: m.transformRule });
+      else if (m.targetCategory === "dimension" && !managedD.has(m.targetKey))
+        dimensions.push({ targetKey: m.targetKey, segmentId: m.segmentId });
     }
-    const autoEntries = [];
-    for (const slot of automotiveSlots) {
-      const a = autoAssign[slot.key];
-      if (a?.segmentId) {
-        autoEntries.push({ targetKey: slot.key, segmentId: a.segmentId, transformRule: a.transformRule ?? slot.defaultTransform ?? null });
-      }
+    for (const d of dims) {
+      const segmentId = assign[d.key];
+      if (!segmentId) continue;
+      if (d.category === "hierarchy_level") hierarchy.push({ targetKey: d.targetKey, segmentId });
+      else if (d.category === "automotive_field")
+        automotive.push({
+          targetKey: d.targetKey,
+          segmentId,
+          transformRule: existingTransform.has(d.targetKey) ? existingTransform.get(d.targetKey) : autoTransform(d.targetKey)
+        });
+      else dimensions.push({ targetKey: d.targetKey, segmentId });
     }
-    await onSave(hierEntries, autoEntries);
+    await onSave(hierarchy, automotive, dimensions);
+    setSavedAssign({ ...assign });
+    setAutoKeys(/* @__PURE__ */ new Set());
+  }
+  function renderRow(d) {
+    const segId = assign[d.key];
+    const seg = segId ? segmentById.get(segId) : void 0;
+    const isActive = activeDim === d.key;
+    const isDrop = dropDim === d.key;
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: `cfi-vi-hier-row${isActive ? " cfi-vi-dropzone--active" : ""}`,
+        style: { cursor: "pointer", borderRadius: 6 },
+        onClick: () => setActiveDim(isActive ? null : d.key),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDropDim(d.key);
+        },
+        onDragLeave: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setDropDim(null);
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          if (dragging) {
+            setOne(d.key, dragging);
+            setDragging(null);
+          }
+          setDropDim(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx5("div", { className: `cfi-vi-hier-dot ${seg ? "cfi-vi-hier-dot--filled" : ""}` }),
+          /* @__PURE__ */ jsx5("span", { className: "cfi-vi-hier-name", style: { minWidth: 150 }, children: d.label }),
+          d.required && !seg && /* @__PURE__ */ jsx5(Badge, { variant: "outline", children: "required" }),
+          /* @__PURE__ */ jsx5("div", { className: `cfi-vi-dropzone ${isDrop ? "cfi-vi-dropzone--active" : seg ? "cfi-vi-dropzone--filled" : "cfi-vi-dropzone--empty"}`, style: { flex: 1 }, children: seg ? /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-chip--assigned", children: [
+            /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chip-dot cfi-vi-chip-dot--on" }),
+            /* @__PURE__ */ jsx5("span", { className: "cfi-vi-chip-label", children: seg.label }),
+            autoKeys.has(d.key) && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-auto-auto-tag", children: "auto" }),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "cfi-vi-chip-x",
+                title: "Unassign \u2014 returns to pool",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOne(d.key, "");
+                },
+                children: "\xD7"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx5("span", { className: "cfi-vi-dropzone-ph", children: isActive ? "Click a column \u2192" : isDrop ? "Drop here" : "Drag or click a column\u2026" }) })
+        ]
+      },
+      d.key
+    );
+  }
+  if (segments.length === 0) {
+    return /* @__PURE__ */ jsx5("div", { className: "cfi-vi", children: /* @__PURE__ */ jsx5("p", { className: "cfi-vi-pool-empty", children: "No columns detected. Run \u201CDetect segments\u201D from the Structure tab first." }) });
   }
-  void transformRules;
   return /* @__PURE__ */ jsxs5("div", { className: "cfi-vi cfi-vi-mapper", children: [
     /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-col", children: [
+      /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-section-head", children: /* @__PURE__ */ jsxs5("span", { className: "cfi-vi-mapper-note", style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx5(Wand2, { size: 13, "aria-hidden": true }),
+        " Auto-matched ",
+        autoCount,
+        " \xB7 ",
+        missingRequired.length,
+        " required still need a column"
+      ] }) }),
       /* @__PURE__ */ jsxs5("section", { className: "cfi-vi-mapper-section", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-section-head", children: [
-          /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Hierarchy Tree" }),
-          /* @__PURE__ */ jsx5("span", { className: "cfi-vi-mapper-note", children: isSparse ? "Drag chips onto whichever levels your file actually has. Empty levels are fine." : "Drag a chip onto a level. L(n) needs L(n\u22121) first." })
-        ] }),
-        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-box", children: LEVELS.map((level) => /* @__PURE__ */ jsx5(
-          HierarchyRow,
-          {
-            level,
-            segId: hierAssign[level] ?? null,
-            segmentById,
-            isDropTarget: dropTarget === `hier:${level}`,
-            onDragOver: () => setDropTarget(`hier:${level}`),
-            onDragLeave: () => setDropTarget(null),
-            onDrop: () => dragging && dropOnHier(level, dragging),
-            onChipDragStart: (segId) => startDrag(`hier:${level}:${segId}`),
-            onChipDragEnd: endDrag,
-            onChipRemove: () => setHierAssign((p) => ({ ...p, [level]: null })),
-            sparse: isSparse,
-            baseHint: baseHierarchyHint?.[level]
-          },
-          level
-        )) }),
-        hierarchyErrors.length > 0 && /* @__PURE__ */ jsx5("div", { children: hierarchyErrors.map((err) => /* @__PURE__ */ jsxs5("p", { className: "cfi-vi-mapper-err", children: [
-          "\u26A0 ",
-          err
-        ] }, err)) })
-      ] }),
-      automotiveSlots.length > 0 && /* @__PURE__ */ jsxs5("section", { className: "cfi-vi-mapper-section", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-section-head", children: [
-          /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Automotive Fields" }),
-          /* @__PURE__ */ jsx5("span", { className: "cfi-vi-mapper-note", children: "Brand / Nameplate / Plant Name come from the hierarchy unless overridden." })
-        ] }),
-        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-box", children: automotiveSlots.map((slot) => {
-          const covered = hierarchyCoveredKeys.has(slot.key);
-          const hierarchySegId = slot.hierarchyCoveredByLevel != null ? hierAssign[slot.hierarchyCoveredByLevel] : null;
-          const assignment = autoAssign[slot.key];
-          return /* @__PURE__ */ jsx5(
-            AutomotiveRow,
-            {
-              slot,
-              covered,
-              hierarchySegment: covered && hierarchySegId ? segmentById.get(hierarchySegId) : void 0,
-              assignment,
-              segmentById,
-              transformRuleLabels,
-              hierarchyEmpty: slot.hierarchyCoveredByLevel != null && !hierAssign[slot.hierarchyCoveredByLevel],
-              isDropTarget: dropTarget === `auto:${slot.key}`,
-              onDragOver: () => setDropTarget(`auto:${slot.key}`),
-              onDragLeave: () => setDropTarget(null),
-              onDrop: () => dragging && dropOnAuto(slot.key, dragging),
-              onChipDragStart: (segId) => startDrag(`auto:${slot.key}:${segId}`),
-              onChipDragEnd: endDrag,
-              onChipRemove: () => clearAuto(slot.key),
-              onTransformChange: (rule) => setAutoTransform(slot.key, rule)
-            },
-            slot.key
-          );
-        }) }),
-        missingAutomotive.length > 0 && /* @__PURE__ */ jsxs5("p", { className: "cfi-vi-mapper-err", children: [
-          "\u26A0 Required: ",
-          missingAutomotive.join(", ")
+        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-section-head", children: /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Required" }) }),
+        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-box", children: required.map(renderRow) }),
+        missingRequired.length > 0 && /* @__PURE__ */ jsxs5("p", { className: "cfi-vi-mapper-err", children: [
+          "\u26A0 Still needed: ",
+          missingRequired.join(", ")
         ] })
       ] }),
+      optional.length > 0 && /* @__PURE__ */ jsxs5("section", { className: "cfi-vi-mapper-section", children: [
+        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-section-head", children: /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Optional" }) }),
+        /* @__PURE__ */ jsx5("div", { className: "cfi-vi-mapper-box", children: optional.map(renderRow) })
+      ] }),
       /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-save", children: [
         /* @__PURE__ */ jsx5(Btn, { size: "sm", onClick: handleSave, disabled: !canSave, children: saving ? "Saving\u2026" : "Save Mapping" }),
-        isDirty && hierarchyErrors.length === 0 && missingAutomotive.length === 0 && !saving && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-mapper-dirty", children: "Unsaved changes" }),
-        !isDirty && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-muted", children: "Up to date" })
+        dirty && missingRequired.length === 0 && !saving && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-mapper-dirty", children: "Unsaved changes" }),
+        !dirty && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-muted", children: "Up to date" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs5("aside", { className: "cfi-vi-pool-col", children: [
       /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-mapper-section-head", children: [
-        /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Segment Pool" }),
+        /* @__PURE__ */ jsx5("h3", { className: "cfi-vi-mapper-h3", children: "Columns" }),
         /* @__PURE__ */ jsxs5("span", { className: "cfi-vi-mapper-note", children: [
-          poolSegments.length,
+          pool.length,
           " of ",
           segments.length,
           " unused"
@@ -1285,158 +1281,29 @@ function UnifiedSegmentMapper({
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-search", children: [
         /* @__PURE__ */ jsx5(Search, { size: 14, className: "cfi-vi-search-icon", "aria-hidden": true }),
-        /* @__PURE__ */ jsx5(TextInput, { type: "search", placeholder: "Filter segments\u2026", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value) })
+        /* @__PURE__ */ jsx5(TextInput, { type: "search", placeholder: "Filter columns\u2026", value: query, onChange: (e) => setQuery(e.target.value) })
       ] }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx5("p", { className: "cfi-vi-mapper-note", children: activeDim ? `Click a column to assign it to \u201C${dims.find((d) => d.key === activeDim)?.label}\u201D.` : "Click a dimension to select it, then click a column \u2014 or drag a column onto a dimension." }),
+      /* @__PURE__ */ jsx5("div", { className: "cfi-vi-pool", children: pool.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "cfi-vi-pool-empty", children: query ? "No columns match the filter." : "All columns assigned." }) : /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chips", children: pool.map((s) => /* @__PURE__ */ jsxs5(
         "div",
         {
-          className: `cfi-vi-pool ${dropTarget === "pool" ? "cfi-vi-pool--active" : ""}`,
-          onDragOver: (e) => {
-            e.preventDefault();
-            setDropTarget("pool");
-          },
-          onDragLeave: (e) => {
-            if (!e.currentTarget.contains(e.relatedTarget)) setDropTarget(null);
-          },
-          onDrop: (e) => {
-            e.preventDefault();
-            if (dragging) dropOnPool(dragging);
-          },
-          children: segments.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "cfi-vi-pool-empty", children: "No segments detected. Run \u201CDetect segments\u201D from the source page first." }) : poolSegments.length === 0 ? /* @__PURE__ */ jsx5("p", { className: "cfi-vi-pool-empty", children: searchQuery ? "No segments match the filter." : "All segments assigned \u2014 drop a chip here to return it." }) : /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chips", children: poolSegments.map((seg) => /* @__PURE__ */ jsx5(SegmentChip, { label: seg.label, onDragStart: () => startDrag(`pool:${seg.id}`), onDragEnd: endDrag }, seg.id)) })
-        }
-      ),
-      /* @__PURE__ */ jsx5("p", { className: "cfi-vi-mapper-note", children: "Drag chips onto a hierarchy level or an automotive field. Drop a chip back here to unassign." })
-    ] })
-  ] });
-}
-function HierarchyRow({
-  level,
-  segId,
-  segmentById,
-  isDropTarget,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onChipDragStart,
-  onChipDragEnd,
-  onChipRemove,
-  sparse,
-  baseHint
-}) {
-  const seg = segId ? segmentById.get(segId) : void 0;
-  const isLeaf = level === 6;
-  const indent = sparse ? 0 : (level - 1) * 22;
-  const levelName = DEFAULT_LEVEL_NAMES[level];
-  return /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-hier-row", style: { paddingLeft: `${indent}px` }, children: [
-    !sparse && level > 1 && /* @__PURE__ */ jsx5("div", { className: "cfi-vi-hier-elbow" }),
-    /* @__PURE__ */ jsx5("div", { className: `cfi-vi-hier-dot ${seg ? "cfi-vi-hier-dot--filled" : ""}` }),
-    /* @__PURE__ */ jsx5("span", { className: "cfi-vi-hier-name", children: levelName }),
-    isLeaf && !sparse && /* @__PURE__ */ jsx5("span", { className: "cfi-vi-leaf", children: "Leaf" }),
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        className: `cfi-vi-dropzone ${isDropTarget ? "cfi-vi-dropzone--active" : seg ? "cfi-vi-dropzone--filled" : "cfi-vi-dropzone--empty"}`,
-        onDragOver: (e) => {
-          e.preventDefault();
-          onDragOver();
-        },
-        onDragLeave: (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) onDragLeave();
-        },
-        onDrop: (e) => {
-          e.preventDefault();
-          onDrop();
-        },
-        children: seg ? /* @__PURE__ */ jsx5(AssignedChip, { seg, onDragStart: () => onChipDragStart(seg.id), onDragEnd: onChipDragEnd, onRemove: onChipRemove }) : /* @__PURE__ */ jsx5("span", { className: "cfi-vi-dropzone-ph", children: isDropTarget ? "Drop here" : "Drop a segment\u2026" })
-      }
-    ),
-    baseHint && /* @__PURE__ */ jsxs5("span", { className: "cfi-vi-base-hint", title: `Base source uses "${baseHint}" on ${levelName}. Match here for the overlay to join.`, children: [
-      "base: ",
-      baseHint
-    ] })
-  ] });
-}
-function AutomotiveRow({
-  slot,
-  covered,
-  hierarchySegment,
-  assignment,
-  segmentById,
-  transformRuleLabels,
-  hierarchyEmpty,
-  isDropTarget,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onChipDragStart,
-  onChipDragEnd,
-  onChipRemove
-}) {
-  const assignedSeg = assignment?.segmentId ? segmentById.get(assignment.segmentId) : void 0;
-  const requiredBadge = (slot.required || hierarchyEmpty) && !covered && !assignedSeg;
-  return /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-auto-row", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-auto-label", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-row", children: [
-        /* @__PURE__ */ jsx5("span", { className: "cfi-vi-auto-label-text", children: slot.label }),
-        requiredBadge && /* @__PURE__ */ jsx5(Badge, { variant: "outline", children: "required" })
-      ] }),
-      slot.hierarchyCoveredByLevel != null && /* @__PURE__ */ jsxs5("p", { className: `cfi-vi-auto-cover ${covered ? "cfi-vi-auto-cover--on" : ""}`, children: [
-        covered ? "\u2713 " : "",
-        "From L",
-        slot.hierarchyCoveredByLevel,
-        " hierarchy"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx5(
-      "div",
-      {
-        className: `cfi-vi-dropzone ${isDropTarget ? "cfi-vi-dropzone--active" : assignedSeg ? "cfi-vi-dropzone--filled" : covered ? "cfi-vi-dropzone--covered" : "cfi-vi-dropzone--empty"}`,
-        onDragOver: (e) => {
-          e.preventDefault();
-          onDragOver();
-        },
-        onDragLeave: (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) onDragLeave();
-        },
-        onDrop: (e) => {
-          e.preventDefault();
-          onDrop();
+          draggable: true,
+          onDragStart: () => setDragging(s.id),
+          onDragEnd: () => setDragging(null),
+          onClick: () => clickColumn(s.id),
+          className: "cfi-vi-chip",
+          style: { cursor: activeDim ? "pointer" : "grab" },
+          title: activeDim ? "Click to assign" : "Drag onto a dimension, or select a dimension first",
+          children: [
+            /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chip-dot" }),
+            s.label
+          ]
         },
-        children: assignedSeg ? /* @__PURE__ */ jsx5(AssignedChip, { seg: assignedSeg, onDragStart: () => onChipDragStart(assignedSeg.id), onDragEnd: onChipDragEnd, onRemove: onChipRemove }) : covered && hierarchySegment ? /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-auto-auto", title: "Auto-supplied from hierarchy. Drop a different chip here to override.", children: [
-          /* @__PURE__ */ jsx5(CheckCircle22, { size: 14, "aria-hidden": true }),
-          /* @__PURE__ */ jsx5("span", { className: "cfi-vi-auto-auto-label", children: hierarchySegment.label }),
-          /* @__PURE__ */ jsx5("span", { className: "cfi-vi-auto-auto-tag", children: "auto" })
-        ] }) : /* @__PURE__ */ jsx5("span", { className: "cfi-vi-dropzone-ph", children: isDropTarget ? "Drop here" : "Drop a segment\u2026" })
-      }
-    ),
-    slot.defaultTransform && !covered && /* @__PURE__ */ jsxs5("div", { className: "cfi-vi-auto-transform", children: [
-      /* @__PURE__ */ jsx5("span", { className: "cfi-vi-auto-transform-label", children: "Transform:" }),
-      " ",
-      transformRuleLabels[slot.defaultTransform] ?? slot.defaultTransform
+        s.id
+      )) }) })
     ] })
   ] });
 }
-function AssignedChip({
-  seg,
-  onDragStart,
-  onDragEnd,
-  onRemove
-}) {
-  return /* @__PURE__ */ jsxs5("div", { draggable: true, onDragStart, onDragEnd, className: "cfi-vi-chip--assigned", children: [
-    /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chip-dot cfi-vi-chip-dot--on" }),
-    /* @__PURE__ */ jsx5("span", { className: "cfi-vi-chip-label", children: seg.label }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: (e) => {
-      e.stopPropagation();
-      onRemove();
-    }, className: "cfi-vi-chip-x", title: "Remove \u2014 returns to pool", children: "\xD7" })
-  ] });
-}
-function SegmentChip({ label, onDragStart, onDragEnd }) {
-  return /* @__PURE__ */ jsxs5("div", { draggable: true, onDragStart, onDragEnd, className: "cfi-vi-chip", children: [
-    /* @__PURE__ */ jsx5("div", { className: "cfi-vi-chip-dot" }),
-    label
-  ] });
-}
 
 // src/VolumeSourceDetail.tsx
 import { useEffect as useEffect7, useRef as useRef3, useState as useState7 } from "react";
@@ -1730,8 +1597,8 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
   const [mappingKeys, setMappingKeys] = useState7(null);
   const [mappingRows, setMappingRows] = useState7([]);
   const [savingMapping, setSavingMapping] = useState7(false);
-  const [baseHierarchyHint, setBaseHierarchyHint] = useState7({});
   const [requiredStatus, setRequiredStatus] = useState7(null);
+  const [mappableDimensions, setMappableDimensions] = useState7([]);
   async function loadRequiredStatus() {
     if (!id || !transport.getRequiredMappingStatus) {
       setRequiredStatus(null);
@@ -1762,34 +1629,12 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
       setHasData(uploads.items.some((u) => u.status === "done" || u.status === "done_with_errors"));
       setMappingKeys(keys);
       setMappingRows(mapping.items);
-      if (src.kind === "overlay") {
-        try {
-          const tenantConfig = await transport.getTenantConfig();
-          if (tenantConfig?.sourceId && tenantConfig.sourceId !== id) {
-            const [baseSrc, baseMapping] = await Promise.all([
-              transport.getSource(tenantConfig.sourceId),
-              transport.listSegmentMapping(tenantConfig.sourceId)
-            ]);
-            const baseSegLabel = new Map(baseSrc.segments.map((s) => [s.id, s.label]));
-            const hint = {};
-            for (const row of baseMapping.items) {
-              if (row.targetCategory !== "hierarchy_level") continue;
-              const m = /^level(\d)$/.exec(row.targetKey);
-              if (!m) continue;
-              const label = baseSegLabel.get(row.segmentId);
-              if (label) hint[parseInt(m[1], 10)] = label;
-            }
-            setBaseHierarchyHint(hint);
-          } else {
-            setBaseHierarchyHint({});
-          }
-        } catch {
-          setBaseHierarchyHint({});
-        }
+      void loadRequiredStatus();
+      if (transport.getMappableDimensions) {
+        transport.getMappableDimensions().then(setMappableDimensions).catch(() => setMappableDimensions([]));
       } else {
-        setBaseHierarchyHint({});
+        setMappableDimensions([]);
       }
-      void loadRequiredStatus();
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to load source");
     } finally {
@@ -1822,14 +1667,19 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
       setError(e instanceof Error ? e.message : "Delete failed");
     }
   }
-  async function handleSaveMapping(hierarchy, automotive) {
+  async function handleSaveMapping(hierarchy, automotive, dimensions) {
     if (!id) return;
     setSavingMapping(true);
     setError(null);
     try {
       const hResp = await transport.replaceSegmentMappingCategory(id, "hierarchy_level", hierarchy);
       const aResp = await transport.replaceSegmentMappingCategory(id, "automotive_field", automotive);
-      setMappingRows([...hResp.items, ...aResp.items]);
+      const rows = [...hResp.items, ...aResp.items];
+      if (transport.getMappableDimensions) {
+        const dResp = await transport.replaceSegmentMappingCategory(id, "dimension", dimensions);
+        rows.push(...dResp.items);
+      }
+      setMappingRows(rows);
       void loadRequiredStatus();
     } catch (e) {
       setError(e instanceof Error ? e.message : "Failed to save mapping");
@@ -2181,16 +2031,11 @@ function VolumeSourceDetail({ transport, sourceId, onOpenSource, onBack, classNa
         source.segments.length === 0 ? /* @__PURE__ */ jsx8("p", { className: "cfi-vi-muted", children: "No segments yet. Add segments on the Structure tab (Detect from file or Add manually) before mapping." }) : /* @__PURE__ */ jsx8(
           UnifiedSegmentMapper,
           {
-            segments: source.segments.slice().sort((a, b) => a.label.localeCompare(b.label)),
-            hierarchyInitial: mappingRows.filter((m) => m.targetCategory === "hierarchy_level"),
-            automotiveInitial: mappingRows.filter((m) => m.targetCategory === "automotive_field"),
-            automotiveSlots: isOverlay ? [] : AUTOMOTIVE_SLOTS,
-            transformRules: mappingKeys?.transformRules ?? [],
-            transformRuleLabels: AUTOMOTIVE_TRANSFORM_LABELS,
+            segments: source.segments,
+            mappableDimensions,
+            initialMappings: mappingRows,
             onSave: handleSaveMapping,
-            saving: savingMapping,
-            hierarchyMode: isOverlay ? "sparse" : "tree",
-            baseHierarchyHint: isOverlay ? baseHierarchyHint : void 0
+            saving: savingMapping
           }
         )
       ] })

package/package.json

@@ -1,43 +1,43 @@
-{
-  "name": "@campfire-interactive/volume-intelligence-ui",
-  "version": "0.5.0",
-  "description": "Shared Volume Intelligence UI components (volume import) for the Campfire Suite — embedded by the VI webapp and by consuming apps (OMSF) so there is one import surface, not two that drift.",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "@campfire-interactive/design-tokens": "*",
-    "lucide-react": "^0.487.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tsup": "^8.0.0",
-    "typescript": "^5.3.3"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org",
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  }
-}
+{
+  "name": "@campfire-interactive/volume-intelligence-ui",
+  "version": "0.6.0",
+  "description": "Shared Volume Intelligence UI components (volume import) for the Campfire Suite — embedded by the VI webapp and by consuming apps (OMSF) so there is one import surface, not two that drift.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@campfire-interactive/design-tokens": "*",
+    "lucide-react": "^0.487.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}