Implemented the transition marker visual refinement.

PlotLine/Views/FloorPlans/Edit.cshtml

@@ -13,6 +13,43 @@
         var details = $"{transition.FromLocationName} -> {transition.ToLocationName}\n{transition.TransitionType}";
         return string.IsNullOrWhiteSpace(transition.DisplayLabel) ? details : $"{details}\n{transition.DisplayLabel}";
     }
+
+    string TransitionMarkerType(string? transitionType)
+    {
+        var normalized = (transitionType ?? string.Empty)
+            .Trim()
+            .Replace(" ", string.Empty, StringComparison.OrdinalIgnoreCase)
+            .Replace("-", string.Empty, StringComparison.OrdinalIgnoreCase)
+            .ToLowerInvariant();
+
+        return normalized switch
+        {
+            "door" => "door",
+            "doubledoor" => "double-door",
+            "window" => "window",
+            "archway" or "opening" => "archway",
+            "secretdoor" => "secret-door",
+            "blockeddoor" => "blocked-door",
+            "exteriordoor" => "exterior-door",
+            "stairs" or "stair" => "stairs",
+            "passage" => "passage",
+            _ => "other"
+        };
+    }
+
+    string TransitionMarkerSvg(string markerType) => markerType switch
+    {
+        "door" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M3 14h5""/><path class=""marker-line"" d=""M10 14h5""/><path class=""marker-arc"" d=""M8 14a6 6 0 0 1 6-6""/></svg>",
+        "double-door" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M2 14h4""/><path class=""marker-line"" d=""M12 14h4""/><path class=""marker-arc"" d=""M6 14a4 4 0 0 1 4-4""/><path class=""marker-arc"" d=""M12 14a4 4 0 0 0-4-4""/></svg>",
+        "window" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-window"" d=""M3 7h12""/><path class=""marker-window"" d=""M3 11h12""/><path class=""marker-line"" d=""M5 9h8""/></svg>",
+        "archway" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M2 14h4""/><path class=""marker-line"" d=""M12 14h4""/><path class=""marker-arc"" d=""M6 14a3 3 0 0 1 6 0""/></svg>",
+        "secret-door" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line marker-dotted"" d=""M3 14h5""/><path class=""marker-line marker-dotted"" d=""M10 14h5""/><path class=""marker-arc marker-dotted"" d=""M8 14a6 6 0 0 1 6-6""/></svg>",
+        "blocked-door" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M3 14h12""/><path class=""marker-blocked"" d=""M6 6l6 6""/><path class=""marker-blocked"" d=""M12 6l-6 6""/></svg>",
+        "exterior-door" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line marker-strong"" d=""M3 14h5""/><path class=""marker-line marker-strong"" d=""M10 14h5""/><path class=""marker-arc marker-strong"" d=""M8 14a6 6 0 0 1 6-6""/></svg>",
+        "stairs" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M4 13h10""/><path class=""marker-line"" d=""M5 10h8""/><path class=""marker-line"" d=""M6 7h6""/><path class=""marker-line"" d=""M7 4h4""/></svg>",
+        "passage" => @"<svg viewBox=""0 0 18 18"" aria-hidden=""true"" focusable=""false""><path class=""marker-line"" d=""M3 7h12""/><path class=""marker-line"" d=""M3 11h12""/><path class=""marker-line"" d=""M11 5l4 4-4 4""/><path class=""marker-line"" d=""M7 5L3 9l4 4""/></svg>",
+        _ => @"<span aria-hidden=""true"">x</span>"
+    };
 }
 
 <nav class="breadcrumb-trail" aria-label="Breadcrumb">
@@ -169,13 +206,15 @@
                                 @foreach (var transition in floorTransitions)
                                 {
                                     var transitionDetails = TransitionDetails(transition);
-                                    <div class="floor-plan-transition-marker"
+                                    var markerType = TransitionMarkerType(transition.TransitionType);
+                                    <div class="floor-plan-transition-marker floor-plan-transition-marker--@markerType"
                                          data-transition-marker="@transition.FloorPlanTransitionID"
                                          data-from-location-id="@transition.FromLocationID"
                                          data-to-location-id="@transition.ToLocationID"
+                                         data-transition-type="@markerType"
                                          title="@transitionDetails"
                                          aria-label="@transitionDetails">
-                                        <span aria-hidden="true">x</span>
+                                        @Html.Raw(TransitionMarkerSvg(markerType))
                                     </div>
                                 }
                             </div>
@@ -1577,6 +1616,8 @@
                     const toCenter = locationCenter(toBlocks);
                     marker.hidden = false;
                     marker.classList.toggle("is-shared-edge", !!sharedEdge);
+                    marker.classList.toggle("is-horizontal", sharedEdge?.orientation === "horizontal");
+                    marker.classList.toggle("is-vertical", sharedEdge?.orientation === "vertical");
                     const pairKey = [marker.dataset.fromLocationId, marker.dataset.toLocationId].sort().join("-");
                     const key = sharedEdge
                         ? `${pairKey}:${sharedEdge.orientation}:${sharedEdge.x}:${sharedEdge.y}:${sharedEdge.start}:${sharedEdge.end}`

