transfer to PC

src/components/Button.svelte

@@ -0,0 +1,20 @@
+<script>
+  export let onClick = () => {}
+</script>
+
+<button on:click={onClick} class="btn">
+  <slot />
+</button>
+
+<style>
+  .btn {
+    background: var(--button-bg);
+    color: var(--button-text);
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-weight: 500;
+    cursor: pointer;
+  }
+  .btn:hover { border-color: var(--primary); }
+</style>

src/components/Card.svelte

@@ -0,0 +1,8 @@
+<script>
+  export let className = '';
+  export let as = 'div';
+</script>
+
+<svelte:component this={as} class={`card ${className}`}>
+  <slot />
+</svelte:component>

src/components/Container.svelte

@@ -0,0 +1,9 @@
+<script>
+  export let fluid = false; // when true, removes max-width
+  export let className = '';
+  export let as = 'div';
+</script>
+
+<svelte:component this={as} class={`container ${fluid ? 'container--fluid' : ''} ${className}`}>
+  <slot />
+</svelte:component>

src/components/Grid.svelte

@@ -0,0 +1,10 @@
+<script>
+  export let min = '220px'; // minimum column width
+  export let gap = 'var(--space-3)';
+  export let className = '';
+  export let as = 'div';
+</script>
+
+<svelte:component this={as} class={`grid ${className}`} style={`grid-template-columns: repeat(auto-fit, minmax(${min}, 1fr)); gap: ${gap};`}>
+  <slot />
+</svelte:component>

src/components/Stack.svelte

@@ -0,0 +1,11 @@
+<script>
+  // Vertical stack helper. Accepts a gap and alignment so pages can tune spacing.
+  export let gap = 'var(--space-3)';
+  export let align = 'stretch';
+  export let className = '';
+  export let as = 'div';
+</script>
+
+<svelte:component this={as} class={`stack ${className}`} style={`gap: ${gap}; align-items: ${align};`}>
+  <slot />
+</svelte:component>

src/components/index.js

@@ -0,0 +1,5 @@
+export { default as Container } from './Container.svelte'
+export { default as Card } from './Card.svelte'
+export { default as Stack } from './Stack.svelte'
+export { default as Grid } from './Grid.svelte'
+export { default as Button } from './Button.svelte'