navbar fixes

src/components/Button.svelte

@@ -1,8 +1,10 @@
 <script>
+  // Handler and presentation props
   export let onClick = () => {};
+  export let border = false;
 </script>
 
-<button onclick={onClick} class="btn">
+<button onclick={onClick} class="btn" class:borderless={!border} {...$$restProps}>
   <slot />
 </button>
 
@@ -12,15 +14,18 @@
     color: var(--black);
     border-radius: 8px;
     border: 1.5px solid transparent;
-    border-color: var(--orange);
     padding: 0.6em 1.2em;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.5em;
   }
+
+  .btn:not(.borderless) {
+    border-color: var(--orange);
+  }
+
   .btn:hover {
     background: var(--orange);
   }

src/components/ButtonBorderless.svelte

@@ -1,26 +0,0 @@
-<script>
-  export let onClick = () => {};
-</script>
-
-<button onclick={onClick} class="btn">
-  <slot />
-</button>
-
-<style>
-  .btn {
-    background: var(--white);
-    color: var(--black);
-    border-radius: 8px;
-    border: 1.5px solid transparent;
-    padding: 0.6em 1.2em;
-    font-weight: 500;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5em;
-  }
-  .btn:hover {
-    background: var(--orange);
-  }
-</style>

src/components/index.js

@@ -2,6 +2,7 @@ export { default as Container } from './layout/Container.svelte'
 export { default as Card } from './layout/Card.svelte'
 export { default as Stack } from './layout/Stack.svelte'
 export { default as Grid } from './layout/Grid.svelte'
+export { default as Center } from './layout/Center.svelte'
 
 export { default as Button } from './Button.svelte'
 export { default as ButtonBorderless } from './ButtonBorderless.svelte'

src/components/layout/Center.svelte

@@ -0,0 +1,16 @@
+<script>
+  export let dir = "row"; // 'row' | 'col' (default: 'row')
+  export let gapClass = "gap-4";
+  export let className = "";
+</script>
+
+<div
+  class={"flex " +
+    (dir === "row" ? "flex-row" : "flex-col") +
+    " items-center justify-center " +
+    gapClass +
+    " " +
+    className}
+>
+  <slot />
+</div>