PlotLine/wwwroot/css/site.css

@@ -4707,11 +4707,14 @@ body.dragging-location [data-drag-type="location"] {
 
 .floor-plan-transition-marker {
   align-items: center;
+  --transition-marker-ink: #12332c;
+  --transition-marker-window: #246f9f;
+  --transition-marker-blocked: #9b342b;
   background: rgba(255, 250, 242, .98);
   border: 1px solid rgba(47, 111, 99, .55);
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(31, 37, 34, .16);
-  color: #12332c;
+  color: var(--transition-marker-ink);
   display: flex;
   font-size: .72rem;
   font-weight: 900;
@@ -4727,11 +4730,84 @@ body.dragging-location [data-drag-type="location"] {
   z-index: 4;
 }
 
+.floor-plan-transition-marker svg {
+  display: block;
+  height: 18px;
+  overflow: visible;
+  width: 18px;
+}
+
+.floor-plan-transition-marker.is-vertical svg {
+  transform: rotate(90deg);
+}
+
+.floor-plan-transition-marker .marker-line,
+.floor-plan-transition-marker .marker-arc,
+.floor-plan-transition-marker .marker-window,
+.floor-plan-transition-marker .marker-blocked {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.7;
+}
+
+.floor-plan-transition-marker .marker-arc {
+  stroke-width: 1.35;
+}
+
+.floor-plan-transition-marker .marker-window {
+  stroke: var(--transition-marker-window);
+}
+
+.floor-plan-transition-marker .marker-dotted {
+  opacity: .72;
+  stroke-dasharray: 1.4 2;
+}
+
+.floor-plan-transition-marker .marker-blocked {
+  stroke: var(--transition-marker-blocked);
+  stroke-width: 1.8;
+}
+
+.floor-plan-transition-marker .marker-strong {
+  stroke-width: 2;
+}
+
+.floor-plan-transition-marker--window {
+  background: rgba(239, 249, 255, .98);
+  border-color: rgba(36, 111, 159, .48);
+}
+
+.floor-plan-transition-marker--secret-door {
+  background: rgba(255, 250, 242, .88);
+  border-style: dashed;
+}
+
+.floor-plan-transition-marker--blocked-door {
+  background: rgba(255, 244, 241, .98);
+  border-color: rgba(155, 52, 43, .52);
+}
+
+.floor-plan-transition-marker--exterior-door {
+  border-width: 2px;
+}
+
 .floor-plan-transition-marker.is-shared-edge {
   background: rgba(255, 255, 255, .98);
   border-color: rgba(47, 111, 99, .72);
 }
 
+.floor-plan-transition-marker--window.is-shared-edge {
+  background: rgba(239, 249, 255, .98);
+  border-color: rgba(36, 111, 159, .58);
+}
+
+.floor-plan-transition-marker--blocked-door.is-shared-edge {
+  background: rgba(255, 244, 241, .98);
+  border-color: rgba(155, 52, 43, .6);
+}
+
 .floor-plan-block--room {
   background: #d9eee7;
 }
@@ -4992,9 +5068,11 @@ body.dragging-location [data-drag-type="location"] {
 
 [data-bs-theme="dark"] .floor-plan-transition-marker,
 .dark .floor-plan-transition-marker {
+  --transition-marker-ink: #f4eadc;
+  --transition-marker-window: #83c7f2;
+  --transition-marker-blocked: #f08a78;
   background: rgba(42, 35, 30, .98);
   border-color: rgba(212, 154, 98, .6);
-  color: #f4eadc;
 }
 
 [data-bs-theme="dark"] .floor-plan-transition-marker.is-shared-edge,
@@ -5003,6 +5081,22 @@ body.dragging-location [data-drag-type="location"] {
   border-color: rgba(212, 154, 98, .78);
 }
 
+[data-bs-theme="dark"] .floor-plan-transition-marker--window,
+.dark .floor-plan-transition-marker--window,
+[data-bs-theme="dark"] .floor-plan-transition-marker--window.is-shared-edge,
+.dark .floor-plan-transition-marker--window.is-shared-edge {
+  background: rgba(24, 45, 58, .98);
+  border-color: rgba(131, 199, 242, .66);
+}
+
+[data-bs-theme="dark"] .floor-plan-transition-marker--blocked-door,
+.dark .floor-plan-transition-marker--blocked-door,
+[data-bs-theme="dark"] .floor-plan-transition-marker--blocked-door.is-shared-edge,
+.dark .floor-plan-transition-marker--blocked-door.is-shared-edge {
+  background: rgba(58, 33, 28, .98);
+  border-color: rgba(240, 138, 120, .66);
+}
+
 [data-bs-theme="dark"] .floor-plan-transition-item,
 .dark .floor-plan-transition-item {
   border-color: rgba(212, 154, 98, .22);