fix(styles): prefix Tailwind utilities with bc: to avoid colliding with other plugins' classes

Breadcrumbs shipped bare Tailwind utility classes (.static, .flex, .grow, etc.)
scoped to the whole Obsidian DOM. Excalidraw's own canvas element carries a
literal class `static` for an unrelated purpose; at equal specificity,
Breadcrumbs' later-loaded stylesheet won and forced the canvas to
position: static, breaking rendering. Prefixing every utility with bc:
(bc:static, bc:flex, ...) removes the whole class of collision.

Refs #761

Author: michaelpporter

src/components/NestedEdgeList.svelte

@@ -71,7 +71,7 @@
 			: `BC-edge BC-edge-implied BC-edge-implied-${render_data.edge_source}`}
 
 		<details class="tree-item" bind:open={opens[i]}>
-			<summary class="tree-item-self is-clickable flex items-center">
+			<summary class="tree-item-self is-clickable bc:flex bc:items-center">
 				{#if children.length || render_data.has_cut_of_children}
 					<div class="tree-item-icon collapse-icon mod-collapsible">
 						<ChevronOpener open={opens[i]} />
@@ -117,7 +117,7 @@
 			{#if render_data.has_cut_of_children && opens[i]}
 				<div class="tree-item-children">
 					<details class="tree-item">
-						<summary class="tree-item-self flex items-center">
+						<summary class="tree-item-self bc:flex bc:items-center">
 							<div class="tree-item-inner">
 								<span>Traversal limit reached...</span>
 							</div>

src/components/ObsidianLink.svelte

@@ -27,7 +27,7 @@
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <span
 	role="link"
-	class="internal-link cursor-pointer {cls}"
+	class="internal-link bc:cursor-pointer {cls}"
 	class:is-unresolved={!resolved}
 	class:BC-active-note={active_file?.path === path}
 	data-href={path}

src/components/codeblocks/CodeblockErrors.svelte

@@ -16,7 +16,7 @@
 </script>
 
 {#if errors.length}
-	<p class="text-warning text-lg font-semibold">
+	<p class="text-warning bc:text-lg bc:font-semibold">
 		Breadcrumbs Codeblock Errors
 	</p>
 

src/components/codeblocks/CodeblockMarkmap.svelte

@@ -269,16 +269,16 @@
 	{/if}
 
 	{#if code}
-		<div class="relative">
-			<div class="absolute top-2 right-2 z-10 flex">
+		<div class="bc:relative">
+			<div class="bc:absolute bc:top-2 bc:right-2 bc:z-10 bc:flex">
 				<CopyToClipboardButton
 					text={code}
 					cls="clickable-icon nav-action-button"
 				/>
 			</div>
 			<div
 				bind:this={toolbar_el}
-				class="absolute bottom-2 right-2 z-10"
+				class="bc:absolute bc:bottom-2 bc:right-2 bc:z-10"
 			></div>
 			<svg
 				bind:this={svg_el}

src/components/codeblocks/CodeblockMermaid.svelte

@@ -162,8 +162,8 @@
 	{/if}
 
 	{#if code}
-		<div class="relative">
-			<div class="absolute top-2 right-2 z-10 flex">
+		<div class="bc:relative">
+			<div class="bc:absolute bc:top-2 bc:right-2 bc:z-10 bc:flex">
 				<CopyToClipboardButton
 					text={code}
 					cls="clickable-icon nav-action-button"

src/components/codeblocks/CodeblockTree.svelte

@@ -115,8 +115,8 @@
 	{/if}
 
 	{#if data && !data.is_empty()}
-		<div class="BC-codeblock-tree-items relative">
-			<div class="absolute top-2 right-2 z-10 flex">
+		<div class="BC-codeblock-tree-items bc:relative">
+			<div class="bc:absolute bc:top-2 bc:right-2 bc:z-10 bc:flex">
 				<CopyToClipboardButton
 					cls="clickable-icon nav-action-button"
 					text={() =>
@@ -136,7 +136,7 @@
 			</div>
 
 			<!-- NOTE: Padded so that the flair doesn't interfere with the floating buttons -->
-			<div class="pr-10">
+			<div class="bc:pr-10">
 				<NestedEdgeList
 					{plugin}
 					{node_stringify_options}

src/components/input/SimpleInput.svelte

@@ -14,7 +14,7 @@
 	let value = $state("");
 </script>
 
-<div class="flex flex-col gap-1">
+<div class="bc:flex bc:flex-col bc:gap-1">
 	{#if label}
 		<label for="input">
 			{label}

src/components/page_views/PrevNextView.svelte

@@ -139,21 +139,21 @@
 	let period_rows = $derived(period_rows_derived());
 </script>
 
-<div class="BC-prev-next-view flex flex-col">
+<div class="BC-prev-next-view bc:flex bc:flex-col">
 	{#if grouped_out_edges?.prev?.length || grouped_out_edges?.next?.length}
-		<div class="BC-prev-next-daily flex">
+		<div class="BC-prev-next-daily bc:flex">
 			<div
-				class="flex w-full flex-col"
+				class="bc:flex bc:w-full bc:flex-col"
 				style="border-radius: var(--radius-m) 0 0 var(--radius-m)"
 			>
 				{#each grouped_out_edges?.prev ?? [] as edge}
 					<div
-						class="BC-next-prev-item flex gap-3 py-1 pl-2 pr-1 text-left"
+						class="BC-next-prev-item bc:flex bc:gap-3 bc:py-1 bc:pl-2 bc:pr-1 bc:text-left"
 					>
-						<span class="BC-field px-2">{edge.edge_type}</span>
+						<span class="BC-field bc:px-2">{edge.edge_type}</span>
 
 						<EdgeLink
-							cls="grow"
+							cls="bc:grow"
 							{edge}
 							{plugin}
 							{node_stringify_options}
@@ -163,33 +163,33 @@
 			</div>
 
 			<div
-				class="flex w-full flex-col"
+				class="bc:flex bc:w-full bc:flex-col"
 				style="border-radius:  0 var(--radius-m) var(--radius-m) 0"
 			>
 				{#each grouped_out_edges?.next ?? [] as edge}
 					<div
-						class="BC-next-prev-item flex gap-3 py-1 pl-1 pr-2 text-right"
+						class="BC-next-prev-item bc:flex bc:gap-3 bc:py-1 bc:pl-1 bc:pr-2 bc:text-right"
 					>
 						<EdgeLink
-							cls="grow"
+							cls="bc:grow"
 							{edge}
 							{plugin}
 							{node_stringify_options}
 						/>
 
-						<span class="BC-field px-2">{edge.edge_type}</span>
+						<span class="BC-field bc:px-2">{edge.edge_type}</span>
 					</div>
 				{/each}
 			</div>
 		</div>
 	{/if}
 
 	{#each period_rows as row}
-		<div class="BC-period-row flex items-center gap-1 py-1 px-2">
-			<span class="BC-period-kind text-xs opacity-60">{row.kind}</span>
+		<div class="BC-period-row bc:flex bc:items-center bc:gap-1 bc:py-1 bc:px-2">
+			<span class="BC-period-kind bc:text-xs bc:opacity-60">{row.kind}</span>
 
-			<div class="flex grow items-center justify-between">
-				<div class="flex-1 text-left">
+			<div class="bc:flex bc:grow bc:items-center bc:justify-between">
+				<div class="bc:flex-1 bc:text-left">
 					{#if row.prev_path}
 						<EdgeLink
 							cls=""
@@ -208,14 +208,14 @@
 					{/if}
 				</div>
 
-				<span class="BC-period-current mx-2 font-medium">
+				<span class="BC-period-current bc:mx-2 bc:font-medium">
 					{row.period_path
 						.split("/")
 						.pop()
 						?.replace(/\.[^.]+$/, "") ?? ""}
 				</span>
 
-				<div class="flex-1 text-right">
+				<div class="bc:flex-1 bc:text-right">
 					{#if row.next_path}
 						<EdgeLink
 							cls=""
@@ -239,7 +239,7 @@
 	.BC-prev-next-view > div {
 		border: 1px solid var(--background-modifier-border);
 	}
-	.BC-prev-next-view .flex-col {
+	.BC-prev-next-view .bc\:flex-col {
 		background-color: var(--background-primary);
 	}
 	.BC-period-row {

src/components/page_views/TrailView.svelte

@@ -89,8 +89,9 @@
 {#if sorted_paths && sorted_paths.length}
 	<div>
 		<div
-			class="mb-1 flex flex-wrap justify-between gap-3"
-			class:hidden={!settings.show_controls}
+			class="bc:mb-1 bc:flex bc:flex-wrap bc:justify-between bc:gap-3 {settings.show_controls
+				? ''
+				: 'bc:hidden'}"
 		>
 			<select class="dropdown" bind:value={settings.format}>
 				{#each ["grid", "path"] as format}
@@ -106,9 +107,9 @@
 
 			<MergeFieldsButton bind:merge_fields={settings.merge_fields} />
 
-			<div class="flex items-center gap-1">
+			<div class="bc:flex bc:items-center bc:gap-1">
 				<button
-					class="aspect-square text-lg"
+					class="bc:aspect-square bc:text-lg"
 					aria-label="Decrease max depth"
 					disabled={depth <= 1}
 					onclick={() => (depth = Math.max(1, depth - 1))}
@@ -117,7 +118,7 @@
 				</button>
 
 				<span
-					class="font-mono"
+					class="bc:font-mono"
 					aria-label={data.hit_depth_limit
 						? "Some paths have been truncated"
 						: ""}
@@ -127,7 +128,7 @@
 				</span>
 
 				<button
-					class="aspect-square text-lg"
+					class="bc:aspect-square bc:text-lg"
 					aria-label="Increase max depth"
 					disabled={depth >= MAX_DEPTH}
 					onclick={() => (depth = Math.min(MAX_DEPTH, depth + 1))}

src/components/page_views/TrailViewGrid.svelte

@@ -68,7 +68,7 @@
 <!-- TODO: sailKite says using grid-template-rows: subgrid could work some magic here
 			https://discord.com/channels/686053708261228577/702656734631821413/1234871810185629859 -->
 <div
-	class="BC-trail-view grid"
+	class="BC-trail-view bc:grid"
 	style="grid-template-rows: min-content;
 grid-template-columns: {'1fr '.repeat(trail_grid.square.at(0)?.length ?? 0)};"
 >
@@ -77,15 +77,15 @@ grid-template-columns: {'1fr '.repeat(trail_grid.square.at(0)?.length ?? 0)};"
 			{@const edge = trail_grid.square[first][j]}
 
 			<div
-				class="BC-trail-view-item flex"
+				class="BC-trail-view-item bc:flex"
 				style="
 					grid-area: {first + 1} / {j + 1} / {last + 2} / {j + 2};"
 			>
 				{#if edge}
 					<EdgeLink
 						{edge}
 						{plugin}
-						cls="p-1 grow flex justify-center items-center"
+						cls="bc:p-1 bc:grow bc:flex bc:justify-center bc:items-center"
 						{node_stringify_options}
 					/>
 				{/if}