Fix up line span embeds as a first pass

src/api/local-api.tsx

@@ -217,18 +217,24 @@ export class DatacoreLocalApi {
         path,
         start,
         end,
+        explain,
+        showExplain,
         sourcePath: maybeSourcePath,
     }: {
         path: string;
         sourcePath?: string;
+        explain?: string;
+        showExplain?: boolean;
         start: number;
         end: number;
     }) => {
         // Resolve the path to the correct path if a source path is provided.
         const sourcePath = maybeSourcePath ?? this.path;
         const resolvedPath = hooks.useMemo(() => this.resolvePath(path, sourcePath), [path, sourcePath]);
 
-        return <LineSpanEmbed path={resolvedPath} start={start} end={end} />;
+        return (
+            <LineSpanEmbed path={resolvedPath} start={start} end={end} explain={explain} showExplain={showExplain} />
+        );
     }).bind(this);
 
     /** Renders an obsidian lucide icon. */

src/api/ui/embed.css

@@ -1,5 +1,21 @@
 .datacore-span-embed {
-    margin-top: 4px;
-    margin-bottom: 4px;
-    padding: 8px;
+    position: relative;
+
+    padding: 1px 8px 1px 8px;
+    margin: 4px 0px 4px 0px;
+
+    background-color: var(--color-base-25);
+}
+
+.datacore-embed-source {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+
+    background-color: var(--background-secondary-alt);
+    color: var(--text-faint);
+
+    font-size: var(--font-smallest);
 }

src/api/ui/embed.tsx

@@ -8,7 +8,7 @@ import {
     Markdown,
 } from "../../ui/markdown";
 import { Link } from "expression/link";
-import { lineRange } from "utils/normalizers";
+import { getFileTitle, lineRange } from "utils/normalizers";
 
 import "./embed.css";
 
@@ -78,8 +78,21 @@ export function Embed({
  * - generally, datacore will asynchronously reload these files in the background and fix it's index, but you may have some
  * strange artifacts otherwise.
  */
-export function LineSpanEmbed({ path, start, end }: { path: string; start: number; end: number }) {
+export function LineSpanEmbed({
+    path,
+    start,
+    end,
+    explain,
+    showExplain = true,
+}: {
+    path: string;
+    start: number;
+    end: number;
+    explain?: string;
+    showExplain?: boolean;
+}) {
     const content = useLineSpan(path, start, end);
+    const explainer = explain ?? `${getFileTitle(path)} (${start} - ${end})`;
 
     switch (content.type) {
         case "loading":
@@ -91,6 +104,7 @@ export function LineSpanEmbed({ path, start, end }: { path: string; start: numbe
         case "loaded":
             return (
                 <div className="datacore-span-embed">
+                    {showExplain && <div className="datacore-embed-source">{explainer}</div>}
                     <Markdown content={content.content} inline={false} />
                 </div>
             );