Native Framework Components

Vesk Native ships a small set of framework components that compile to named Compose calls. They are auto-available in any `.vsk` file — no import needed.

Link & NavLink

										
											component Nav() {
  <nav class="flex gap-3 p-4 border-b">
    <Link href="/">
      <span class="font-bold">Home</span>
    </Link>
    <NavLink href="/shop" class="text-gray-600">
      Shop
    </NavLink>
  </nav>
}
										
									

• `<Link href="/path" class="...">` — navigates to the route on tap.
• `<NavLink href="/path" class="...">` — same, plus an active style for the current route.
• Both take `class` and `modifier` (the `LinkProps` shape: `{ href, class, modifier }`).
• Tap is handled through the runtime `Link` composable; no JavaScript involved.

Outlet

`<Outlet />` renders the child route inside a nested layout — the native counterpart of `{props.children}` in file-based layouts. Both resolve to the same child-rendering slot.

PullToRefresh

										
											component Nav() {
  <nav class="flex gap-3 p-4 border-b">
    <Link href="/">
      <span class="font-bold">Home</span>
    </Link>
    <NavLink href="/shop" class="text-gray-600">
      Shop
    </NavLink>
  </nav>
}
										
									

• Pull gesture triggers `onRefresh`; while `isRefreshing` is true the spinner is shown.
• Material3 pull-to-refresh indicator with the app's theme colors.
• Wire `isRefreshing` to a tracked cell and reset it in your refresh logic.

SwipeToDismiss

										
											component Nav() {
  <nav class="flex gap-3 p-4 border-b">
    <Link href="/">
      <span class="font-bold">Home</span>
    </Link>
    <NavLink href="/shop" class="text-gray-600">
      Shop
    </NavLink>
  </nav>
}
										
									

• Swipe horizontally to reveal the background and trigger `onDismiss`.
• `background` accepts a color string (e.g. `red`) or the default Material3 surface.
• The dismissed state is yours — the component only reports the gesture.

CardStack

										
											component Nav() {
  <nav class="flex gap-3 p-4 border-b">
    <Link href="/">
      <span class="font-bold">Home</span>
    </Link>
    <NavLink href="/shop" class="text-gray-600">
      Shop
    </NavLink>
  </nav>
}
										
									

• A horizontally stacked deck — the top card is interactive; swiping it reveals the next.
• Children are cards; the stack renders them offset and stacked like a deck.
• Compose's `CardStack` provides the gesture and depth handling.