@aryagg/layout-kit 0.0.2

package/README.md

@@ -0,0 +1,77 @@
+# ui-kit
+
+A Svelte 5 component library template powered by [SvelteKit](https://svelte.dev/docs/kit), [Tailwind CSS v4](https://tailwindcss.com), and TypeScript.
+
+## Stack
+
+- **Svelte 5** with runes mode enforced across the project
+- **SvelteKit** — dev server, routing, and packaging
+- **Tailwind CSS v4** via `@tailwindcss/vite`
+- **TypeScript** with strict config
+- **ESLint + Prettier** (with `eslint-plugin-svelte`)
+- **`@aryagg/theme`**, **`@aryagg/types`**, **`@aryagg/utils`** — shared design system packages
+
+## Getting started
+
+Install dependencies:
+
+```sh
+npm install
+```
+
+Start the dev server (includes a live showcase app at `src/routes`):
+
+```sh
+npm run dev
+
+# open in browser automatically
+npm run dev -- --open
+```
+
+## Project structure
+
+```
+src/
+  lib/        ← library source (exported to consumers)
+  routes/     ← showcase / preview app (not published)
+```
+
+Everything inside `src/lib` is part of the published library. Use `src/routes` to build demos and test components interactively.
+
+## Building
+
+Build and package the library:
+
+```sh
+npm run build
+```
+
+This runs `svelte-kit sync`, `svelte-package`, and `publint` in sequence. Output goes to `dist/`.
+
+Preview the showcase app production build:
+
+```sh
+npm run preview
+```
+
+## Type checking & linting
+
+```sh
+npm run check          # svelte-check + tsc
+npm run check:watch    # watch mode
+
+npm run lint           # prettier + eslint
+npm run format         # auto-format with prettier
+```
+
+## Publishing
+
+1. Set the `"name"` field in `package.json` to your desired package name.
+2. Add a `"license"` field and a `LICENSE` file (e.g. [MIT](https://opensource.org/license/mit/)).
+3. Publish to npm:
+
+```sh
+npm publish
+```
+
+The `"exports"` field in `package.json` exposes `./dist/index.js` (Svelte) and `./dist/index.d.ts` (types) for consumers.

package/dist/header/Header-1.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { NavItem } from './types';
+	import NavList from './_NavList.svelte';
+
+	let {
+		brand = 'Brand',
+		brandHref = '/',
+		brandIcon,
+		items = [],
+		actions,
+		class: klass = '',
+	}: {
+		brand?: string;
+		brandHref?: string;
+		brandIcon?: any;
+		items?: NavItem[];
+		actions?: Snippet;
+		class?: string;
+	} = $props();
+
+	let headerEl: HTMLElement;
+	let openL1 = $state<number | null>(null);
+	let openL2 = $state<number | null>(null);
+
+	function toggleL1(i: number) {
+		openL1 = openL1 === i ? null : i;
+		openL2 = null;
+	}
+
+	function toggleL2(i: number) {
+		openL2 = openL2 === i ? null : i;
+	}
+
+	function onWindowClick(e: MouseEvent) {
+		if (!headerEl?.contains(e.target as Node)) {
+			openL1 = null;
+			openL2 = null;
+		}
+	}
+</script>
+
+<!-- Header-1: brand left · nav left · actions right -->
+
+<svelte:window onclick={onWindowClick} />
+
+<header
+	bind:this={headerEl}
+	class="sticky top-0 z-50 w-full border-b border-border-primary bg-surface-primary {klass}"
+>
+	<div class="mx-auto flex h-14 max-w-7xl items-center gap-4 px-4">
+
+		<a href={brandHref} class="flex shrink-0 items-center gap-2 no-underline opacity-100 hover:opacity-80">
+			{#if brandIcon}{@const Icon = brandIcon}<Icon class="size-5 text-accent" />{/if}
+			<span class="text-sm font-semibold text-primary">{brand}</span>
+		</a>
+
+		<NavList {items} {openL1} {openL2} onToggleL1={toggleL1} onToggleL2={toggleL2} />
+
+		{#if actions}
+			<div class="ml-auto flex items-center gap-2">{@render actions()}</div>
+		{/if}
+
+	</div>
+</header>

package/dist/header/Header-1.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { NavItem } from './types';
+type $$ComponentProps = {
+    brand?: string;
+    brandHref?: string;
+    brandIcon?: any;
+    items?: NavItem[];
+    actions?: Snippet;
+    class?: string;
+};
+declare const Header1: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header1 = ReturnType<typeof Header1>;
+export default Header1;

package/dist/header/Header-2.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { NavItem } from './types';
+	import NavList from './_NavList.svelte';
+
+	let {
+		brand = 'Brand',
+		brandHref = '/',
+		brandIcon,
+		items = [],
+		actions,
+		class: klass = '',
+	}: {
+		brand?: string;
+		brandHref?: string;
+		brandIcon?: any;
+		items?: NavItem[];
+		actions?: Snippet;
+		class?: string;
+	} = $props();
+
+	let headerEl: HTMLElement;
+	let openL1 = $state<number | null>(null);
+	let openL2 = $state<number | null>(null);
+
+	function toggleL1(i: number) {
+		openL1 = openL1 === i ? null : i;
+		openL2 = null;
+	}
+
+	function toggleL2(i: number) {
+		openL2 = openL2 === i ? null : i;
+	}
+
+	function onWindowClick(e: MouseEvent) {
+		if (!headerEl?.contains(e.target as Node)) {
+			openL1 = null;
+			openL2 = null;
+		}
+	}
+</script>
+
+<!-- Header-2: brand left · nav grid-centered · actions right -->
+
+<svelte:window onclick={onWindowClick} />
+
+<header
+	bind:this={headerEl}
+	class="sticky top-0 z-50 w-full border-b border-border-primary bg-surface-primary {klass}"
+>
+	<div class="mx-auto grid h-14 max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4">
+
+		<a href={brandHref} class="flex shrink-0 items-center gap-2 no-underline opacity-100 hover:opacity-80">
+			{#if brandIcon}{@const Icon = brandIcon}<Icon class="size-5 text-accent" />{/if}
+			<span class="text-sm font-semibold text-primary">{brand}</span>
+		</a>
+
+		<div class="flex justify-center">
+			<NavList {items} {openL1} {openL2} onToggleL1={toggleL1} onToggleL2={toggleL2} />
+		</div>
+
+		<div class="flex items-center gap-2">
+			{#if actions}{@render actions()}{/if}
+		</div>
+
+	</div>
+</header>

package/dist/header/Header-2.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { NavItem } from './types';
+type $$ComponentProps = {
+    brand?: string;
+    brandHref?: string;
+    brandIcon?: any;
+    items?: NavItem[];
+    actions?: Snippet;
+    class?: string;
+};
+declare const Header2: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header2 = ReturnType<typeof Header2>;
+export default Header2;

package/dist/header/Header-3.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { NavItem } from './types';
+	import NavList from './_NavList.svelte';
+
+	let {
+		brand = 'Brand',
+		brandHref = '/',
+		brandIcon,
+		items = [],
+		actions,
+		class: klass = '',
+	}: {
+		brand?: string;
+		brandHref?: string;
+		brandIcon?: any;
+		items?: NavItem[];
+		actions?: Snippet;
+		class?: string;
+	} = $props();
+
+	let headerEl: HTMLElement;
+	let openL1 = $state<number | null>(null);
+	let openL2 = $state<number | null>(null);
+
+	function toggleL1(i: number) {
+		openL1 = openL1 === i ? null : i;
+		openL2 = null;
+	}
+
+	function toggleL2(i: number) {
+		openL2 = openL2 === i ? null : i;
+	}
+
+	function onWindowClick(e: MouseEvent) {
+		if (!headerEl?.contains(e.target as Node)) {
+			openL1 = null;
+			openL2 = null;
+		}
+	}
+</script>
+
+<!-- Header-3: row 1 brand + actions · row 2 nav centered -->
+
+<svelte:window onclick={onWindowClick} />
+
+<header
+	bind:this={headerEl}
+	class="sticky top-0 z-50 w-full border-b border-border-primary bg-surface-primary {klass}"
+>
+	<!-- row 1 -->
+	<div class="mx-auto flex h-12 max-w-7xl items-center justify-between px-4">
+		<a href={brandHref} class="flex shrink-0 items-center gap-2 no-underline opacity-100 hover:opacity-80">
+			{#if brandIcon}{@const Icon = brandIcon}<Icon class="size-5 text-accent" />{/if}
+			<span class="text-sm font-semibold text-primary">{brand}</span>
+		</a>
+		{#if actions}
+			<div class="flex items-center gap-2">{@render actions()}</div>
+		{/if}
+	</div>
+
+	<!-- row 2 -->
+	<div class="border-t border-border-primary">
+		<div class="mx-auto flex h-10 max-w-7xl items-center justify-center px-4">
+			<NavList {items} {openL1} {openL2} onToggleL1={toggleL1} onToggleL2={toggleL2} />
+		</div>
+	</div>
+</header>

package/dist/header/Header-3.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { NavItem } from './types';
+type $$ComponentProps = {
+    brand?: string;
+    brandHref?: string;
+    brandIcon?: any;
+    items?: NavItem[];
+    actions?: Snippet;
+    class?: string;
+};
+declare const Header3: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header3 = ReturnType<typeof Header3>;
+export default Header3;

package/dist/header/Header-4.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		brand = 'Brand',
+		brandHref = '/',
+		brandIcon,
+		tagline = '',
+		actions,
+		class: klass = '',
+	}: {
+		brand?: string;
+		brandHref?: string;
+		brandIcon?: any;
+		tagline?: string;
+		actions?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<!-- Header-4: minimal — brand left · tagline center · actions right -->
+
+<header class="sticky top-0 z-50 w-full border-b border-border-primary bg-surface-primary {klass}">
+	<div class="mx-auto grid h-14 max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4">
+
+		<a href={brandHref} class="flex shrink-0 items-center gap-2 no-underline opacity-100 hover:opacity-80">
+			{#if brandIcon}{@const Icon = brandIcon}<Icon class="size-5 text-accent" />{/if}
+			<span class="text-sm font-semibold text-primary">{brand}</span>
+		</a>
+
+		{#if tagline}
+			<p class="text-center text-sm text-tertiary">{tagline}</p>
+		{:else}
+			<span></span>
+		{/if}
+
+		<div class="flex items-center gap-2">
+			{#if actions}{@render actions()}{/if}
+		</div>
+
+	</div>
+</header>

package/dist/header/Header-4.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    brand?: string;
+    brandHref?: string;
+    brandIcon?: any;
+    tagline?: string;
+    actions?: Snippet;
+    class?: string;
+};
+declare const Header4: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header4 = ReturnType<typeof Header4>;
+export default Header4;

package/dist/header/Header.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { NavItem } from './types.js';
+
+	let {
+		brand,
+		brandHref = '/',
+		brandIcon,
+		items = [],
+		actions,
+		variant = 'default',
+		class: klass = '',
+	}: {
+		brand: string;
+		brandHref?: string;
+		brandIcon?: any;
+		items?: NavItem[];
+		actions?: Snippet;
+		/** default  — brand left · nav left · actions right
+		 *  centered  — brand left · nav grid-centered · actions right
+		 *  stacked   — row 1: brand + actions  |  row 2: nav centered
+		 *  minimal   — brand left · actions right · no nav
+		 */
+		variant?: 'default' | 'centered' | 'stacked' | 'minimal';
+		class?: string;
+	} = $props();
+
+	let headerEl: HTMLElement;
+	let openL1 = $state<number | null>(null);
+	let openL2 = $state<number | null>(null);
+
+	function toggleL1(i: number) {
+		openL1 = openL1 === i ? null : i;
+		if (openL1 !== i) openL2 = null;
+		else openL2 = null;
+	}
+
+	function toggleL2(i: number) {
+		openL2 = openL2 === i ? null : i;
+	}
+
+	function handleWindowClick(e: MouseEvent) {
+		if (!headerEl?.contains(e.target as Node)) {
+			openL1 = null;
+			openL2 = null;
+		}
+	}
+</script>
+
+<!-- ─── reusable snippets ────────────────────────────────────── -->
+
+{#snippet brandMark()}
+	<a href={brandHref} class="flex shrink-0 items-center gap-2 no-underline opacity-100 hover:opacity-80">
+		{#if brandIcon}
+			{@const BrandIcon = brandIcon}
+			<BrandIcon class="size-5 text-accent" />
+		{/if}
+		<span class="text-sm font-semibold text-primary">{brand}</span>
+	</a>
+{/snippet}
+
+{#snippet navList()}
+	<nav class="flex items-center gap-0.5">
+		{#each items as item, i}
+			<div class="relative">
+				{#if item.children?.length}
+					<!-- L1 trigger -->
+					<button
+						class="btn-ghost btn-sm flex items-center gap-1.5"
+						onclick={() => toggleL1(i)}
+						aria-expanded={openL1 === i}
+						aria-haspopup="true"
+					>
+						{#if item.icon}
+							{@const L1Icon = item.icon}
+							<L1Icon class="size-4 shrink-0" />
+						{/if}
+						<span>{item.label}</span>
+						{#if item.badge}
+							<span data-badge>{item.badge}</span>
+						{/if}
+						<svg
+							class="size-3 transition-transform duration-150 {openL1 === i ? 'rotate-180' : ''}"
+							viewBox="0 0 16 16" fill="none" stroke="currentColor"
+							stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+						>
+							<path d="M4 6l4 4 4-4" />
+						</svg>
+					</button>
+
+					<!-- L2 dropdown -->
+					{#if openL1 === i}
+						<div class="absolute left-0 top-full z-50 mt-1.5 min-w-52 rounded-2xl border border-border-primary bg-surface-primary p-1 shadow-lg">
+							{#each item.children as child, ci}
+								{#if child.children?.length}
+									<!-- L2 trigger + L3 flyout -->
+									<div class="relative">
+										<button
+											class="flex w-full items-center gap-2 rounded-xl border-transparent bg-transparent px-3 py-2 text-sm text-secondary transition-colors hover:bg-surface-secondary hover:text-primary"
+											onclick={() => toggleL2(ci)}
+											aria-expanded={openL2 === ci}
+											aria-haspopup="true"
+										>
+											{#if child.icon}
+												{@const L2Icon = child.icon}
+												<L2Icon class="size-4 shrink-0 text-tertiary" />
+											{/if}
+											<span class="flex-1 text-left">{child.label}</span>
+											{#if child.badge}
+												<span data-badge class="ml-auto">{child.badge}</span>
+											{/if}
+											<svg
+												class="size-3 shrink-0 transition-transform duration-150 {openL2 === ci ? 'rotate-90' : ''}"
+												viewBox="0 0 16 16" fill="none" stroke="currentColor"
+												stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
+											>
+												<path d="M6 4l4 4-4 4" />
+											</svg>
+										</button>
+
+										<!-- L3 flyout -->
+										{#if openL2 === ci}
+											<div class="absolute left-full top-0 z-50 ml-1 min-w-48 rounded-2xl border border-border-primary bg-surface-primary p-1 shadow-lg">
+												{#each child.children as grandchild}
+													<a
+														href={grandchild.href ?? '#'}
+														class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-primary"
+													>
+														{#if grandchild.icon}
+															{@const L3Icon = grandchild.icon}
+															<L3Icon class="size-4 shrink-0 text-tertiary" />
+														{/if}
+														<span>{grandchild.label}</span>
+														{#if grandchild.badge}
+															<span data-badge class="ml-auto">{grandchild.badge}</span>
+														{/if}
+													</a>
+												{/each}
+											</div>
+										{/if}
+									</div>
+								{:else}
+									<!-- L2 leaf -->
+									<a
+										href={child.href ?? '#'}
+										class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-primary"
+									>
+										{#if child.icon}
+											{@const L2LeafIcon = child.icon}
+											<L2LeafIcon class="size-4 shrink-0 text-tertiary" />
+										{/if}
+										<span>{child.label}</span>
+										{#if child.badge}
+											<span data-badge class="ml-auto">{child.badge}</span>
+										{/if}
+									</a>
+								{/if}
+							{/each}
+						</div>
+					{/if}
+				{:else}
+					<!-- L1 leaf link -->
+					<a
+						href={item.href ?? '#'}
+						class="btn-ghost btn-sm flex items-center gap-1.5 no-underline"
+					>
+						{#if item.icon}
+							{@const L1LeafIcon = item.icon}
+							<L1LeafIcon class="size-4 shrink-0" />
+						{/if}
+						<span>{item.label}</span>
+						{#if item.badge}
+							<span data-badge>{item.badge}</span>
+						{/if}
+					</a>
+				{/if}
+			</div>
+		{/each}
+	</nav>
+{/snippet}
+
+{#snippet actionBar()}
+	{#if actions}
+		<div class="flex items-center gap-2">
+			{@render actions()}
+		</div>
+	{/if}
+{/snippet}
+
+<!-- ─── variants ─────────────────────────────────────────────── -->
+
+<svelte:window onclick={handleWindowClick} />
+
+<header
+	bind:this={headerEl}
+	class="sticky top-0 z-50 w-full border-b border-border-primary bg-surface-primary {klass}"
+>
+
+	{#if variant === 'default'}
+		<!-- brand · nav · ··· · actions -->
+		<div class="mx-auto flex h-14 max-w-7xl items-center gap-4 px-4">
+			{@render brandMark()}
+			{@render navList()}
+			<div class="ml-auto">{@render actionBar()}</div>
+		</div>
+
+	{:else if variant === 'centered'}
+		<!-- brand · ··· · [nav centered] · ··· · actions -->
+		<div class="mx-auto grid h-14 max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-4 px-4">
+			{@render brandMark()}
+			<div class="flex justify-center">{@render navList()}</div>
+			{@render actionBar()}
+		</div>
+
+	{:else if variant === 'stacked'}
+		<!-- row 1: brand ··· actions -->
+		<div class="mx-auto flex h-12 max-w-7xl items-center justify-between px-4">
+			{@render brandMark()}
+			{@render actionBar()}
+		</div>
+		<!-- row 2: nav centered -->
+		<div class="border-t border-border-primary">
+			<div class="mx-auto flex h-10 max-w-7xl items-center justify-center px-4">
+				{@render navList()}
+			</div>
+		</div>
+
+	{:else if variant === 'minimal'}
+		<!-- brand ··· actions — no nav -->
+		<div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
+			{@render brandMark()}
+			{@render actionBar()}
+		</div>
+	{/if}
+
+</header>

package/dist/header/Header.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { NavItem } from './types.js';
+type $$ComponentProps = {
+    brand: string;
+    brandHref?: string;
+    brandIcon?: any;
+    items?: NavItem[];
+    actions?: Snippet;
+    /** default  — brand left · nav left · actions right
+     *  centered  — brand left · nav grid-centered · actions right
+     *  stacked   — row 1: brand + actions  |  row 2: nav centered
+     *  minimal   — brand left · actions right · no nav
+     */
+    variant?: 'default' | 'centered' | 'stacked' | 'minimal';
+    class?: string;
+};
+declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/header/_NavList.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { NavItem } from './types';
+
+	let {
+		items,
+		openL1,
+		openL2,
+		onToggleL1,
+		onToggleL2,
+	}: {
+		items: NavItem[];
+		openL1: number | null;
+		openL2: number | null;
+		onToggleL1: (i: number) => void;
+		onToggleL2: (i: number) => void;
+	} = $props();
+</script>
+
+<nav class="flex items-center gap-0.5">
+	{#each items as item, i (i)}
+		<div class="relative">
+			{#if item.children?.length}
+				<button
+					class="btn-ghost btn-sm flex items-center gap-1.5"
+					onclick={() => onToggleL1(i)}
+					aria-expanded={openL1 === i}
+					aria-haspopup="true"
+				>
+					{#if item.icon}{@const I = item.icon}<I class="size-4 shrink-0" />{/if}
+					<span>{item.label}</span>
+					{#if item.badge}<span data-badge>{item.badge}</span>{/if}
+					<svg class="size-3 transition-transform duration-150 {openL1 === i ? 'rotate-180' : ''}"
+						viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"
+						stroke-linecap="round" stroke-linejoin="round">
+						<path d="M4 6l4 4 4-4" />
+					</svg>
+				</button>
+
+				{#if openL1 === i}
+					<div class="absolute left-0 top-full z-50 mt-1.5 min-w-52 rounded-2xl border border-border-primary bg-surface-primary p-1 shadow-lg">
+						{#each item.children as child, ci (ci)}
+							{#if child.children?.length}
+								<div class="relative">
+									<button
+										class="flex w-full items-center gap-2 rounded-xl border-transparent bg-transparent px-3 py-2 text-sm text-secondary transition-colors hover:bg-surface-secondary hover:text-primary"
+										onclick={() => onToggleL2(ci)}
+										aria-expanded={openL2 === ci}
+										aria-haspopup="true"
+									>
+										{#if child.icon}{@const I = child.icon}<I class="size-4 shrink-0 text-tertiary" />{/if}
+										<span class="flex-1 text-left">{child.label}</span>
+										{#if child.badge}<span data-badge class="ml-auto">{child.badge}</span>{/if}
+										<svg class="size-3 shrink-0 transition-transform duration-150 {openL2 === ci ? 'rotate-90' : ''}"
+											viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5"
+											stroke-linecap="round" stroke-linejoin="round">
+											<path d="M6 4l4 4-4 4" />
+										</svg>
+									</button>
+
+									{#if openL2 === ci}
+										<div class="absolute left-full top-0 z-50 ml-1 min-w-48 rounded-2xl border border-border-primary bg-surface-primary p-1 shadow-lg">
+											{#each child.children as grandchild,i (i)}
+												<a href={resolve(grandchild.href ?? '#',{})}
+													class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-primary">
+													{#if grandchild.icon}{@const I = grandchild.icon}<I class="size-4 shrink-0 text-tertiary" />{/if}
+													<span>{grandchild.label}</span>
+													{#if grandchild.badge}<span data-badge class="ml-auto">{grandchild.badge}</span>{/if}
+												</a>
+											{/each}
+										</div>
+									{/if}
+								</div>
+							{:else}
+								<a href={child.href ?? '#'}
+									class="flex items-center gap-2 rounded-xl px-3 py-2 text-sm text-secondary no-underline transition-colors hover:bg-surface-secondary hover:text-primary">
+									{#if child.icon}{@const I = child.icon}<I class="size-4 shrink-0 text-tertiary" />{/if}
+									<span>{child.label}</span>
+									{#if child.badge}<span data-badge class="ml-auto">{child.badge}</span>{/if}
+								</a>
+							{/if}
+						{/each}
+					</div>
+				{/if}
+			{:else}
+				<a href={item.href ?? '#'} class="btn-ghost btn-sm flex items-center gap-1.5 no-underline">
+					{#if item.icon}{@const I = item.icon}<I class="size-4 shrink-0" />{/if}
+					<span>{item.label}</span>
+					{#if item.badge}<span data-badge>{item.badge}</span>{/if}
+				</a>
+			{/if}
+		</div>
+	{/each}
+</nav>

package/dist/header/_NavList.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { NavItem } from './types';
+type $$ComponentProps = {
+    items: NavItem[];
+    openL1: number | null;
+    openL2: number | null;
+    onToggleL1: (i: number) => void;
+    onToggleL2: (i: number) => void;
+};
+declare const NavList: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavList = ReturnType<typeof NavList>;
+export default NavList;

package/dist/header/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Header1 } from './Header-1';
+export { default as Header2 } from './Header-2';
+export { default as Header3 } from './Header-3';
+export { default as Header4 } from './Header-4';
+export type { NavItem, HeaderProps } from './types';

package/dist/header/index.js

@@ -0,0 +1,4 @@
+export { default as Header1 } from './Header-1';
+export { default as Header2 } from './Header-2';
+export { default as Header3 } from './Header-3';
+export { default as Header4 } from './Header-4';

package/dist/header/types.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+export type NavItem = {
+    label: string;
+    href?: string;
+    icon?: any;
+    badge?: string;
+    children?: NavItem[];
+};
+export type HeaderVariant = 'default' | 'centered' | 'stacked' | 'minimal';
+export type HeaderProps = {
+    brand: string;
+    brandHref?: string;
+    brandIcon?: any;
+    items?: NavItem[];
+    actions?: Snippet;
+    variant?: HeaderVariant;
+    class?: string;
+};

package/dist/header/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { Header1, Header2, Header3, Header4 } from './header';
+export type { NavItem, HeaderProps } from './header';
+export { LandingPage1, LandingPage2, LandingPage3 } from './landing-pages';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Header1, Header2, Header3, Header4 } from './header';
+export { LandingPage1, LandingPage2, LandingPage3 } from './landing-pages';

package/dist/landing-pages/Landingpage-1.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let {
+		title = 'Greeny',
+		logo = 'https://image.flaticon.com/icons/svg/497/497348.svg',
+		heading = 'Find your greeny stuff for your room',
+		highlight = 'greeny',
+		description = `Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      Recusandae maiores neque eaque ea odit placeat, tenetur illum
+      distinctio nulla voluptatum a corrupti beatae tempora aperiam
+      quia id aliquam possimus aut.`,
+		ctaText = 'Learn More',
+		image = 'https://images.unsplash.com/photo-1536147116438-62679a5e01f2?auto=format&fit=crop&w=634&q=80',
+		imageAlt = 'Product showcase',
+		onCta,
+		lSnippet,
+		value = $bindable('Wooooooooooeeeeee')
+	}: {
+		title?: string;
+		logo?: string;
+		heading?: string;
+		highlight?: string;
+		description?: string;
+		ctaText?: string;
+		image?: string;
+		imageAlt?: string;
+		onCta?: (msg:string) => void;
+		lSnippet?: Snippet;
+		value?: string
+	} = $props();
+
+	const parts = $derived(highlight && heading.includes(highlight)
+		? heading.split(highlight)
+		: [heading, '']);
+
+		export function callFromOutside(ms:any) {
+			alert("Hello from outside the component!");
+			console.log("Received message:", ms);
+		}
+</script>
+
+<div class="flex flex-wrap">
+	<!-- LEFT SIDE -->
+	<div class="w-full sm:w-8/12 mb-10">
+		<div class="container mx-auto h-full sm:p-10">
+			<!-- NAV -->
+			<nav class="flex px-4 justify-between items-center">
+				<div class="text-4xl font-bold">
+					{title}<span class="text-accent/70">.</span>
+				</div>
+				<div>
+					<img src={logo} alt="{title} logo" class="w-8" />
+				</div>
+			</nav>
+
+			<!-- HERO -->
+			<header class="container px-4 lg:flex mt-10 items-center h-full lg:mt-0">
+				<div class="w-full">
+					<h1 class="text-4xl lg:text-6xl font-bold">
+						{#if parts[1] !== ''}
+							{parts[0]}<span class="text-accent/85">{highlight}  <span class="text-amber-800">{value}</span></span>{parts[1]}
+						{:else}
+							{heading}
+						{/if}
+					</h1>
+
+					<div class="w-20 h-2 bg-accent/70 my-4"></div>
+
+					<p class="text-xl mb-10">{description}</p>
+
+					{#if lSnippet}
+						{@render lSnippet()}
+					{/if}
+
+					<button type="button" class="btn btn-primary" onclick={()=>onCta?.("Hello from Landingpage-1!")}>
+						{ctaText}
+					</button>
+				</div>
+			</header>
+		</div>
+	</div>
+
+	<!-- RIGHT SIDE IMAGE -->
+	<img src={image} alt={imageAlt} class="w-full h-48 object-cover sm:h-screen sm:w-4/12" />
+</div>

package/dist/landing-pages/Landingpage-1.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string;
+    logo?: string;
+    heading?: string;
+    highlight?: string;
+    description?: string;
+    ctaText?: string;
+    image?: string;
+    imageAlt?: string;
+    onCta?: (msg: string) => void;
+    lSnippet?: Snippet;
+    value?: string;
+};
+declare const Landingpage1: import("svelte").Component<$$ComponentProps, {
+    callFromOutside: (ms: any) => void;
+}, "value">;
+type Landingpage1 = ReturnType<typeof Landingpage1>;
+export default Landingpage1;

package/dist/landing-pages/Landingpage-2.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	let {
+		title = 'Discover Your New Home',
+		backgroundImage = 'https://images.unsplash.com/photo-1449844908441-8829872d2607?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxob21lfGVufDB8MHx8fDE3MTA0MDE1NDZ8MA&ixlib=rb-4.0.3&q=80&w=1080',
+		placeholder = 'City, address, or ZIP',
+		buttonText = 'Search',
+		inputLabel = 'Search properties',
+		onSubmit = (_value: string) => {}
+	}: {
+		title?: string;
+		backgroundImage?: string;
+		placeholder?: string;
+		buttonText?: string;
+		inputLabel?: string;
+		onSubmit?: (value: string) => void;
+	} = $props();
+
+	let searchValue = $state('');
+
+	function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		onSubmit(searchValue);
+	}
+</script>
+
+<section class="w-full h-screen">
+	<div
+		class="w-full h-full opacity-90 bg-cover bg-no-repeat bg-center flex flex-col justify-center items-center"
+		style={`background-image: url('${backgroundImage}')`}
+	>
+		<!-- Title -->
+		<h1
+			class="text-white text-center xl:text-5xl lg:text-4xl md:text-3xl sm:text-2xl text-xl font-semibold p-2 rounded-sm"
+		>
+			{title}
+		</h1>
+
+		<!-- Search Form -->
+		<div class="w-full mx-auto">
+			<form onsubmit={handleSubmit}>
+				<div class="xl:w-1/2 lg:w-[60%] sm:w-[70%] w-[90%] mx-auto flex gap-2 md:mt-6 mt-4">
+					<label for="lp2-search" class="sr-only">{inputLabel}</label>
+					<input
+						id="lp2-search"
+						type="text"
+						bind:value={searchValue}
+						class="border w-full p-2 rounded-md text-xl pl-2"
+						{placeholder}
+					/>
+					<button type="submit" class="btn btn-primary">
+						{buttonText}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</section>

package/dist/landing-pages/Landingpage-2.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    title?: string;
+    backgroundImage?: string;
+    placeholder?: string;
+    buttonText?: string;
+    inputLabel?: string;
+    onSubmit?: (value: string) => void;
+};
+declare const Landingpage2: import("svelte").Component<$$ComponentProps, {}, "">;
+type Landingpage2 = ReturnType<typeof Landingpage2>;
+export default Landingpage2;

package/dist/landing-pages/Landingpage-3.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { Heart, Download } from 'svelte-bootstrap-icons';
+
+	// svelte-bootstrap-icons ships Svelte 4 class components; double-assert to
+	// bridge the incompatible Svelte 5 Component function signature.
+	type IconComponent = Component<Record<string, never>>;
+
+	let {
+		greeting = 'Hi,',
+		role = "I'm Full Stack Developer",
+		description = `Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+Aut excepturi magnam enim officiis facilis numquam corporis
+quos accusantium tempora, dolores quod cum facere architecto
+soluta atque corrupti a alias perferendis.`,
+		followText = 'Follow',
+		resumeText = 'Resume',
+		image = 'https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600',
+		imageAlt = 'Profile photo',
+		FollowIcon = Heart as unknown as IconComponent,
+		ResumeIcon = Download as unknown as IconComponent,
+		onFollow = () => {},
+		onResume = () => {}
+	}: {
+		greeting?: string;
+		role?: string;
+		description?: string;
+		followText?: string;
+		resumeText?: string;
+		image?: string;
+		imageAlt?: string;
+		FollowIcon?: IconComponent;
+		ResumeIcon?: IconComponent;
+		onFollow?: () => void;
+		onResume?: () => void;
+	} = $props();
+</script>
+
+<div class="flex h-screen items-center justify-center bg-surface-secondary p-5">
+	<div class="grid md:grid-cols-2 grid-cols-1 items-center gap-10 md:px-10">
+
+		<!-- LEFT SIDE -->
+		<div>
+			<h1 class="mb-2 text-3xl font-bold">
+				<span class="text-accent">{greeting}</span> {role}
+			</h1>
+
+			<p class="mb-6">{description}</p>
+
+			<div class="flex justify-center space-x-5">
+				<button type="button" class="btn btn-primary w-full" onclick={onFollow}>
+					{followText}
+					<FollowIcon />
+				</button>
+
+				<button type="button" class="btn btn-secondary w-full" onclick={onResume}>
+					{resumeText}
+					<ResumeIcon />
+				</button>
+			</div>
+		</div>
+
+		<!-- RIGHT SIDE IMAGE -->
+		<div>
+			<img
+				src={image}
+				alt={imageAlt}
+				class="md:size-96 size-72 rounded-full object-cover"
+			/>
+		</div>
+
+	</div>
+</div>

package/dist/landing-pages/Landingpage-3.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+type IconComponent = Component<Record<string, never>>;
+type $$ComponentProps = {
+    greeting?: string;
+    role?: string;
+    description?: string;
+    followText?: string;
+    resumeText?: string;
+    image?: string;
+    imageAlt?: string;
+    FollowIcon?: IconComponent;
+    ResumeIcon?: IconComponent;
+    onFollow?: () => void;
+    onResume?: () => void;
+};
+declare const Landingpage3: Component<$$ComponentProps, {}, "">;
+type Landingpage3 = ReturnType<typeof Landingpage3>;
+export default Landingpage3;

package/dist/landing-pages/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LandingPage1 } from './Landingpage-1.svelte';
+export { default as LandingPage2 } from './Landingpage-2.svelte';
+export { default as LandingPage3 } from './Landingpage-3.svelte';

package/dist/landing-pages/index.js

@@ -0,0 +1,3 @@
+export { default as LandingPage1 } from './Landingpage-1.svelte';
+export { default as LandingPage2 } from './Landingpage-2.svelte';
+export { default as LandingPage3 } from './Landingpage-3.svelte';

package/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "@aryagg/layout-kit",
+	"version": "0.0.2",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@aryagg/theme": "^0.0.2",
+		"@aryagg/types": "^1.1.1",
+		"@eslint/js": "^10.0.1",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tailwindcss/vite": "^4.0.0",
+		"@types/node": "^22",
+		"eslint": "^10.4.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.19.0",
+		"globals": "^17.6.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"publint": "^0.3.21",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.6.0",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.60.1",
+		"vite": "^8.0.16"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"@aryagg/utils": "^1.1.2"
+	}
+}