first test

src/lib/cards/GitHubContributorsCard/GitHubContributorsCard.svelte

···
 	let owner: string = $derived(item.cardData.owner ?? '');
 	let repo: string = $derived(item.cardData.repo ?? '');
 	let repoKey: string = $derived(owner && repo ? `${owner}/${repo}` : '');
+	let layout: 'hex' | 'grid' = $derived(item.cardData.layout ?? 'hex');
 
 	let serverContributors: GitHubContributor[] = $derived.by(() => {
 		if (!repoKey) return [];
···
 		const colsNarrow = Math.max(1, colsWide - 1);
 		const maxRows = Math.floor((availH + GAP) / (size + GAP));
 		let capacity = 0;
+		// Pattern: narrow, wide, narrow, wide... (row 0 is narrow)
 		for (let r = 0; r < maxRows; r++) {
-			capacity += r % 2 === 0 ? colsWide : colsNarrow;
+			capacity += r % 2 === 0 ? colsNarrow : colsWide;
 		}
 		return capacity;
 	}
 
+	function gridCapacity(size: number, availW: number, availH: number): number {
+		const cols = Math.floor((availW + GAP) / (size + GAP));
+		const rows = Math.floor((availH + GAP) / (size + GAP));
+		return cols * rows;
+	}
+
 	let computedSize = $derived.by(() => {
 		if (!containerWidth || !containerHeight || totalItems === 0) return 40;
 
 		let lo = MIN_SIZE;
 		let hi = MAX_SIZE;
+		const capacityFn = layout === 'hex' ? hexCapacity : gridCapacity;
 
 		while (lo <= hi) {
 			const mid = Math.floor((lo + hi) / 2);
-			const availW = containerWidth - mid;
-			const availH = containerHeight - mid;
+			const availW = containerWidth - (layout === 'hex' ? mid : 0);
+			const availH = containerHeight - (layout === 'hex' ? mid : 0);
 			if (availW <= 0 || availH <= 0) {
 				hi = mid - 1;
 				continue;
 			}
-			if (hexCapacity(mid, availW, availH) >= totalItems) {
+			if (capacityFn(mid, availW, availH) >= totalItems) {
 				lo = mid + 1;
 			} else {
 				hi = mid - 1;
···
 		return Math.max(MIN_SIZE, hi);
 	});
 
-	let padding = $derived(computedSize / 2);
+	let padding = $derived(layout === 'hex' ? computedSize / 2 : 0);
 
 	let rows = $derived.by(() => {
-		const availW = containerWidth - computedSize;
+		const availW = containerWidth - (layout === 'hex' ? computedSize : 0);
 		if (availW <= 0) return [] as GitHubContributor[][];
+
 		const colsWide = Math.floor((availW + GAP) / (computedSize + GAP));
-		const colsNarrow = Math.max(1, colsWide - 1);
+		const colsNarrow = layout === 'hex' ? Math.max(1, colsWide - 1) : colsWide;
 
+		// Calculate row sizes from bottom up, then reverse for incomplete row at top
+		const rowSizes: number[] = [];
+		let remaining = namedContributors.length;
+		let rowNum = 0;
+		while (remaining > 0) {
+			const cols = layout === 'hex' && rowNum % 2 === 0 ? colsNarrow : colsWide;
+			rowSizes.push(Math.min(cols, remaining));
+			remaining -= cols;
+			rowNum++;
+		}
+		rowSizes.reverse();
+
+		// Fill rows with contributors in order
 		const result: GitHubContributor[][] = [];
 		let idx = 0;
-		let rowNum = 0;
-		while (idx < namedContributors.length) {
-			const cols = rowNum % 2 === 0 ? colsWide : colsNarrow;
-			result.push(namedContributors.slice(idx, idx + cols));
-			idx += cols;
-			rowNum++;
+		for (const size of rowSizes) {
+			result.push(namedContributors.slice(idx, idx + size));
+			idx += size;
 		}
 		return result;
 	});

src/lib/cards/GitHubContributorsCard/GitHubContributorsCardSettings.svelte

···
+<script lang="ts">
+	import type { SettingsComponentProps } from '../types';
+	import { Label } from '@foxui/core';
+
+	let { item = $bindable() }: SettingsComponentProps = $props();
+
+	const layoutOptions = [
+		{ value: 'hex', label: 'Hexagon' },
+		{ value: 'grid', label: 'Grid' }
+	];
+
+	let layout = $derived(item.cardData.layout ?? 'hex');
+</script>
+
+<div class="flex flex-col gap-2">
+	<Label>Layout</Label>
+	<div class="flex gap-2">
+		{#each layoutOptions as opt (opt.value)}
+			<button
+				class={[
+					'flex-1 rounded-xl border px-3 py-2 text-sm transition-colors',
+					layout === opt.value
+						? 'bg-accent-500 border-accent-500 text-white'
+						: 'bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 hover:border-accent-400'
+				]}
+				onclick={() => (item.cardData.layout = opt.value)}
+			>
+				{opt.label}
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/cards/GitHubContributorsCard/index.ts

···
 import type { CardDefinition } from '../types';
 import GitHubContributorsCard from './GitHubContributorsCard.svelte';
 import CreateGitHubContributorsCardModal from './CreateGitHubContributorsCardModal.svelte';
+import GitHubContributorsCardSettings from './GitHubContributorsCardSettings.svelte';
 
 export type GitHubContributor = {
 	username: string;
···
 	type: 'githubContributors',
 	contentComponent: GitHubContributorsCard,
 	creationModalComponent: CreateGitHubContributorsCardModal,
+	settingsComponent: GitHubContributorsCardSettings,
 	createNew: (card) => {
 		card.w = 4;
 		card.h = 2;

src/routes/(auth)/oauth/callback/+page.svelte

···
 			goto('/' + getHandleOrDid(user.profile) + '/edit', {});
 		}
 
-		if(!user.isInitializing && !startedErrorTimer) {
+		if (!user.isInitializing && !startedErrorTimer) {
 			startedErrorTimer = true;
 
 			setTimeout(() => {
···
 			>There was an error signing you in, please go back to the
 			<a class="text-accent-600 dark:text-accent-400" href="/">homepage</a>
 			and try again.
-			
 		</span>
 	</div>
 {/if}