@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/components/ShareConversationModal.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import CarbonLink from "~icons/carbon/link";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
+	import { onMount } from "svelte";
+	import { createShareLink } from "$lib/createShareLink";
+
+	interface Props {
+		open?: boolean;
+		onclose?: () => void;
+		oncopied?: () => void;
+	}
+
+	let { open = false, onclose, oncopied }: Props = $props();
+
+	let creating = $state(false);
+	let createdUrl: string | null = $state(null);
+	let errorMsg: string | null = $state(null);
+	let justCopied = $state(false);
+
+	async function handleCreate() {
+		try {
+			creating = true;
+			errorMsg = null;
+			createdUrl = await createShareLink(page.params.id ?? "");
+		} catch (e) {
+			errorMsg = (e as Error).message || "Could not create link";
+		} finally {
+			creating = false;
+		}
+	}
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	// If the current page is already a shared chat (7-char id), pre-fill the link
+	onMount(async () => {
+		if (page.params.id && page.params.id.length === 7) {
+			try {
+				createdUrl = await createShareLink(page.params.id);
+			} catch (e) {
+				// ignore
+			}
+		}
+	});
+
+	function withLeafId(url: string | null): string | null {
+		if (!url) return url;
+		try {
+			const leafId = localStorage.getItem("leafId");
+			if (!leafId) return url;
+			const u = new URL(url);
+			u.searchParams.set("leafId", leafId);
+			return u.toString();
+		} catch (e) {
+			return url;
+		}
+	}
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[500px]">
+		<div class="flex w-full flex-col gap-3 p-5 sm:gap-5 sm:p-6">
+			<!-- Header + copy -->
+			{#if createdUrl}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Public link created
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					A public link to your chat has been created.
+				</div>
+			{:else}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Share public link to chat
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					Any messages you add after sharing stay private.
+				</div>
+			{/if}
+
+			{#if errorMsg}
+				<div
+					class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
+				>
+					{errorMsg}
+				</div>
+			{/if}
+
+			<!-- URL row -->
+			<div
+				class="flex h-12 items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-800"
+			>
+				<input
+					class="w-full truncate bg-transparent text-[15px] text-gray-700 outline-none placeholder:text-gray-400 dark:text-gray-200 dark:placeholder:text-gray-500 max-sm:text-sm"
+					readonly
+					value={createdUrl ??
+						`${page.data.publicConfig.PUBLIC_SHARE_PREFIX || `${page.data.publicConfig.PUBLIC_ORIGIN || page.url.origin}${base}`}/r/...`}
+				/>
+
+				{#if createdUrl}
+					<CopyToClipBoardBtn
+						classNames="inline-flex items-center rounded-xl -mr-1 border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow enabled:hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:enabled:hover:bg-gray-600"
+						showTooltip={false}
+						value={withLeafId(createdUrl) ?? createdUrl}
+						onClick={() => {
+							justCopied = true;
+							oncopied?.();
+							setTimeout(() => (justCopied = false), 1200);
+						}}
+					>
+						{#snippet children()}
+							<span class="inline-flex items-center gap-1.5">
+								{#if justCopied}
+									<CarbonCheckmark class="text-[.95em] text-green-600 dark:text-green-400" />
+									Copied
+								{:else}
+									<!-- Use the copy icon provided by CopyToClipBoardBtn default otherwise -->
+									<svg width="1em" height="1em" viewBox="0 0 32 32" class="text-[.95em]"
+										><path
+											fill="currentColor"
+											d="M28 10v18H10V10zm-2 2H12v14h14zm-4-8v2H6v14H4V4z"
+										/></svg
+									>
+									Copy link
+								{/if}
+							</span>
+						{/snippet}
+					</CopyToClipBoardBtn>
+				{:else}
+					<button
+						class="-mr-1 inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+						type="button"
+						disabled={creating}
+						onclick={handleCreate}
+					>
+						{#if creating}
+							<EosIconsLoading class="text-[1.05em]" />
+							Creating…
+						{:else}
+							<CarbonLink class="text-[1.05em]" />
+							Create link
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</Modal>
+{/if}

package/src/ruvocal/src/lib/components/StopGeneratingBtn.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+		showBorder?: boolean;
+	}
+
+	let { classNames = "", onClick, showBorder = false }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={onClick}
+	class={`btn stop-generating-btn ${showBorder ? "stop-generating-btn--spinning" : ""} ${classNames}`}
+	aria-label="Stop generating"
+>
+	<span class="sr-only">Stop generating</span>
+	<CarbonStopFilledAlt class="size-3.5 text-gray-500" />
+</button>
+
+<style lang="postcss">
+	.stop-generating-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		--stop-generating-ring-color: rgba(31, 41, 55, 0.35);
+	}
+
+	.stop-generating-btn :global(svg) {
+		display: block;
+	}
+
+	.stop-generating-btn::after {
+		content: "";
+		position: absolute;
+		inset: -2px;
+		border-radius: inherit;
+		pointer-events: none;
+		background: transparent;
+	}
+
+	.stop-generating-btn--spinning::after {
+		background: conic-gradient(
+			from 0deg,
+			transparent 0deg 240deg,
+			var(--stop-generating-ring-color) 240deg 360deg
+		);
+		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
+		animation: stop-generating-rotate 1.2s linear infinite;
+	}
+
+	:global(.dark) .stop-generating-btn {
+		--stop-generating-ring-color: rgba(255, 255, 255, 0.2);
+	}
+
+	@keyframes stop-generating-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/src/ruvocal/src/lib/components/SubscribeModal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div
+			class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
+		>
+			<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
+				<div
+					class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
+						? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
+						: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
+				>
+					{#if $isPro}
+						<IconDazzled />
+					{:else}
+						<IconPro classNames="!mr-0" />
+					{/if}
+				</div>
+				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+					{$isPro ? "Out of Credits" : "Upgrade Required"}
+				</h2>
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			{#if $isPro}
+				<p class="text-[15px] leading-relaxed">
+					You've used all your available credits. Purchase additional credits to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					Your credits can be used in other HF services and external apps via Inference Providers.
+				</p>
+			{:else}
+				<p class="text-[15px] leading-relaxed">
+					You've reached your message limit. Upgrade to Hugging Face PRO to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					It's also possible to use your PRO credits in your favorite AI tools.
+				</p>
+			{/if}
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			{#if $isPro}
+				<a
+					href="https://huggingface.co/settings/billing?add-credits=true"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Purchase Credits
+				</a>
+			{:else}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Upgrade to Pro
+				</a>
+			{/if}
+			<button
+				class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
+				onclick={close}
+			>
+				Maybe later
+			</button>
+		</div>
+	</div>
+</Modal>

package/src/ruvocal/src/lib/components/Switch.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		checked: boolean;
+		name: string;
+	}
+
+	let { checked = $bindable(), name }: Props = $props();
+
+	function toggle() {
+		checked = !checked;
+		tap();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
+<div
+	aria-checked={checked}
+	aria-roledescription="switch"
+	aria-label="switch"
+	role="switch"
+	tabindex="0"
+	onclick={toggle}
+	onkeydown={onKeydown}
+	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 peer-checked:bg-blue-600 hover:bg-gray-400 peer-checked:hover:bg-blue-600 focus-visible:ring focus-visible:ring-offset-1 dark:bg-gray-600 dark:ring-gray-700 dark:hover:bg-gray-500 dark:peer-checked:hover:bg-blue-600 peer-checked:[&>div]:translate-x-3.5"
+>
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"></div>
+</div>

package/src/ruvocal/src/lib/components/SystemPromptModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonBlockchain from "~icons/carbon/blockchain";
+
+	interface Props {
+		preprompt: string;
+	}
+
+	let { preprompt }: Props = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<button
+	type="button"
+	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+	onclick={() => (isOpen = !isOpen)}
+	onkeydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+>
+	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
+</button>
+
+{#if isOpen}
+	<Modal onclose={() => (isOpen = false)} width="w-full !max-w-xl">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div
+				class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-200"
+			>
+				<h2>System Prompt</h2>
+				<button type="button" class="group" onclick={() => (isOpen = false)}>
+					<CarbonClose
+						class="mt-auto text-gray-900 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
+					/>
+				</button>
+			</div>
+			<textarea
+				disabled
+				value={preprompt}
+				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 max-sm:text-sm"
+			></textarea>
+		</div>
+	</Modal>
+{/if}

package/src/ruvocal/src/lib/components/Toast.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		message?: string;
+	}
+
+	let { message = "" }: Props = $props();
+</script>
+
+<Portal>
+	<div
+		transition:fade|global={{ duration: 300 }}
+		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 max-sm:text-sm md:top-0 md:pr-8 md:pt-5"
+	>
+		<div
+			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+		>
+			<IconDazzled classNames="text-2xl mr-2 flex-none" />
+			<h2 class="line-clamp-2 max-w-2xl font-semibold text-gray-800 dark:text-gray-200">
+				{message}
+			</h2>
+		</div>
+	</div>
+</Portal>

package/src/ruvocal/src/lib/components/Tooltip.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+		label?: string;
+		position?: string;
+	}
+
+	let {
+		classNames = "",
+		label = "Copied",
+		position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2",
+	}: Props = $props();
+</script>
+
+<div
+	class="
+		pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
+		{position}
+		{classNames}
+	"
+>
+	<div
+		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
+		style="
+				border-left-color: transparent;
+				border-right-color: transparent;
+			"
+	></div>
+	{label}
+</div>

package/src/ruvocal/src/lib/components/WelcomeModal.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import RuFloUniverse from "$lib/components/RuFloUniverse.svelte";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	const publicConfig = usePublicConfig();
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div class="relative -mx-6 h-48 select-none overflow-hidden">
+			<RuFloUniverse width={420} height={192} />
+			<div
+				class="absolute bottom-3 right-3 rounded-lg border border-indigo-500/30 bg-indigo-500/20 px-2 py-0.5 text-sm font-semibold text-indigo-400"
+			>
+				MCP Tools
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			<p class="text-[15px] leading-relaxed">
+				Welcome to <strong>{publicConfig.PUBLIC_APP_NAME}</strong>, your intelligent workflow
+				automation assistant.
+			</p>
+			<p class="mt-3 text-[15px] leading-relaxed">
+				Powered by AI models with MCP tool integration for search, analysis, and workflow
+				execution.
+			</p>
+		</div>
+
+		<button
+			class="k w-full rounded-xl bg-indigo-600 px-5 py-2.5 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+			onclick={close}
+		>
+			Start chatting
+		</button>
+	</div>
+</Modal>

package/src/ruvocal/src/lib/components/chat/Alternatives.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import CarbonChevronLeft from "~icons/carbon/chevron-left";
+	import CarbonChevronRight from "~icons/carbon/chevron-right";
+
+	interface Props {
+		message: Message;
+		alternatives?: Message["id"][];
+		loading?: boolean;
+		classNames?: string;
+		onshowAlternateMsg?: (payload: { id: Message["id"] }) => void;
+	}
+
+	let {
+		message,
+		alternatives = [],
+		loading = false,
+		classNames = "",
+		onshowAlternateMsg,
+	}: Props = $props();
+
+	let currentIdx = $derived(alternatives.findIndex((id) => id === message.id));
+
+	// API client removed as deletion UI is commented out
+</script>
+
+<div
+	class="font-white group/navbranch z-0 flex h-6 w-fit select-none items-center justify-center gap-1 whitespace-nowrap text-sm {classNames}"
+>
+	<button
+		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() => onshowAlternateMsg?.({ id: alternatives[Math.max(0, currentIdx - 1)] })}
+		disabled={currentIdx === 0 || loading}
+	>
+		<CarbonChevronLeft class="text-sm" />
+	</button>
+	<span class=" text-gray-400 dark:text-gray-500">
+		{currentIdx + 1} / {alternatives.length}
+	</span>
+	<button
+		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() =>
+			onshowAlternateMsg?.({
+				id: alternatives[Math.min(alternatives.length - 1, currentIdx + 1)],
+			})}
+		disabled={currentIdx === alternatives.length - 1 || loading}
+	>
+		<CarbonChevronRight class="text-sm" />
+	</button>
+	<!-- {#if !loading && message.children}
+		<button
+			class="hidden group-hover/navbranch:block"
+			onclick={() => {
+				if (confirm("Are you sure you want to delete this branch?")) {
+					client
+						.conversations({ id: page.params.id })
+						.message({ messageId: message.id })
+						.delete()
+						.then(handleResponse)
+						.then(async () => {
+							await invalidate(UrlDependency.Conversation);
+						})
+						.catch((err) => {
+							console.error(err);
+							$error = String(err);
+						});
+				}
+			}}
+		>
+			<div
+				class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
+			>
+				<CarbonTrashCan />
+			</div>
+		</button>
+	{/if} -->
+</div>

package/src/ruvocal/src/lib/components/chat/BlockWrapper.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		icon: Snippet;
+		iconBg?: string;
+		iconRing?: string;
+		hasNext?: boolean;
+		loading?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		icon,
+		iconBg = "bg-gray-50 dark:bg-gray-800",
+		iconRing = "ring-gray-100 dark:ring-gray-700",
+		hasNext = false,
+		loading = false,
+		children,
+	}: Props = $props();
+</script>
+
+<div class="group flex gap-2 has-[+.prose]:mb-1.5 [.prose+&]:mt-3">
+	<!-- Left column: icon + connector line -->
+	<div class="flex w-[22px] flex-shrink-0 flex-col items-center">
+		<div
+			class="relative z-0 flex h-[22px] w-[22px] items-center justify-center rounded-md ring-1 {iconBg} {iconRing}"
+		>
+			{@render icon()}
+			{#if loading}
+				<svg
+					class="pointer-events-none absolute inset-0 h-[22px] w-[22px]"
+					viewBox="0 0 22 22"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect
+						x="0.5"
+						y="0.5"
+						width="21"
+						height="21"
+						rx="5.5"
+						class="loading-path stroke-current text-purple-500/20"
+						stroke-width="1"
+						fill="none"
+					/>
+				</svg>
+			{/if}
+		</div>
+		{#if hasNext}
+			<div class="my-1 w-px flex-1 bg-gray-200 dark:bg-gray-700"></div>
+		{/if}
+	</div>
+
+	<!-- Right column: content -->
+	<div class="min-w-0 flex-1 pb-2 pt-px">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	@keyframes loading {
+		to {
+			stroke-dashoffset: -100;
+		}
+	}
+
+	.loading-path {
+		stroke-dasharray: 60 40;
+		animation: loading 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+</style>