@memberjunction/ng-dashboards 6.2.0-edge.7 → 6.2.0

package/dist/KnowledgeHub/components/visualize/semantic-graph/semantic-graph-explorer.component.js

@@ -0,0 +1,1184 @@
+/**
+ * @fileoverview Knowledge Hub Semantic Graph & Canon Explorer (Visualize > Graphs & Canon mode)
+ *
+ * Interactive 2-pane workspace built on `@memberjunction/ng-graph-view` (`<mj-graph-view>`)
+ * for exploring `MJ: Graphs` (grouped by `MJ: Graph Types` and `IsCanon`), ranked
+ * `MJ: Graph Concept Types` (`Policy #10`, `Metric #20`, `Process #30`, `Role #40`,
+ * `Domain #50`, `Term #60`), `MJ: Graph Concepts`, grounded MJ primitives, source
+ * provenance chunks (`SourcedFrom`), and cross-source authority conflicts (`Contradicts`).
+ */
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject, } from '@angular/core';
+import { RunView } from '@memberjunction/core';
+import { BaseAngularComponent } from '@memberjunction/ng-base-types';
+import { NormalizeUUID, UUIDsEqual } from '@memberjunction/global';
+import { DEFAULT_GRAPH_CATEGORIES, } from '@memberjunction/ng-graph-view';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-graph-view";
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.HigherAuthoritySummary;
+const _forTrack2 = ($index, $item) => $item.TargetRecordID + $item.EdgeLabel;
+const _forTrack3 = ($index, $item) => $item.ChunkID;
+function SemanticGraphExplorerComponent_For_12_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " \u2605 ");
+} }
+function SemanticGraphExplorerComponent_For_12_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const g_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", g_r3.ConflictCount, " ", g_r3.ConflictCount === 1 ? "conflict" : "conflicts", " ");
+} }
+function SemanticGraphExplorerComponent_For_12_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_For_12_Template_button_click_0_listener() { const g_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.SelectGraph(g_r3.ID)); });
+    i0.ɵɵelementStart(1, "div", 24)(2, "span", 25);
+    i0.ɵɵelement(3, "i", 26);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 27);
+    i0.ɵɵconditionalCreate(6, SemanticGraphExplorerComponent_For_12_Conditional_6_Template, 1, 0);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 28)(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, SemanticGraphExplorerComponent_For_12_Conditional_11_Template, 3, 2, "span", 29);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const g_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("selected", (ctx_r3.SelectedGraph == null ? null : ctx_r3.SelectedGraph.ID) === g_r3.ID);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(g_r3.IconClass);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", g_r3.Name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("is-canon", g_r3.IsCanon);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(g_r3.IsCanon ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", g_r3.GraphTypeName, " \u00B7 #", g_r3.GraphTypeRank, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", g_r3.ConceptCount, " concepts");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(g_r3.ConflictCount > 0 ? 11 : -1);
+} }
+function SemanticGraphExplorerComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.ToggleConceptTypeFilter(null)); });
+    i0.ɵɵtext(1, " All ");
+    i0.ɵɵelementEnd();
+} }
+function SemanticGraphExplorerComponent_For_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_For_20_Template_button_click_0_listener() { const ct_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.ToggleConceptTypeFilter(ct_r7.Name)); });
+    i0.ɵɵelementStart(1, "span", 33);
+    i0.ɵɵelement(2, "span", 34)(3, "i", 35);
+    i0.ɵɵelementStart(4, "span", 36);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "span", 37);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(8, "strong");
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ct_r7 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("active", (ctx_r3.ActiveConceptTypeFilter == null ? null : ctx_r3.ActiveConceptTypeFilter.toLowerCase()) === ct_r7.Name.toLowerCase())("dimmed", ctx_r3.ActiveConceptTypeFilter && ctx_r3.ActiveConceptTypeFilter.toLowerCase() !== ct_r7.Name.toLowerCase());
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("background", ct_r7.Color);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ct_r7.IconClass);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ct_r7.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Rank #", ct_r7.Rank, " \u00B7 ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ct_r7.Count);
+} }
+function SemanticGraphExplorerComponent_Conditional_37_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const srcName_r8 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(srcName_r8);
+} }
+function SemanticGraphExplorerComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 4)(1, "span", 6);
+    i0.ɵɵtext(2, "Connected Content Sources");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 38);
+    i0.ɵɵrepeaterCreate(4, SemanticGraphExplorerComponent_Conditional_37_For_5_Template, 4, 1, "div", 39, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r3.SelectedGraph.SourceNames);
+} }
+function SemanticGraphExplorerComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r3.LoadError || ctx_r3.ActionError);
+} }
+function SemanticGraphExplorerComponent_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "span");
+    i0.ɵɵtext(2, "No concepts or edges in this graph yet.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 41);
+    i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_Conditional_40_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.LoadSampleGraphPreview()); });
+    i0.ɵɵtext(4, " Load Example Canon Graph ");
+    i0.ɵɵelementEnd()();
+} }
+function SemanticGraphExplorerComponent_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "mj-loading", 42);
+    i0.ɵɵelementEnd();
+} }
+function SemanticGraphExplorerComponent_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-graph-view", 43);
+    i0.ɵɵlistener("NodeSelected", function SemanticGraphExplorerComponent_Conditional_42_Template_mj_graph_view_NodeSelected_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnNodeSelected($event)); })("NodeNavigated", function SemanticGraphExplorerComponent_Conditional_42_Template_mj_graph_view_NodeNavigated_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnNodeNavigated($event)); })("NodeAction", function SemanticGraphExplorerComponent_Conditional_42_Template_mj_graph_view_NodeAction_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnNodeAction($event)); })("CategoryFilterChanged", function SemanticGraphExplorerComponent_Conditional_42_Template_mj_graph_view_CategoryFilterChanged_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnCategoryFilterChangedFromCanvas($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    const canonInspectorTemplate_r11 = i0.ɵɵreference(44);
+    i0.ɵɵproperty("Title", (ctx_r3.SelectedGraph == null ? null : ctx_r3.SelectedGraph.Name) || "Semantic Graph")("Nodes", ctx_r3.Nodes)("Edges", ctx_r3.Edges)("Categories", ctx_r3.Categories)("LayoutMode", ctx_r3.LayoutMode)("SelectedNodeId", ctx_r3.SelectedNodeId)("ActiveCategoryFilter", ctx_r3.ActiveConceptTypeFilter)("AutoOpenInspector", true)("ShowToolbar", true)("ShowLegend", true)("ShowInspector", true)("InspectorCustomTemplate", canonInspectorTemplate_r11)("Searchable", true);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "span", 46);
+    i0.ɵɵtext(2, "Specification");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "pre", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(node_r12.Specification);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_1_For_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conflict_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(conflict_r13.ResolutionNote);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_1_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49)(1, "div")(2, "strong");
+    i0.ɵɵtext(3, "Higher Tier:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div")(6, "strong");
+    i0.ɵɵtext(7, "Conflicting:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, SemanticGraphExplorerComponent_ng_template_43_Conditional_1_For_5_Conditional_9_Template, 2, 1, "div", 50);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conflict_r13 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", conflict_r13.HigherAuthoritySummary);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", conflict_r13.ConflictingSummary);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(conflict_r13.ResolutionNote ? 9 : -1);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 48);
+    i0.ɵɵelement(2, "i", 30);
+    i0.ɵɵtext(3, " Authority Conflict (Contradicts Edge) ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(4, SemanticGraphExplorerComponent_ng_template_43_Conditional_1_For_5_Template, 10, 3, "div", 49, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(node_r12.Conflicts);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_ng_template_43_Conditional_2_For_5_Template_button_click_0_listener() { const g_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.OpenGroundingRecord(g_r15)); });
+    i0.ɵɵelementStart(1, "span", 54);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 55);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 56);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const g_r15 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(g_r15.EdgeLabel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(g_r15.TargetDisplayName);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "span", 46);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 51);
+    i0.ɵɵrepeaterCreate(4, SemanticGraphExplorerComponent_ng_template_43_Conditional_2_For_5_Template, 6, 2, "button", 52, _forTrack2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Grounded MJ Primitives (", node_r12.Groundings.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(node_r12.Groundings);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_3_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const chunk_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(chunk_r16.AuthorityTier);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_3_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59)(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, SemanticGraphExplorerComponent_ng_template_43_Conditional_3_For_5_Conditional_4_Template, 2, 1, "span", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 61);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const chunk_r16 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", chunk_r16.SourceName, "", chunk_r16.Locator ? " \u00B7 " + chunk_r16.Locator : "");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(chunk_r16.AuthorityTier ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(chunk_r16.Snippet);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "span", 46);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 57);
+    i0.ɵɵrepeaterCreate(4, SemanticGraphExplorerComponent_ng_template_43_Conditional_3_For_5_Template, 7, 4, "div", 58, _forTrack3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("SourcedFrom Chunks (", node_r12.ProvenanceChunks.length, ")");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(node_r12.ProvenanceChunks);
+} }
+function SemanticGraphExplorerComponent_ng_template_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, SemanticGraphExplorerComponent_ng_template_43_Conditional_0_Template, 5, 1, "div", 44);
+    i0.ɵɵconditionalCreate(1, SemanticGraphExplorerComponent_ng_template_43_Conditional_1_Template, 6, 0, "div", 45);
+    i0.ɵɵconditionalCreate(2, SemanticGraphExplorerComponent_ng_template_43_Conditional_2_Template, 6, 1, "div", 44);
+    i0.ɵɵconditionalCreate(3, SemanticGraphExplorerComponent_ng_template_43_Conditional_3_Template, 6, 1, "div", 44);
+} if (rf & 2) {
+    const node_r12 = ctx.$implicit;
+    i0.ɵɵconditional(node_r12.Specification ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r12.Conflicts && node_r12.Conflicts.length > 0 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r12.Groundings && node_r12.Groundings.length > 0 ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r12.ProvenanceChunks && node_r12.ProvenanceChunks.length > 0 ? 3 : -1);
+} }
+/** Default ranked Canon & Semantic Graph categories used by the Knowledge Hub explorer. */
+export const DEFAULT_SEMANTIC_GRAPH_CATEGORIES = [
+    { Category: 'Policy', Label: 'Policy', Color: '#f43f5e', IconClass: 'fa-solid fa-gavel', Rank: 10 },
+    { Category: 'Metric', Label: 'Metric', Color: '#10b981', IconClass: 'fa-solid fa-chart-line', Rank: 20 },
+    { Category: 'Process', Label: 'Process', Color: '#8b5cf6', IconClass: 'fa-solid fa-gears', Rank: 30 },
+    { Category: 'Role', Label: 'Role', Color: '#f59e0b', IconClass: 'fa-solid fa-user-shield', Rank: 40 },
+    { Category: 'Domain', Label: 'Domain', Color: '#3b82f6', IconClass: 'fa-solid fa-layer-group', Rank: 50 },
+    { Category: 'Term', Label: 'Term', Color: '#06b6d4', IconClass: 'fa-solid fa-book-bookmark', Rank: 60 },
+    { Category: 'grounding', Label: 'Grounded Primitive', Color: '#14b8a6', IconClass: 'fa-solid fa-bolt', Rank: 90 },
+    { Category: 'chunk', Label: 'Source Chunk', Color: '#64748b', IconClass: 'fa-solid fa-file-lines', Rank: 95 },
+    ...DEFAULT_GRAPH_CATEGORIES,
+];
+const SAMPLE_GRAPH_ID = 'D1000000-0000-4000-8000-000000000004';
+const CONCEPT_TYPE_COLORS = {
+    policy: '#f43f5e',
+    metric: '#10b981',
+    process: '#8b5cf6',
+    role: '#f59e0b',
+    domain: '#3b82f6',
+    term: '#06b6d4',
+};
+export class SemanticGraphExplorerComponent extends BaseAngularComponent {
+    cdr = inject(ChangeDetectorRef);
+    Provider = null;
+    /** Emitted when the user requests to open an entity record from the graph or inspector. */
+    OpenRecordRequested = new EventEmitter();
+    /** Emitted when a graph node is selected on canvas. */
+    ConceptSelected = new EventEmitter();
+    // ================================================================
+    // State
+    // ================================================================
+    IsLoading = true;
+    LoadError = null;
+    ActionError = null;
+    GraphOptions = [];
+    ConceptTypeOptions = [];
+    SelectedGraphID = '';
+    OnlyCanonGraphs = false;
+    ActiveConceptTypeFilter = null;
+    LayoutMode = 'force';
+    authorityTiersById = new Map();
+    /** Edge / Node Overlay Toggles */
+    ShowGroundedPrimitives = true;
+    ShowSourceChunks = true;
+    HighlightConflicts = true;
+    /** Raw & Filtered Graph Data passed to <mj-graph-view> */
+    rawNodes = [];
+    rawEdges = [];
+    Nodes = [];
+    Edges = [];
+    Categories = [...DEFAULT_SEMANTIC_GRAPH_CATEGORIES];
+    SelectedNodeId;
+    // ================================================================
+    // Lifecycle
+    // ================================================================
+    async ngOnInit() {
+        await this.LoadGraphCatalog();
+    }
+    // ================================================================
+    // Public Getters & Actions
+    // ================================================================
+    get VisibleGraphOptions() {
+        if (!this.OnlyCanonGraphs) {
+            return this.GraphOptions;
+        }
+        return this.GraphOptions.filter(g => g.IsCanon);
+    }
+    get SelectedGraph() {
+        return this.GraphOptions.find(g => UUIDsEqual(g.ID, this.SelectedGraphID));
+    }
+    async SelectGraph(graphId) {
+        if (UUIDsEqual(this.SelectedGraphID, graphId)) {
+            return;
+        }
+        this.SelectedGraphID = graphId;
+        this.ActiveConceptTypeFilter = null;
+        await this.LoadSelectedGraphData();
+    }
+    ToggleCanonFilter() {
+        this.OnlyCanonGraphs = !this.OnlyCanonGraphs;
+        const visible = this.VisibleGraphOptions;
+        if (visible.length > 0 && !visible.some(g => UUIDsEqual(g.ID, this.SelectedGraphID))) {
+            void this.SelectGraph(visible[0].ID);
+        }
+        else {
+            this.cdr.detectChanges();
+        }
+    }
+    ToggleConceptTypeFilter(typeName) {
+        if (!typeName || (this.ActiveConceptTypeFilter && this.ActiveConceptTypeFilter.toLowerCase() === typeName.toLowerCase())) {
+            this.ActiveConceptTypeFilter = null;
+        }
+        else {
+            this.ActiveConceptTypeFilter = typeName;
+        }
+        this.rebuildConceptTypeCounts();
+        this.cdr.detectChanges();
+    }
+    OnCategoryFilterChangedFromCanvas(category) {
+        this.ActiveConceptTypeFilter = category;
+        this.cdr.detectChanges();
+    }
+    OnOverlayToggleChanged() {
+        this.applyOverlayFilters();
+        this.cdr.detectChanges();
+    }
+    CreateNewGraphRecord() {
+        if (this.SelectedGraph && !this.SelectedGraph.IsSample) {
+            this.OpenRecordRequested.emit({
+                EntityName: 'MJ: Graphs',
+                RecordID: this.SelectedGraph.ID,
+            });
+        }
+    }
+    OnNodeSelected(event) {
+        const node = event.Node;
+        this.SelectedNodeId = node.ID;
+        this.ConceptSelected.emit({
+            NodeID: node.ID,
+            Label: node.Label,
+            ConceptType: String(node.Category),
+            Status: String(node.Status ?? 'Approved'),
+            AuthorityTier: String(node.AuthorityTier ?? 'Reference'),
+            ConnectedChunkCount: node.ProvenanceChunks?.length ?? 0,
+            ConflictCount: node.Conflicts?.length ?? 0,
+        });
+    }
+    OnNodeNavigated(event) {
+        const entityName = event.EntityName || String(event.Node.Data?.['EntityName'] ?? 'MJ: Graph Concepts');
+        const recordId = event.RecordID || String(event.Node.Data?.['RecordID'] ?? event.Node.ID);
+        if (entityName && recordId && !recordId.startsWith('sample-')) {
+            this.OpenRecordRequested.emit({ EntityName: entityName, RecordID: recordId });
+        }
+    }
+    async OnNodeAction(event) {
+        if (event.Action === 'approve') {
+            const node = event.Node;
+            this.ActionError = null;
+            if (node.ID.startsWith('sample-') || this.SelectedGraph?.IsSample) {
+                node.Status = 'Approved';
+                this.Nodes = [...this.Nodes];
+                this.cdr.detectChanges();
+                return;
+            }
+            try {
+                const provider = this.ProviderToUse;
+                const conceptEntity = await provider.GetEntityObject('MJ: Graph Concepts', provider.CurrentUser);
+                if (await conceptEntity.Load(node.ID)) {
+                    conceptEntity.Status = 'Approved';
+                    const saved = await conceptEntity.Save();
+                    if (saved) {
+                        node.Status = 'Approved';
+                        this.Nodes = [...this.Nodes];
+                    }
+                    else {
+                        this.ActionError =
+                            conceptEntity.LatestResult?.CompleteMessage || 'Failed to save concept approval.';
+                    }
+                }
+                else {
+                    this.ActionError = `Could not load Graph Concept ${node.ID}.`;
+                }
+            }
+            catch (err) {
+                this.ActionError = err instanceof Error ? err.message : String(err);
+            }
+            this.cdr.detectChanges();
+        }
+    }
+    LoadSampleGraphPreview() {
+        this.LoadError = null;
+        this.ActionError = null;
+        const sampleOpt = this.buildSampleGraphOption();
+        if (!this.GraphOptions.some(o => UUIDsEqual(o.ID, sampleOpt.ID))) {
+            this.GraphOptions = [...this.GraphOptions, sampleOpt];
+        }
+        this.SelectedGraphID = sampleOpt.ID;
+        this.loadSampleCanonGraphNodesAndEdges();
+        this.applyOverlayFilters();
+        this.rebuildConceptTypeCounts();
+        this.cdr.detectChanges();
+    }
+    // ================================================================
+    // Data Loading (MJ: Graph Types, MJ: Graph Concept Types, MJ: Graphs)
+    // ================================================================
+    async LoadGraphCatalog() {
+        this.IsLoading = true;
+        this.LoadError = null;
+        this.ActionError = null;
+        this.cdr.detectChanges();
+        try {
+            const provider = this.ProviderToUse;
+            const rv = RunView.FromMetadataProvider(provider);
+            const user = provider.CurrentUser;
+            const [graphTypesRes, conceptTypesRes, authorityTiersRes, graphsRes, sourcesRes] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Graph Types',
+                    ExtraFilter: `Status = 'Active'`,
+                    OrderBy: 'Rank ASC, Name ASC',
+                    ResultType: 'simple',
+                },
+                {
+                    EntityName: 'MJ: Graph Concept Types',
+                    ExtraFilter: `Status = 'Active'`,
+                    OrderBy: 'Rank ASC, Name ASC',
+                    ResultType: 'simple',
+                },
+                {
+                    EntityName: 'MJ: Graph Authority Tiers',
+                    ExtraFilter: `Status = 'Active'`,
+                    OrderBy: 'Rank DESC, Name ASC',
+                    ResultType: 'simple',
+                },
+                {
+                    EntityName: 'MJ: Graphs',
+                    ExtraFilter: `Status = 'Active'`,
+                    OrderBy: 'Name ASC',
+                    ResultType: 'simple',
+                },
+                {
+                    EntityName: 'MJ: Content Sources',
+                    Fields: ['ID', 'Name', 'GraphID'],
+                    ResultType: 'simple',
+                },
+            ], user);
+            const graphTypesById = new Map();
+            for (const gt of (graphTypesRes?.Results ?? [])) {
+                graphTypesById.set(NormalizeUUID(gt.ID), gt);
+            }
+            this.authorityTiersById.clear();
+            for (const at of (authorityTiersRes?.Results ?? [])) {
+                this.authorityTiersById.set(NormalizeUUID(at.ID), at);
+            }
+            const conceptTypes = (conceptTypesRes?.Results ?? []);
+            this.ConceptTypeOptions = conceptTypes.length > 0
+                ? conceptTypes.map(ct => ({
+                    ID: ct.ID,
+                    Name: ct.Name,
+                    Rank: ct.Rank ?? 100,
+                    IconClass: ct.IconClass || 'fa-solid fa-circle-dot',
+                    Color: this.resolveConceptTypeColor(ct.Name),
+                    Count: 0,
+                }))
+                : this.buildDefaultConceptTypeOptions();
+            this.Categories = [
+                ...this.ConceptTypeOptions.map(ct => ({
+                    Category: ct.Name,
+                    Label: ct.Name,
+                    Color: ct.Color,
+                    IconClass: ct.IconClass,
+                    Rank: ct.Rank,
+                })),
+                { Category: 'grounding', Label: 'Grounded Primitive', Color: '#14b8a6', IconClass: 'fa-solid fa-bolt', Rank: 90 },
+                { Category: 'chunk', Label: 'Source Chunk', Color: '#64748b', IconClass: 'fa-solid fa-file-lines', Rank: 95 },
+            ];
+            const sourcesByGraphId = new Map();
+            for (const src of (sourcesRes?.Results ?? [])) {
+                if (src.GraphID) {
+                    const key = NormalizeUUID(src.GraphID);
+                    const list = sourcesByGraphId.get(key) ?? [];
+                    list.push(src.Name || 'Untitled Source');
+                    sourcesByGraphId.set(key, list);
+                }
+            }
+            const dbGraphs = (graphsRes?.Results ?? []);
+            const options = dbGraphs.map(g => {
+                const gt = graphTypesById.get(NormalizeUUID(g.GraphTypeID));
+                return {
+                    ID: g.ID,
+                    Name: g.Name,
+                    Description: g.Description ?? '',
+                    GraphTypeID: g.GraphTypeID,
+                    GraphTypeName: gt?.Name ?? g.GraphType ?? 'Custom',
+                    IsCanon: Boolean(gt?.IsCanon ?? (g.GraphType === 'Canon')),
+                    GraphTypeRank: gt?.Rank ?? 100,
+                    IconClass: gt?.IconClass || 'fa-solid fa-diagram-project',
+                    ConceptCount: 0,
+                    ConflictCount: 0,
+                    SourceNames: sourcesByGraphId.get(NormalizeUUID(g.ID)) ?? [],
+                };
+            }).sort((a, b) => a.GraphTypeRank - b.GraphTypeRank || a.Name.localeCompare(b.Name));
+            this.GraphOptions = options;
+            if (this.GraphOptions.length > 0) {
+                if (!this.SelectedGraphID || !this.GraphOptions.some(o => UUIDsEqual(o.ID, this.SelectedGraphID))) {
+                    this.SelectedGraphID = this.GraphOptions[0].ID;
+                }
+                await this.LoadSelectedGraphData();
+            }
+            else {
+                this.rawNodes = [];
+                this.rawEdges = [];
+                this.Nodes = [];
+                this.Edges = [];
+            }
+        }
+        catch (err) {
+            this.LoadError = err instanceof Error ? err.message : String(err);
+            this.ConceptTypeOptions = this.buildDefaultConceptTypeOptions();
+            this.rawNodes = [];
+            this.rawEdges = [];
+            this.Nodes = [];
+            this.Edges = [];
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async LoadSelectedGraphData() {
+        const selected = this.SelectedGraph;
+        if (!selected) {
+            this.rawNodes = [];
+            this.rawEdges = [];
+            this.applyOverlayFilters();
+            this.rebuildConceptTypeCounts();
+            this.cdr.detectChanges();
+            return;
+        }
+        if (selected.IsSample) {
+            this.loadSampleCanonGraphNodesAndEdges();
+            this.applyOverlayFilters();
+            this.rebuildConceptTypeCounts();
+            this.cdr.detectChanges();
+            return;
+        }
+        if (!this.isValidUUID(selected.ID)) {
+            this.LoadError = `Invalid Graph ID: ${selected.ID}`;
+            return;
+        }
+        this.IsLoading = true;
+        this.LoadError = null;
+        this.cdr.detectChanges();
+        try {
+            const provider = this.ProviderToUse;
+            const rv = RunView.FromMetadataProvider(provider);
+            const user = provider.CurrentUser;
+            const normalizedGraphId = NormalizeUUID(selected.ID);
+            const [conceptsRes, edgesRes] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Graph Concepts',
+                    ExtraFilter: `GraphID = '${normalizedGraphId}'`,
+                    OrderBy: 'Name ASC',
+                    MaxRows: 500,
+                    ResultType: 'simple',
+                },
+                {
+                    EntityName: 'MJ: Graph Edges',
+                    ExtraFilter: `GraphID = '${normalizedGraphId}'`,
+                    MaxRows: 1000,
+                    ResultType: 'simple',
+                },
+            ], user);
+            const concepts = (conceptsRes?.Results ?? []);
+            const edges = (edgesRes?.Results ?? []);
+            if (concepts.length === 0 && edges.length === 0) {
+                this.rawNodes = [];
+                this.rawEdges = [];
+                selected.ConceptCount = 0;
+                selected.ConflictCount = 0;
+                this.applyOverlayFilters();
+                this.rebuildConceptTypeCounts();
+                return;
+            }
+            const rankByTypeName = new Map();
+            for (const ct of this.ConceptTypeOptions) {
+                rankByTypeName.set(ct.Name.toLowerCase(), ct.Rank);
+            }
+            const nodes = concepts.map(c => {
+                const typeName = c.ConceptType || 'Term';
+                const rank = rankByTypeName.get(typeName.toLowerCase()) ?? 60;
+                const tierEntity = c.AuthorityTierID ? this.authorityTiersById.get(NormalizeUUID(c.AuthorityTierID)) : undefined;
+                const tierLabel = tierEntity ? `${tierEntity.Name} (${tierEntity.Rank})` : (c.AuthorityTier || 'Reference');
+                return {
+                    ID: c.ID,
+                    Label: c.Name,
+                    Sublabel: `${typeName} · ${tierEntity?.Name ?? c.AuthorityTier ?? 'Reference'}`,
+                    Category: typeName,
+                    Rank: rank,
+                    Badge: `#${rank}`,
+                    Status: c.Status,
+                    AuthorityTier: tierLabel,
+                    ParentID: c.ParentID ?? undefined,
+                    Description: c.Description,
+                    Specification: c.Specification ?? undefined,
+                    Conflicts: [],
+                    Groundings: [],
+                    ProvenanceChunks: [],
+                    Data: {
+                        EntityName: 'MJ: Graph Concepts',
+                        RecordID: c.ID,
+                    },
+                };
+            });
+            const nodeById = new Map();
+            for (const n of nodes) {
+                nodeById.set(NormalizeUUID(n.ID), n);
+            }
+            const graphEdges = [];
+            let conflictCount = 0;
+            for (const e of edges) {
+                const edgeLabel = e.EdgeType || 'Related To';
+                const isConflict = edgeLabel.toLowerCase().includes('contradict');
+                if (isConflict) {
+                    conflictCount++;
+                }
+                // Ensure synthetic endpoint nodes exist for non-concept endpoints (chunks or grounded MJ entities)
+                const srcKey = NormalizeUUID(e.SourceRecordID);
+                const tgtKey = NormalizeUUID(e.TargetRecordID);
+                if (!nodeById.has(srcKey)) {
+                    const synth = this.createSyntheticEndpointNode(e.SourceEntity || 'Record', e.SourceRecordID, edgeLabel);
+                    nodes.push(synth);
+                    nodeById.set(srcKey, synth);
+                }
+                if (!nodeById.has(tgtKey)) {
+                    const synth = this.createSyntheticEndpointNode(e.TargetEntity || 'Record', e.TargetRecordID, edgeLabel);
+                    nodes.push(synth);
+                    nodeById.set(tgtKey, synth);
+                }
+                const srcNode = nodeById.get(srcKey);
+                const tgtNode = nodeById.get(tgtKey);
+                if (edgeLabel === 'Defines' || edgeLabel === 'Describes' || edgeLabel === 'Measures' || edgeLabel === 'Implements') {
+                    srcNode.Groundings = srcNode.Groundings ?? [];
+                    srcNode.Groundings.push({
+                        EdgeLabel: edgeLabel,
+                        TargetEntityName: e.TargetEntity || 'MJ: Entities',
+                        TargetRecordID: e.TargetRecordID,
+                        TargetDisplayName: `${e.TargetEntity || 'Entity'}: ${tgtNode.Label}`,
+                    });
+                }
+                else if (edgeLabel === 'SourcedFrom') {
+                    srcNode.ProvenanceChunks = srcNode.ProvenanceChunks ?? [];
+                    srcNode.ProvenanceChunks.push({
+                        ChunkID: e.TargetRecordID,
+                        SourceName: e.TargetEntity || 'MJ: Content Item Chunks',
+                        Snippet: `Chunk ${e.TargetRecordID.slice(0, 8)} (Confidence: ${Math.round((e.Confidence ?? 1) * 100)}%)`,
+                    });
+                }
+                else if (isConflict) {
+                    const conflictItem = {
+                        HigherAuthoritySummary: srcNode.Label,
+                        ConflictingSummary: tgtNode.Label,
+                        ResolutionNote: 'Flagged by Contradicts edge for steward review.',
+                        EdgeID: e.ID,
+                    };
+                    srcNode.Conflicts = [...(srcNode.Conflicts ?? []), conflictItem];
+                    tgtNode.Conflicts = [...(tgtNode.Conflicts ?? []), conflictItem];
+                }
+                graphEdges.push({
+                    ID: e.ID,
+                    SourceID: e.SourceRecordID,
+                    TargetID: e.TargetRecordID,
+                    Label: edgeLabel,
+                    Direction: 'directed',
+                    Weight: e.Weight ?? 1,
+                    Style: isConflict ? 'dashed' : (edgeLabel === 'SourcedFrom' ? 'dotted' : 'solid'),
+                    Color: isConflict ? '#f43f5e' : undefined,
+                    Animated: isConflict,
+                });
+            }
+            selected.ConceptCount = concepts.length;
+            selected.ConflictCount = conflictCount;
+            this.rawNodes = nodes;
+            this.rawEdges = graphEdges;
+            this.applyOverlayFilters();
+            this.rebuildConceptTypeCounts();
+        }
+        catch (err) {
+            console.error('[SemanticGraphExplorer] Error loading graph data:', err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ================================================================
+    // Private Helpers & Sample Canon Graph
+    // ================================================================
+    applyOverlayFilters() {
+        const filteredNodes = this.rawNodes.filter(n => {
+            if (!this.ShowGroundedPrimitives && n.Category === 'grounding') {
+                return false;
+            }
+            if (!this.ShowSourceChunks && n.Category === 'chunk') {
+                return false;
+            }
+            return true;
+        });
+        const visibleNodeIds = new Set(filteredNodes.map(n => NormalizeUUID(n.ID)));
+        const filteredEdges = this.rawEdges.filter(e => {
+            if (!visibleNodeIds.has(NormalizeUUID(e.SourceID)) || !visibleNodeIds.has(NormalizeUUID(e.TargetID))) {
+                return false;
+            }
+            if (!this.HighlightConflicts && e.Label.toLowerCase().includes('contradict')) {
+                return false;
+            }
+            return true;
+        });
+        this.Nodes = filteredNodes;
+        this.Edges = filteredEdges;
+    }
+    rebuildConceptTypeCounts() {
+        const counts = new Map();
+        for (const n of this.rawNodes) {
+            const key = String(n.Category || '').toLowerCase();
+            counts.set(key, (counts.get(key) ?? 0) + 1);
+        }
+        this.ConceptTypeOptions = this.ConceptTypeOptions.map(opt => ({
+            ...opt,
+            Count: counts.get(opt.Name.toLowerCase()) ?? 0,
+        }));
+    }
+    createSyntheticEndpointNode(entityName, recordId, edgeLabel) {
+        const isChunk = entityName.toLowerCase().includes('chunk') || edgeLabel === 'SourcedFrom';
+        return {
+            ID: recordId,
+            Label: isChunk ? `Chunk ${recordId.slice(0, 6)}` : `${entityName.replace(/^MJ:\s*/, '')}`,
+            Sublabel: entityName,
+            Category: isChunk ? 'chunk' : 'grounding',
+            Badge: isChunk ? '§' : '⚡',
+            Radius: 20,
+            Status: 'Approved',
+            Data: {
+                EntityName: entityName,
+                RecordID: recordId,
+            },
+        };
+    }
+    OpenGroundingRecord(grounding) {
+        if (grounding.TargetEntityName && grounding.TargetRecordID && !grounding.TargetRecordID.startsWith('sample-')) {
+            this.OpenRecordRequested.emit({
+                EntityName: grounding.TargetEntityName,
+                RecordID: grounding.TargetRecordID,
+            });
+        }
+    }
+    isValidUUID(id) {
+        return /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(id.trim());
+    }
+    resolveConceptTypeColor(name) {
+        return CONCEPT_TYPE_COLORS[name.trim().toLowerCase()] ?? '#38bdf8';
+    }
+    buildDefaultConceptTypeOptions() {
+        return [
+            { ID: 'ct-policy', Name: 'Policy', Rank: 10, IconClass: 'fa-solid fa-gavel', Color: '#f43f5e', Count: 0 },
+            { ID: 'ct-metric', Name: 'Metric', Rank: 20, IconClass: 'fa-solid fa-chart-line', Color: '#10b981', Count: 0 },
+            { ID: 'ct-process', Name: 'Process', Rank: 30, IconClass: 'fa-solid fa-gears', Color: '#8b5cf6', Count: 0 },
+            { ID: 'ct-role', Name: 'Role', Rank: 40, IconClass: 'fa-solid fa-user-shield', Color: '#f59e0b', Count: 0 },
+            { ID: 'ct-domain', Name: 'Domain', Rank: 50, IconClass: 'fa-solid fa-layer-group', Color: '#3b82f6', Count: 0 },
+            { ID: 'ct-term', Name: 'Term', Rank: 60, IconClass: 'fa-solid fa-book-bookmark', Color: '#06b6d4', Count: 0 },
+        ];
+    }
+    buildSampleGraphOption() {
+        return {
+            ID: SAMPLE_GRAPH_ID,
+            Name: 'Association Governance Canon',
+            Description: 'Multi-source Canon graph illustrating ranked Concept Types, AuthorityTier precedence, grounded ABVs/Queries, and Contradicts conflict detection.',
+            GraphTypeID: 'A4B9E210-1001-4C81-9A01-000000000001',
+            GraphTypeName: 'Canon',
+            IsCanon: true,
+            GraphTypeRank: 10,
+            IconClass: 'fa-solid fa-scale-balanced',
+            ConceptCount: 5,
+            ConflictCount: 1,
+            SourceNames: ['Association Bylaws (PDF)', 'Finance & Dues SOPs', 'Staff Desk Manual'],
+            IsSample: true,
+        };
+    }
+    loadSampleCanonGraphNodesAndEdges() {
+        const ID_DOMAIN_GOV = 'C3000000-0000-4000-8000-000000000001';
+        const ID_POLICY_GRACE = 'C3000000-0000-4000-8000-000000000002';
+        const ID_METRIC_NRR = 'C3000000-0000-4000-8000-000000000003';
+        const ID_PROCESS_RENEWAL = 'C3000000-0000-4000-8000-000000000004';
+        const ID_ROLE_STEWARD = 'C3000000-0000-4000-8000-000000000005';
+        const ID_CHUNK_BYLAWS = 'C3000000-0000-4000-8000-000000000006';
+        const ID_CHUNK_MANUAL = 'C3000000-0000-4000-8000-000000000007';
+        const ID_ABV_GRACE = 'B4000000-0000-4000-8000-000000000001';
+        const ID_ABV_ACTIVE = 'B4000000-0000-4000-8000-000000000002';
+        const ID_QUERY_RETENTION = 'B4000000-0000-4000-8000-000000000003';
+        const conflictDetail = {
+            HigherAuthoritySummary: 'Association Bylaws (Article IV §4.2) — "60 days"',
+            ConflictingSummary: 'Staff Desk Manual (Ch. 3 p. 42) — "90 days"',
+            ResolutionNote: 'Resolved in favor of Bylaws (Rank 100 > DeptPractice 40); Contradicts edge flagged for steward review.',
+        };
+        const sampleChunks = [
+            {
+                ChunkID: ID_CHUNK_BYLAWS,
+                SourceName: 'Association Bylaws PDF',
+                Locator: 'Article IV > §4.2',
+                AuthorityTier: 'Bylaws (100)',
+                Snippet: 'A member whose dues remain unpaid 60 days after the renewal date shall be suspended.',
+            },
+            {
+                ChunkID: ID_CHUNK_MANUAL,
+                SourceName: 'Staff Desk Manual',
+                Locator: 'Chapter 3 > Grace Handling',
+                AuthorityTier: 'DeptPractice (40)',
+                Snippet: 'Customer service reps wait 90 days before deactivating member portal access.',
+            },
+        ];
+        const sampleGroundingsGrace = [
+            {
+                EdgeLabel: 'Defines',
+                TargetEntityName: 'MJ: Entity Alternate Base Views',
+                TargetRecordID: ID_ABV_GRACE,
+                TargetDisplayName: 'MembersInGracePeriod (vwUsers)',
+            },
+        ];
+        const sampleGroundingsMetric = [
+            {
+                EdgeLabel: 'Measures',
+                TargetEntityName: 'MJ: Queries',
+                TargetRecordID: ID_QUERY_RETENTION,
+                TargetDisplayName: 'Golden Query: Annual Cohort Retention',
+            },
+            {
+                EdgeLabel: 'Defines',
+                TargetEntityName: 'MJ: Entity Alternate Base Views',
+                TargetRecordID: ID_ABV_ACTIVE,
+                TargetDisplayName: 'Active Subscribers (vwUsers)',
+            },
+        ];
+        this.rawNodes = [
+            {
+                ID: ID_DOMAIN_GOV,
+                Label: 'Membership Governance',
+                Sublabel: 'Domain · Bylaws',
+                Category: 'Domain',
+                Rank: 50,
+                Badge: '#50',
+                Status: 'Approved',
+                AuthorityTier: 'Bylaws (100)',
+                Description: 'Umbrella governance domain for member standing, eligibility, dues billing, and suspension rules.',
+                Specification: '### Scope\nCovers all active membership classes, renewal cycles, and standing transitions across national and chapter tiers.',
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_DOMAIN_GOV },
+            },
+            {
+                ID: ID_POLICY_GRACE,
+                Label: 'Renewal Grace Period',
+                Sublabel: 'Policy · Bylaws',
+                Category: 'Policy',
+                Rank: 10,
+                Badge: '#10',
+                ParentID: ID_DOMAIN_GOV,
+                Status: 'Proposed',
+                AuthorityTier: 'Bylaws (100)',
+                Description: 'Members have 60 calendar days after invoice due date before benefits are suspended.',
+                Specification: '### Canonical Rule (Bylaws Precedence)\n- Grace Window: Strictly 60 calendar days past invoice due date.\n- Late Notice: Triggered at day 30 and day 45.\n- Overrides the 90-day informal practice in the Staff Desk Manual.',
+                Conflicts: [conflictDetail],
+                Groundings: sampleGroundingsGrace,
+                ProvenanceChunks: sampleChunks,
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_POLICY_GRACE },
+            },
+            {
+                ID: ID_METRIC_NRR,
+                Label: 'Net Member Retention Rate',
+                Sublabel: 'Metric · ExecutiveSOP',
+                Category: 'Metric',
+                Rank: 20,
+                Badge: '#20',
+                ParentID: ID_DOMAIN_GOV,
+                Status: 'Approved',
+                AuthorityTier: 'ExecutiveSOP (60)',
+                Description: 'Percentage of active cohort members renewing within the 60-day grace window.',
+                Specification: '### Formula\nRenewedActiveMembers / PriorPeriodActiveSubscribers * 100',
+                Groundings: sampleGroundingsMetric,
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_METRIC_NRR },
+            },
+            {
+                ID: ID_PROCESS_RENEWAL,
+                Label: 'Dues Renewal & Escalation',
+                Sublabel: 'Process · ExecutiveSOP',
+                Category: 'Process',
+                Rank: 30,
+                Badge: '#30',
+                ParentID: ID_DOMAIN_GOV,
+                Status: 'Proposed',
+                AuthorityTier: 'ExecutiveSOP (60)',
+                Description: 'End-to-end invoice dispatch, D&B credit check, 60-day grace monitoring, and suspension workflow.',
+                Specification: '### Steps\n1. Dispatch invoice 30 days prior to expiration.\n2. Run credit risk check for enterprise tiers.\n3. Enforce 60-day Renewal Grace Period.',
+                Groundings: [
+                    {
+                        EdgeLabel: 'Defines',
+                        TargetEntityName: 'MJ: Entity Alternate Base Views',
+                        TargetRecordID: ID_ABV_GRACE,
+                        TargetDisplayName: 'MembersInGracePeriod (vwUsers)',
+                    },
+                ],
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_PROCESS_RENEWAL },
+            },
+            {
+                ID: ID_ROLE_STEWARD,
+                Label: 'Finance Policy Steward',
+                Sublabel: 'Role · Bylaws',
+                Category: 'Role',
+                Rank: 40,
+                Badge: '#40',
+                ParentID: ID_DOMAIN_GOV,
+                Status: 'Approved',
+                AuthorityTier: 'Bylaws (100)',
+                Description: 'Designated officer authorized to approve grace waivers and canon policy updates.',
+                Specification: '### Authority\nApproves Proposed GraphConcepts in the Association Core Canon and resolves Contradicts edges.',
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_ROLE_STEWARD },
+            },
+            {
+                ID: ID_ABV_ACTIVE,
+                Label: 'ABV: Active Subscribers',
+                Sublabel: 'MJ: Entity Alternate Base Views',
+                Category: 'grounding',
+                Badge: '⚡',
+                Radius: 21,
+                Status: 'Approved',
+                AuthorityTier: 'Schema Grounded',
+                Description: 'Governed SQL cohort view filtering active paid members.',
+                Specification: "WHERE Status = 'Active' AND PaidThroughDate >= GETUTCDATE()",
+                Data: { EntityName: 'MJ: Entity Alternate Base Views', RecordID: ID_ABV_ACTIVE },
+            },
+            {
+                ID: ID_QUERY_RETENTION,
+                Label: 'Query: Cohort Retention',
+                Sublabel: 'MJ: Queries',
+                Category: 'grounding',
+                Badge: '⚡',
+                Radius: 21,
+                Status: 'Approved',
+                AuthorityTier: 'Schema Grounded',
+                Description: 'Verified Golden Query computing trailing 12-month cohort retention.',
+                Data: { EntityName: 'MJ: Queries', RecordID: ID_QUERY_RETENTION },
+            },
+            {
+                ID: ID_CHUNK_BYLAWS,
+                Label: 'Bylaws §4.2 ("60 days")',
+                Sublabel: 'Association Bylaws PDF',
+                Category: 'chunk',
+                Badge: '§',
+                Radius: 20,
+                Status: 'Approved',
+                AuthorityTier: 'Bylaws (100)',
+                Description: 'Authoritative chunk from Association Bylaws Article IV §4.2.',
+                Specification: '"A member whose dues remain unpaid 60 days after the renewal date shall be suspended from good standing."',
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_CHUNK_BYLAWS },
+            },
+            {
+                ID: ID_CHUNK_MANUAL,
+                Label: 'Desk Manual p.42 ("90 days")',
+                Sublabel: 'Staff Desk Manual',
+                Category: 'chunk',
+                Badge: '§',
+                Radius: 20,
+                Status: 'Proposed',
+                AuthorityTier: 'DeptPractice (40)',
+                Description: 'Conflicting lower-authority chunk from Staff Desk Manual Ch. 3.',
+                Specification: '"Customer service reps wait 90 days before deactivating member portal access."',
+                Conflicts: [conflictDetail],
+                Data: { EntityName: 'MJ: Graph Concepts', RecordID: ID_CHUNK_MANUAL },
+            },
+        ];
+        this.rawEdges = [
+            { ID: 'e-1', SourceID: ID_DOMAIN_GOV, TargetID: ID_POLICY_GRACE, Label: 'Broader Than', Direction: 'directed' },
+            { ID: 'e-2', SourceID: ID_DOMAIN_GOV, TargetID: ID_METRIC_NRR, Label: 'Broader Than', Direction: 'directed' },
+            { ID: 'e-3', SourceID: ID_DOMAIN_GOV, TargetID: ID_PROCESS_RENEWAL, Label: 'Broader Than', Direction: 'directed' },
+            { ID: 'e-4', SourceID: ID_ROLE_STEWARD, TargetID: ID_POLICY_GRACE, Label: 'Governs', Direction: 'directed' },
+            { ID: 'e-5', SourceID: ID_METRIC_NRR, TargetID: ID_ABV_ACTIVE, Label: 'Defines', Direction: 'directed' },
+            { ID: 'e-6', SourceID: ID_METRIC_NRR, TargetID: ID_QUERY_RETENTION, Label: 'Measures', Direction: 'directed' },
+            { ID: 'e-7', SourceID: ID_POLICY_GRACE, TargetID: ID_CHUNK_BYLAWS, Label: 'SourcedFrom', Direction: 'directed', Style: 'dotted' },
+            { ID: 'e-8', SourceID: ID_POLICY_GRACE, TargetID: ID_CHUNK_MANUAL, Label: 'SourcedFrom', Direction: 'directed', Style: 'dotted' },
+            {
+                ID: 'e-conflict-1',
+                SourceID: ID_CHUNK_BYLAWS,
+                TargetID: ID_CHUNK_MANUAL,
+                Label: 'Contradicts (60d vs 90d)',
+                Direction: 'directed',
+                Style: 'dashed',
+                Color: '#f43f5e',
+                Animated: true,
+                Weight: 2.5,
+            },
+        ];
+        this.SelectedNodeId = ID_POLICY_GRACE;
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵSemanticGraphExplorerComponent_BaseFactory; return function SemanticGraphExplorerComponent_Factory(__ngFactoryType__) { return (ɵSemanticGraphExplorerComponent_BaseFactory || (ɵSemanticGraphExplorerComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SemanticGraphExplorerComponent)))(__ngFactoryType__ || SemanticGraphExplorerComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SemanticGraphExplorerComponent, selectors: [["app-kh-semantic-graph"]], inputs: { Provider: "Provider" }, outputs: { OpenRecordRequested: "OpenRecordRequested", ConceptSelected: "ConceptSelected" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 10, consts: [["canonInspectorTemplate", ""], [1, "semantic-graph-studio"], [1, "semantic-graph-rail"], [1, "rail-scroll"], [1, "rail-section"], [1, "rail-section-header"], [1, "rail-section-title"], ["type", "button", "title", "Filter to Graph Types with IsCanon = true", 1, "canon-filter-toggle", 3, "click"], [1, "fa-solid", "fa-star"], [1, "graph-list"], ["type", "button", 1, "graph-card", 3, "selected"], ["type", "button", 1, "rail-reset-btn"], [1, "concept-type-list"], ["type", "button", 1, "concept-type-pill", 3, "active", "dimmed"], [1, "overlay-toggle-list"], [1, "overlay-toggle-row"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "overlay-toggle-row", "conflict-toggle"], [1, "semantic-graph-canvas"], ["role", "alert", 1, "semantic-graph-alert"], [1, "semantic-graph-empty-banner"], [1, "semantic-graph-loading"], [3, "Title", "Nodes", "Edges", "Categories", "LayoutMode", "SelectedNodeId", "ActiveCategoryFilter", "AutoOpenInspector", "ShowToolbar", "ShowLegend", "ShowInspector", "InspectorCustomTemplate", "Searchable"], ["type", "button", 1, "graph-card", 3, "click"], [1, "graph-card-top"], [1, "graph-card-name"], [1, "graph-card-icon"], [1, "graph-type-badge"], [1, "graph-card-meta"], [1, "conflict-pill"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "button", 1, "rail-reset-btn", 3, "click"], ["type", "button", 1, "concept-type-pill", 3, "click"], [1, "concept-type-left"], [1, "concept-type-dot"], [1, "concept-type-icon"], [1, "concept-type-name"], [1, "concept-type-right"], [1, "connected-source-list"], [1, "connected-source-row"], [1, "fa-solid", "fa-database"], ["type", "button", 1, "sample-preview-btn", 3, "click"], ["text", "Loading Semantic Graph & Canon concepts..."], [3, "NodeSelected", "NodeNavigated", "NodeAction", "CategoryFilterChanged", "Title", "Nodes", "Edges", "Categories", "LayoutMode", "SelectedNodeId", "ActiveCategoryFilter", "AutoOpenInspector", "ShowToolbar", "ShowLegend", "ShowInspector", "InspectorCustomTemplate", "Searchable"], [1, "canon-inspector-section"], [1, "canon-conflict-box"], [1, "canon-inspector-section-label"], [1, "canon-inspector-spec"], [1, "canon-conflict-title"], [1, "canon-conflict-details"], [1, "canon-conflict-note"], [1, "canon-grounding-list"], ["type", "button", 1, "canon-grounding-item"], ["type", "button", 1, "canon-grounding-item", 3, "click"], [1, "canon-grounding-edge"], [1, "canon-grounding-target"], [1, "fa-solid", "fa-arrow-up-right-from-square", "canon-grounding-icon"], [1, "canon-chunk-list"], [1, "canon-chunk-card"], [1, "canon-chunk-header"], [1, "canon-chunk-tier"], [1, "canon-chunk-snippet"]], template: function SemanticGraphExplorerComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "aside", 2)(2, "div", 3)(3, "section", 4)(4, "div", 5)(5, "span", 6);
+            i0.ɵɵtext(6, "MJ: Graphs");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "button", 7);
+            i0.ɵɵlistener("click", function SemanticGraphExplorerComponent_Template_button_click_7_listener() { return ctx.ToggleCanonFilter(); });
+            i0.ɵɵelement(8, "i", 8);
+            i0.ɵɵtext(9, " Canon Only ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(10, "div", 9);
+            i0.ɵɵrepeaterCreate(11, SemanticGraphExplorerComponent_For_12_Template, 12, 12, "button", 10, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "section", 4)(14, "div", 5)(15, "span", 6);
+            i0.ɵɵtext(16, "Concept Types (By Rank)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(17, SemanticGraphExplorerComponent_Conditional_17_Template, 2, 0, "button", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 12);
+            i0.ɵɵrepeaterCreate(19, SemanticGraphExplorerComponent_For_20_Template, 10, 11, "button", 13, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(21, "section", 4)(22, "span", 6);
+            i0.ɵɵtext(23, "Graph Overlays");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "div", 14)(25, "label", 15)(26, "span");
+            i0.ɵɵtext(27, "Grounded MJ Primitives");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "input", 16);
+            i0.ɵɵtwoWayListener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.ShowGroundedPrimitives, $event) || (ctx.ShowGroundedPrimitives = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_28_listener() { return ctx.OnOverlayToggleChanged(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(29, "label", 15)(30, "span");
+            i0.ɵɵtext(31, "Source Chunks (SourcedFrom)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "input", 16);
+            i0.ɵɵtwoWayListener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.ShowSourceChunks, $event) || (ctx.ShowSourceChunks = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_32_listener() { return ctx.OnOverlayToggleChanged(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(33, "label", 17)(34, "span");
+            i0.ɵɵtext(35, "Highlight Contradicts Edges");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "input", 16);
+            i0.ɵɵtwoWayListener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_36_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.HighlightConflicts, $event) || (ctx.HighlightConflicts = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function SemanticGraphExplorerComponent_Template_input_ngModelChange_36_listener() { return ctx.OnOverlayToggleChanged(); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(37, SemanticGraphExplorerComponent_Conditional_37_Template, 6, 0, "section", 4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(38, "main", 18);
+            i0.ɵɵconditionalCreate(39, SemanticGraphExplorerComponent_Conditional_39_Template, 4, 1, "div", 19);
+            i0.ɵɵconditionalCreate(40, SemanticGraphExplorerComponent_Conditional_40_Template, 5, 0, "div", 20);
+            i0.ɵɵconditionalCreate(41, SemanticGraphExplorerComponent_Conditional_41_Template, 2, 0, "div", 21)(42, SemanticGraphExplorerComponent_Conditional_42_Template, 1, 13, "mj-graph-view", 22);
+            i0.ɵɵtemplate(43, SemanticGraphExplorerComponent_ng_template_43_Template, 4, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵclassProp("active", ctx.OnlyCanonGraphs);
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.VisibleGraphOptions);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.ActiveConceptTypeFilter ? 17 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.ConceptTypeOptions);
+            i0.ɵɵadvance(9);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.ShowGroundedPrimitives);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.ShowSourceChunks);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.HighlightConflicts);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SelectedGraph && ctx.SelectedGraph.SourceNames.length > 0 ? 37 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.LoadError || ctx.ActionError ? 39 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.Nodes.length === 0 ? 40 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.IsLoading ? 41 : 42);
+        } }, dependencies: [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.GraphViewComponent], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.semantic-graph-studio[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  gap: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.semantic-graph-rail[_ngcontent-%COMP%] {\n  width: 290px;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface, #111a2e);\n  border: 1px solid var(--mj-border-default, #223254);\n  border-radius: var(--mj-radius-lg, 12px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.rail-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.rail-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rail-section[_ngcontent-%COMP%]    + .rail-section[_ngcontent-%COMP%] {\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default, #223254);\n}\n\n.rail-section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.rail-section-title[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-text-muted, #64748b);\n}\n\n.canon-filter-toggle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.15s ease;\n}\n\n.canon-filter-toggle.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-warning);\n}\n\n.rail-reset-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary, #38bdf8);\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.graph-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.graph-card[_ngcontent-%COMP%] {\n  width: 100%;\n  text-align: left;\n  padding: 9px 10px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  color: var(--mj-text-primary, #f8fafc);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.graph-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.graph-card.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary, #38bdf8);\n  background: var(--mj-bg-surface-elevated, #1a2744);\n}\n\n.graph-card-top[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.graph-card-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.graph-card-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary, #38bdf8);\n  font-size: 11px;\n}\n\n.graph-type-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.graph-type-badge.is-canon[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.graph-card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.conflict-pill[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.concept-type-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.concept-type-pill[_ngcontent-%COMP%] {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 9px;\n  border-radius: 7px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  color: var(--mj-text-primary, #f8fafc);\n  font-size: 11.5px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.concept-type-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.concept-type-pill.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary, #38bdf8);\n  background: var(--mj-bg-surface-elevated, #1a2744);\n}\n\n.concept-type-pill.dimmed[_ngcontent-%COMP%] {\n  opacity: 0.45;\n}\n\n.concept-type-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: 600;\n}\n\n.concept-type-dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.concept-type-icon[_ngcontent-%COMP%] {\n  font-size: 11px;\n  opacity: 0.85;\n}\n\n.concept-type-right[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.overlay-toggle-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.overlay-toggle-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 11.5px;\n  color: var(--mj-text-secondary, #94a3b8);\n  cursor: pointer;\n}\n\n.overlay-toggle-row.conflict-toggle[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-weight: 600;\n}\n\n.semantic-graph-alert[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 64px;\n  left: 14px;\n  z-index: 30;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  color: var(--mj-status-error);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.semantic-graph-empty-banner[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 64px;\n  left: 14px;\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 11.5px;\n}\n\n.sample-preview-btn[_ngcontent-%COMP%] {\n  padding: 4px 10px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.connected-source-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.connected-source-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.semantic-graph-canvas[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  position: relative;\n}\n\n.semantic-graph-loading[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface, #111a2e);\n  border: 1px solid var(--mj-border-default, #223254);\n  border-radius: var(--mj-radius-lg, 12px);\n}\n\n.canon-inspector-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n}\n\n.canon-inspector-section-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-text-muted);\n  margin-bottom: 6px;\n  display: block;\n}\n\n.canon-inspector-spec[_ngcontent-%COMP%] {\n  margin: 0;\n  white-space: pre-wrap;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.45;\n  color: var(--mj-text-primary);\n}\n\n.canon-conflict-box[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n}\n\n.canon-conflict-title[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-status-error);\n  margin-bottom: 6px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.canon-conflict-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n}\n\n.canon-conflict-note[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.canon-grounding-list[_ngcontent-%COMP%], \n.canon-chunk-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.canon-grounding-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n  width: 100%;\n  text-align: left;\n  color: var(--mj-text-primary);\n  font-size: 11px;\n}\n\n.canon-grounding-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-status-success);\n}\n\n.canon-grounding-edge[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  font-weight: 700;\n}\n\n.canon-grounding-target[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n}\n\n.canon-grounding-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.canon-chunk-card[_ngcontent-%COMP%] {\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  font-size: 11px;\n}\n\n.canon-chunk-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-weight: 600;\n  margin-bottom: 3px;\n}\n\n.canon-chunk-tier[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.canon-chunk-snippet[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SemanticGraphExplorerComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-kh-semantic-graph', template: "<div class=\"semantic-graph-studio\">\n  <!-- Left Rail: MJ: Graphs Selector, Ranked MJ: Graph Concept Types, Overlays & Connected Sources -->\n  <aside class=\"semantic-graph-rail\">\n    <div class=\"rail-scroll\">\n      <!-- 1. MJ: Graphs Partition Selector -->\n      <section class=\"rail-section\">\n        <div class=\"rail-section-header\">\n          <span class=\"rail-section-title\">MJ: Graphs</span>\n          <button\n            type=\"button\"\n            class=\"canon-filter-toggle\"\n            [class.active]=\"OnlyCanonGraphs\"\n            (click)=\"ToggleCanonFilter()\"\n            title=\"Filter to Graph Types with IsCanon = true\">\n            <i class=\"fa-solid fa-star\"></i>\n            Canon Only\n          </button>\n        </div>\n\n        <div class=\"graph-list\">\n          @for (g of VisibleGraphOptions; track g.ID) {\n            <button\n              type=\"button\"\n              class=\"graph-card\"\n              [class.selected]=\"SelectedGraph?.ID === g.ID\"\n              (click)=\"SelectGraph(g.ID)\">\n              <div class=\"graph-card-top\">\n                <span class=\"graph-card-name\">\n                  <i [class]=\"g.IconClass\" class=\"graph-card-icon\"></i>\n                  {{ g.Name }}\n                </span>\n                <span class=\"graph-type-badge\" [class.is-canon]=\"g.IsCanon\">\n                  @if (g.IsCanon) { \u2605 } {{ g.GraphTypeName }} \u00B7 #{{ g.GraphTypeRank }}\n                </span>\n              </div>\n              <div class=\"graph-card-meta\">\n                <span>{{ g.ConceptCount }} concepts</span>\n                @if (g.ConflictCount > 0) {\n                  <span class=\"conflict-pill\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    {{ g.ConflictCount }} {{ g.ConflictCount === 1 ? 'conflict' : 'conflicts' }}\n                  </span>\n                }\n              </div>\n            </button>\n          }\n        </div>\n      </section>\n\n      <!-- 2. Ranked MJ: Graph Concept Types Filter -->\n      <section class=\"rail-section\">\n        <div class=\"rail-section-header\">\n          <span class=\"rail-section-title\">Concept Types (By Rank)</span>\n          @if (ActiveConceptTypeFilter) {\n            <button type=\"button\" class=\"rail-reset-btn\" (click)=\"ToggleConceptTypeFilter(null)\">\n              All\n            </button>\n          }\n        </div>\n\n        <div class=\"concept-type-list\">\n          @for (ct of ConceptTypeOptions; track ct.ID) {\n            <button\n              type=\"button\"\n              class=\"concept-type-pill\"\n              [class.active]=\"ActiveConceptTypeFilter?.toLowerCase() === ct.Name.toLowerCase()\"\n              [class.dimmed]=\"ActiveConceptTypeFilter && ActiveConceptTypeFilter.toLowerCase() !== ct.Name.toLowerCase()\"\n              (click)=\"ToggleConceptTypeFilter(ct.Name)\">\n              <span class=\"concept-type-left\">\n                <span class=\"concept-type-dot\" [style.background]=\"ct.Color\"></span>\n                <i [class]=\"ct.IconClass\" class=\"concept-type-icon\"></i>\n                <span class=\"concept-type-name\">{{ ct.Name }}</span>\n              </span>\n              <span class=\"concept-type-right\">\n                Rank #{{ ct.Rank }} \u00B7 <strong>{{ ct.Count }}</strong>\n              </span>\n            </button>\n          }\n        </div>\n      </section>\n\n      <!-- 3. Edge & Node Overlay Toggles -->\n      <section class=\"rail-section\">\n        <span class=\"rail-section-title\">Graph Overlays</span>\n        <div class=\"overlay-toggle-list\">\n          <label class=\"overlay-toggle-row\">\n            <span>Grounded MJ Primitives</span>\n            <input\n              type=\"checkbox\"\n              [(ngModel)]=\"ShowGroundedPrimitives\"\n              (ngModelChange)=\"OnOverlayToggleChanged()\" />\n          </label>\n          <label class=\"overlay-toggle-row\">\n            <span>Source Chunks (SourcedFrom)</span>\n            <input\n              type=\"checkbox\"\n              [(ngModel)]=\"ShowSourceChunks\"\n              (ngModelChange)=\"OnOverlayToggleChanged()\" />\n          </label>\n          <label class=\"overlay-toggle-row conflict-toggle\">\n            <span>Highlight Contradicts Edges</span>\n            <input\n              type=\"checkbox\"\n              [(ngModel)]=\"HighlightConflicts\"\n              (ngModelChange)=\"OnOverlayToggleChanged()\" />\n          </label>\n        </div>\n      </section>\n\n      <!-- 4. Connected Content Sources -->\n      @if (SelectedGraph && SelectedGraph.SourceNames.length > 0) {\n        <section class=\"rail-section\">\n          <span class=\"rail-section-title\">Connected Content Sources</span>\n          <div class=\"connected-source-list\">\n            @for (srcName of SelectedGraph.SourceNames; track srcName) {\n              <div class=\"connected-source-row\">\n                <i class=\"fa-solid fa-database\"></i>\n                <span>{{ srcName }}</span>\n              </div>\n            }\n          </div>\n        </section>\n      }\n    </div>\n  </aside>\n\n  <!-- Main Canvas: <mj-graph-view> with Force/Hierarchy/Circular Layouts & Projected Canon Inspector -->\n  <main class=\"semantic-graph-canvas\">\n    @if (LoadError || ActionError) {\n      <div class=\"semantic-graph-alert\" role=\"alert\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <span>{{ LoadError || ActionError }}</span>\n      </div>\n    }\n\n    @if (!IsLoading && Nodes.length === 0) {\n      <div class=\"semantic-graph-empty-banner\">\n        <span>No concepts or edges in this graph yet.</span>\n        <button type=\"button\" class=\"sample-preview-btn\" (click)=\"LoadSampleGraphPreview()\">\n          Load Example Canon Graph\n        </button>\n      </div>\n    }\n\n    @if (IsLoading) {\n      <div class=\"semantic-graph-loading\">\n        <mj-loading text=\"Loading Semantic Graph &amp; Canon concepts...\"></mj-loading>\n      </div>\n    } @else {\n      <mj-graph-view\n        [Title]=\"SelectedGraph?.Name || 'Semantic Graph'\"\n        [Nodes]=\"Nodes\"\n        [Edges]=\"Edges\"\n        [Categories]=\"Categories\"\n        [LayoutMode]=\"LayoutMode\"\n        [SelectedNodeId]=\"SelectedNodeId\"\n        [ActiveCategoryFilter]=\"ActiveConceptTypeFilter\"\n        [AutoOpenInspector]=\"true\"\n        [ShowToolbar]=\"true\"\n        [ShowLegend]=\"true\"\n        [ShowInspector]=\"true\"\n        [InspectorCustomTemplate]=\"canonInspectorTemplate\"\n        [Searchable]=\"true\"\n        (NodeSelected)=\"OnNodeSelected($event)\"\n        (NodeNavigated)=\"OnNodeNavigated($event)\"\n        (NodeAction)=\"OnNodeAction($event)\"\n        (CategoryFilterChanged)=\"OnCategoryFilterChangedFromCanvas($event)\">\n      </mj-graph-view>\n    }\n\n    <ng-template #canonInspectorTemplate let-node>\n      @if (node.Specification) {\n        <div class=\"canon-inspector-section\">\n          <span class=\"canon-inspector-section-label\">Specification</span>\n          <pre class=\"canon-inspector-spec\">{{ node.Specification }}</pre>\n        </div>\n      }\n\n      @if (node.Conflicts && node.Conflicts.length > 0) {\n        <div class=\"canon-conflict-box\">\n          <div class=\"canon-conflict-title\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            Authority Conflict (Contradicts Edge)\n          </div>\n          @for (conflict of node.Conflicts; track conflict.HigherAuthoritySummary) {\n            <div class=\"canon-conflict-details\">\n              <div><strong>Higher Tier:</strong> {{ conflict.HigherAuthoritySummary }}</div>\n              <div><strong>Conflicting:</strong> {{ conflict.ConflictingSummary }}</div>\n              @if (conflict.ResolutionNote) {\n                <div class=\"canon-conflict-note\">{{ conflict.ResolutionNote }}</div>\n              }\n            </div>\n          }\n        </div>\n      }\n\n      @if (node.Groundings && node.Groundings.length > 0) {\n        <div class=\"canon-inspector-section\">\n          <span class=\"canon-inspector-section-label\">Grounded MJ Primitives ({{ node.Groundings.length }})</span>\n          <div class=\"canon-grounding-list\">\n            @for (g of node.Groundings; track g.TargetRecordID + g.EdgeLabel) {\n              <button\n                type=\"button\"\n                class=\"canon-grounding-item\"\n                (click)=\"OpenGroundingRecord(g)\">\n                <span class=\"canon-grounding-edge\">{{ g.EdgeLabel }}</span>\n                <span class=\"canon-grounding-target\">{{ g.TargetDisplayName }}</span>\n                <i class=\"fa-solid fa-arrow-up-right-from-square canon-grounding-icon\"></i>\n              </button>\n            }\n          </div>\n        </div>\n      }\n\n      @if (node.ProvenanceChunks && node.ProvenanceChunks.length > 0) {\n        <div class=\"canon-inspector-section\">\n          <span class=\"canon-inspector-section-label\">SourcedFrom Chunks ({{ node.ProvenanceChunks.length }})</span>\n          <div class=\"canon-chunk-list\">\n            @for (chunk of node.ProvenanceChunks; track chunk.ChunkID) {\n              <div class=\"canon-chunk-card\">\n                <div class=\"canon-chunk-header\">\n                  <span>{{ chunk.SourceName }}{{ chunk.Locator ? ' \u00B7 ' + chunk.Locator : '' }}</span>\n                  @if (chunk.AuthorityTier) {\n                    <span class=\"canon-chunk-tier\">{{ chunk.AuthorityTier }}</span>\n                  }\n                </div>\n                <div class=\"canon-chunk-snippet\">{{ chunk.Snippet }}</div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n  </main>\n</div>\n", styles: [":host {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.semantic-graph-studio {\n  display: flex;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  gap: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken, #0b1220);\n}\n\n.semantic-graph-rail {\n  width: 290px;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface, #111a2e);\n  border: 1px solid var(--mj-border-default, #223254);\n  border-radius: var(--mj-radius-lg, 12px);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.rail-scroll {\n  flex: 1;\n  overflow-y: auto;\n  padding: 14px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.rail-section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rail-section + .rail-section {\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default, #223254);\n}\n\n.rail-section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.rail-section-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-text-muted, #64748b);\n}\n\n.canon-filter-toggle {\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 9999px;\n  border: 1px solid color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n  color: var(--mj-status-warning);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  transition: all 0.15s ease;\n}\n\n.canon-filter-toggle.active {\n  background: var(--mj-status-warning);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-warning);\n}\n\n.rail-reset-btn {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary, #38bdf8);\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.graph-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.graph-card {\n  width: 100%;\n  text-align: left;\n  padding: 9px 10px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  color: var(--mj-text-primary, #f8fafc);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.graph-card:hover {\n  border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.graph-card.selected {\n  border-color: var(--mj-brand-primary, #38bdf8);\n  background: var(--mj-bg-surface-elevated, #1a2744);\n}\n\n.graph-card-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.graph-card-name {\n  font-size: 12px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.graph-card-icon {\n  color: var(--mj-brand-primary, #38bdf8);\n  font-size: 11px;\n}\n\n.graph-type-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--mj-brand-primary);\n  flex-shrink: 0;\n}\n\n.graph-type-badge.is-canon {\n  background: color-mix(in srgb, var(--mj-status-warning) 18%, transparent);\n  color: var(--mj-status-warning);\n}\n\n.graph-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.conflict-pill {\n  color: var(--mj-status-error);\n  font-weight: 600;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.concept-type-list {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.concept-type-pill {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 9px;\n  border-radius: 7px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  color: var(--mj-text-primary, #f8fafc);\n  font-size: 11.5px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.concept-type-pill:hover {\n  border-color: var(--mj-brand-primary, #38bdf8);\n}\n\n.concept-type-pill.active {\n  border-color: var(--mj-brand-primary, #38bdf8);\n  background: var(--mj-bg-surface-elevated, #1a2744);\n}\n\n.concept-type-pill.dimmed {\n  opacity: 0.45;\n}\n\n.concept-type-left {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  font-weight: 600;\n}\n\n.concept-type-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.concept-type-icon {\n  font-size: 11px;\n  opacity: 0.85;\n}\n\n.concept-type-right {\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.overlay-toggle-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.overlay-toggle-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 11.5px;\n  color: var(--mj-text-secondary, #94a3b8);\n  cursor: pointer;\n}\n\n.overlay-toggle-row.conflict-toggle {\n  color: var(--mj-status-error);\n  font-weight: 600;\n}\n\n.semantic-graph-alert {\n  position: absolute;\n  top: 64px;\n  left: 14px;\n  z-index: 30;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  color: var(--mj-status-error);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.semantic-graph-empty-banner {\n  position: absolute;\n  bottom: 64px;\n  left: 14px;\n  z-index: 25;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 11.5px;\n}\n\n.sample-preview-btn {\n  padding: 4px 10px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.connected-source-list {\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n}\n\n.connected-source-row {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken, #090e1a);\n  border: 1px solid var(--mj-border-default, #223254);\n  font-size: 11px;\n  color: var(--mj-text-secondary, #94a3b8);\n}\n\n.semantic-graph-canvas {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  position: relative;\n}\n\n.semantic-graph-loading {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface, #111a2e);\n  border: 1px solid var(--mj-border-default, #223254);\n  border-radius: var(--mj-radius-lg, 12px);\n}\n\n.canon-inspector-section {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n}\n\n.canon-inspector-section-label {\n  font-size: 10px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--mj-text-muted);\n  margin-bottom: 6px;\n  display: block;\n}\n\n.canon-inspector-spec {\n  margin: 0;\n  white-space: pre-wrap;\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 11px;\n  line-height: 1.45;\n  color: var(--mj-text-primary);\n}\n\n.canon-conflict-box {\n  background: color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  border-radius: 8px;\n  padding: 10px 12px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n}\n\n.canon-conflict-title {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-status-error);\n  margin-bottom: 6px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.canon-conflict-details {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  font-size: 11px;\n}\n\n.canon-conflict-note {\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.canon-grounding-list,\n.canon-chunk-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.canon-grounding-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n  width: 100%;\n  text-align: left;\n  color: var(--mj-text-primary);\n  font-size: 11px;\n}\n\n.canon-grounding-item:hover {\n  border-color: var(--mj-status-success);\n}\n\n.canon-grounding-edge {\n  color: var(--mj-status-success);\n  font-weight: 700;\n}\n\n.canon-grounding-target {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: right;\n}\n\n.canon-grounding-icon {\n  font-size: 10px;\n  opacity: 0.7;\n}\n\n.canon-chunk-card {\n  padding: 6px 8px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  font-size: 11px;\n}\n\n.canon-chunk-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-weight: 600;\n  margin-bottom: 3px;\n}\n\n.canon-chunk-tier {\n  color: var(--mj-status-warning);\n  font-size: 10px;\n}\n\n.canon-chunk-snippet {\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n}\n"] }]
+    }], null, { Provider: [{
+            type: Input
+        }], OpenRecordRequested: [{
+            type: Output
+        }], ConceptSelected: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SemanticGraphExplorerComponent, { className: "SemanticGraphExplorerComponent", filePath: "src/KnowledgeHub/components/visualize/semantic-graph/semantic-graph-explorer.component.ts", lineNumber: 118 }); })();
+/** Tree-shaking prevention */
+export function LoadSemanticGraphExplorerComponent() {
+    // Prevents tree-shaking of the component
+}
+//# sourceMappingURL=semantic-graph-explorer.component.js.map