move Spacer to UI

apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte

@@ -7,11 +7,11 @@
 	import derectionDoubtSvg from '$lib/assets/illustrations/direction-doubt.svg?raw';
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import type { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import { goto } from '$app/navigation';
 

apps/desktop/src/lib/components/ProblemLoadingRepo.svelte

@@ -6,10 +6,10 @@
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
 	import ProjectNameLabel from '$lib/shared/ProjectNameLabel.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext } from '@gitbutler/shared/context';
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { goto } from '$app/navigation';
 
 	export let error: any = undefined;

apps/desktop/src/lib/components/ProjectNotFound.svelte

@@ -5,9 +5,9 @@
 	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
 	import { ProjectsService } from '$lib/backend/projects';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 
 	const projectsService = getContext(ProjectsService);
 	const id = projectsService.getLastOpenedProject();

apps/desktop/src/lib/onboarding/CloneForm.svelte

@@ -3,11 +3,11 @@
 	import { ProjectsService } from '$lib/backend/projects';
 	import Section from '$lib/settings/Section.svelte';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
 	import { getContext } from '@gitbutler/shared/context';
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import * as Sentry from '@sentry/sveltekit';
 	import { open } from '@tauri-apps/api/dialog';

apps/desktop/src/lib/settings/Section.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Spacer from '$lib/shared/Spacer.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	export let spacer = false;

apps/desktop/src/lib/stack/Stack.svelte

@@ -12,7 +12,6 @@
 	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import Resizer from '$lib/shared/Resizer.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { intersectionObserver } from '$lib/utils/intersectionObserver';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { FileIdSelection } from '$lib/vbranches/fileIdSelection';
@@ -21,6 +20,7 @@
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import lscache from 'lscache';
 	import { onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';

packages/ui/src/lib/Spacer.svelte

@@ -1,13 +1,15 @@
-<script lang="ts">
-	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
-
-	interface SpacerProps {
+<script lang="ts" module>
+	export interface Props {
 		margin?: number;
 		noLine?: boolean;
 		dotted?: boolean;
 	}
+</script>
 
-	const { margin = 12, noLine = false, dotted = false }: SpacerProps = $props();
+<script lang="ts">
+	import { pxToRem } from '$lib/utils/pxToRem';
+
+	const { margin = 12, noLine = false, dotted = false }: Props = $props();
 
 	function getMargins() {
 		if (margin === undefined) {

packages/ui/src/stories/spacer/Spacer.stories.ts

@@ -0,0 +1,19 @@
+import SpacerDemo from './SpacerDemo.svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Elements / Spacer',
+	component: SpacerDemo
+} satisfies Meta<SpacerDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SpacerStory: Story = {
+	name: 'Spacer',
+	args: {
+		margin: 12,
+		noLine: false,
+		dotted: false
+	}
+};

packages/ui/src/stories/spacer/SpacerDemo.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Spacer, { type Props } from '$lib/Spacer.svelte';
+
+	const props: Props = $props();
+</script>
+
+<Spacer {...props} />